CSSで簡単パンくずリスト

公開日:2014/10/02

CSSでパンくずリストを作ってみたのでメモ。

HTMLでリストを作成

まずはHTML。

<ul class="breadcrumbs">
	<li><a href="/"><i class="fa fa-home"></i></a></li>
	<li><a href="/blog/">開発ブログ</a></li>
	<li></li>
</ul>

ulタグliタグで作成したリストにaタグでアンカーテキストを入れる。
ホームは他のページでも利用してるアイコンフォント｢Font Awesome｣を使ってみた。
最後のliタグには現在位置をアンカーなしで入れてもいいと思う。
今回はすぐ下にまた同じページタイトル(h1タグ)があるからしつこくて消した。
CSSで利用するため空でも消さずに残しておく。

CSSで横に並べる

CSSでパンくずリストにする。

.breadcrumbs{
	background-color:black;
	color:#cccccc;
	padding:10px;
	font-weight:bold;
	list-style:none;
}

.breadcrumbs li{
	display:inline-block;
}

.breadcrumbs li+li:before{
	color:white;
	font-family: FontAwesome;
	content:"\f054";
	padding:0 5px
}

.breadcrumbs li a{
	text-decoration: underline;
	color: white
}

.breadcrumbs li a:hover{
	color: #cccccc
}

まるごと載せたけど必要なポイントは3つだけ。
まずulタグにlist-style:noneを指定して｢･｣を消すこと。
次にliタグにdisplay:inline-blockを指定して横一列に並べること。
最後にli+liのbefore擬似要素でセパレータ(区切り文字)を設定すること。
liタグの右隣にあるliタグの前=liタグの間にだけセパレータを入れる技。
全部のliタグにセパレータ付けてからfirst-child擬似クラスかlast-child擬似クラスで端っこのやつだけ消すて人もいるみたい。
aタグのtext-decorationはnoneだとクリックできるかどうか見た目でわかりづらかったのであえてunderlineにした。

パンくずリストは階層を表すんだからulタグじゃなくてolタグだろうて記事をいくつか見つけた。
一瞬悩んだけどolタグは順序を表すのであって階層とはまた違う気がしたのでどっちも対して変わらないと考えてのulタグ採用。
そもそもリストである必要もない。自分が一番レイアウトし易いタグにすればいいと思う。
Googleのパンくずリストのヘルプはどっちも使ってないし( ﾟдﾟ)
liタグをブロック要素化してfloatして横に並べる方法も試してみたけどこっちの方が簡単に書けた。

完成

また少しホームページらしくなった。

現在一部ページを使ってmicrodataを使ってGoogleのスニペットにパンくずリストを表示する実験中。
いつ反映されるんだろ_(:3 」∠)_