【CSS】CSSで実装するちょっと凝ったパンくずリスト
地味なパーツながら実は便利。そのためコーディングをする機会も多いと思われるのが「パンくずリスト」です。
シンプルなコーディングでちょっと気の利いた「パンくずリスト」を実現する方法をご紹介します。
パンくずリストの XHTML のサンプルは以下です。とてもシンプルです。
<ol id="topicPath">
<li class="home"><a href="hoge">ホーム</a></li>
<li><a href="hoge">アニメ</a></li>
<li><a href="hoge">ガンバの冒険</a></li>
<li><em>ボーボ</em></li>
</ol>
サンプル1 とてもシンプルなパンくずリスト
とてもシンプルなパンくずリストのサンプルです。
CSS はこちら
ol#topicPath {
margin: 20px 0;
padding: 0;
font-size: 80%;
list-style: none;
}
ol#topicPath li {
float: left;
padding-right: 7px;
padding-left: 10px;
background: url(img/ico_sample01.gif) no-repeat 0 50%;
}
ol#topicPath li.home {
padding-left: 0;
background: none;
}
ol#topicPath li a:link,
ol#topicPath li a:visited {
color: #3366FF;
text-decoration: underline;
}
ol#topicPath li a:hover,
ol#topicPath li a:active {
color: #FF6633;
text-decoration: underline;
}
ol#topicPath li em {
font-style: normal;
font-weight: bold;
}
「>」を背景画像として表示させることで、無駄のない XHTML のままシンプルなパンくずリストを実現しています。
サンプル2 ちょっとアイコンに凝ってみたパンくずリスト
ちょっとだけアイコンに凝ってみたパンくずリストのサンプルです。
CSS はこちら
ol#topicPath {
margin: 20px 0;
padding: 0;
font-size: 80%;
list-style: none;
}
ol#topicPath li {
float: left;
padding-right: 6px;
padding-left: 12px;
background: url(img/ico_sample02_02.gif) no-repeat 0 50%;
}
ol#topicPath li.home {
padding-left: 18px;
background: url(img/ico_sample02_01.gif) no-repeat 0 50%;
}
ol#topicPath li a:link,
ol#topicPath li a:visited {
color: #0000FF;
text-decoration: underline;
}
ol#topicPath li a:hover,
ol#topicPath li a:active {
color: #FF0000;
text-decoration: underline;
}
ol#topicPath li em {
font-style: normal;
font-weight: bold;
}
アイコンを変えてみるだけで、かわいらしい雰囲気にすることができます。
サンプル3 背景画像を使って、ちょっとリッチにしてみたパンくずリスト
CSS はこちら
ol#topicPath {
margin: 20px 0;
padding: 0;
font-size: 80%;
list-style: none;
}
ol#topicPath li {
float: left;
margin-right: 5px;
}
ol#topicPath li a {
display: block;
position: relative;
padding: 5px 2em 5px 1em;
background-image: url(img/bg_sample03.gif);
background-repeat: no-repeat;
background-position: 100% 50%;
}
ol#topicPath li a:link,
ol#topicPath li a:visited {
background-color: #FF6633;
color: #FFFFFF;
text-decoration: none;
}
ol#topicPath li a:hover,
ol#topicPath li a:active {
background-color: #3366FF;
color: #FFFFFF;
text-decoration: none;
}
ol#topicPath li em {
display: block;
padding: 5px 1em;
background-color: #CCCCCC;
font-style: normal;
font-weight: bold;
}
CSS で背景色を変えるだけで、矢印っぽくなっている背景の色を変更することができるようになっているのがミソです。
まずは簡単に使えるテクニックをご紹介しました。アイコンや背景画像を上手く使えば、もっと凝ったデザインにすることもできます。
本日ご紹介したサンプルを一括ダウンロードする場合は、以下からどうぞ。