シンプルにデザインされたパンくずリストをcssで簡単に作成する方法
最近、当ブログへの検索エンジンでのセッションに、「パンくずリスト」というキーワードで訪問される方が多いので、簡単なパンくずリストの作成手順を書いてみます。
「ワードプレスのプラグインでのパンくずリストの設置方法」は、以前紹介させていただきましたが、普通のホームページ作成時では勿論使えませんので、この記事がcssで作るパンくずリストの参考になれば幸いです。
以下にサンプルもご用意しましたので、ダウンロードしちゃってください。
サンプルをダウンロードする
■作成手順は以下のように
- 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" />
以上です。
簡単にシンプルなパンくずリストができちゃうんで、これをベースに自分流にカスタムしてみてはいかがでしょう？^^