[css]シンプルにデザインされたパンくずリストをcssで簡単に作成する方法

css シンプルなパンくずリストをcssで簡単にデザインする

シンプルにデザインされたパンくずリストをcssで簡単に作成する方法
最近、当ブログへの検索エンジンでのセッションに、「パンくずリスト」というキーワードで訪問される方が多いので、簡単なパンくずリストの作成手順を書いてみます。

「ワードプレスのプラグインでのパンくずリストの設置方法」は、以前紹介させていただきましたが、普通のホームページ作成時では勿論使えませんので、この記事がcssで作るパンくずリストの参考になれば幸いです。

DEMO[デモ]を見る

以下にサンプルもご用意しましたので、ダウンロードしちゃってください。
サンプルをダウンロードする

■作成手順は以下のように

  • htmlソースを記述
  • 画像の用意。
  • cssを作成
  • htmlにcssファイルを読み込ませる

htmlソースを記述

htmlの <body>~</body> 内に下記のソースを記述。

<div id="pl">
 <ul id="crumbs">
  <li><a href="#">hoge</a></li>
  <li>hoge</li>
 </ul>
</div>

画像の用意。

以下のような画像を用意してください。

パンくずリスト

※作成時にはサイズに注意。パンくずリスト作成前にサイズを決めておきましょう。

cssを作成

cssファイルに下記のソースを記述。

#pl{
text-align: left;
font-size: 1em;
width: 800px;
margin: 2px auto 0 auto;
}
#crumbs{
height:2em;
border:1px solid #dedede;
}
#crumbs li{
float: left;
line-height: 2em;
padding-left: 0.75em;
}
#crumbs li a {
display: block;
background: url(img/crumbs.gif) no-repeat right center;
padding-right: 15px;
}

htmlにcssファイルを読み込ませる

htmlに下記のようにcssファイルをリンクさせて読み込ませます。

<link rel="stylesheet" type="text/css" href="sample.css" />

以上です。
簡単にシンプルなパンくずリストができちゃうんで、これをベースに自分流にカスタムしてみてはいかがでしょう?^^