パンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種

普通のエントリー久々な気がする今日この頃。

今回はトピックパスとかパンくずリストなんて呼ばれてる、ちょっと規模の大きいサイトでは日常茶飯事で見かけるアレのサンプル色々です。

サンプルの前に

#main .entryBody #topicPath_01
とかってなってますけど、#main .entryBody はウチのサイトの都合で優先順位上げの為にやってるんで、コピったりする場合はいらない感じです。

---- こっから続き

サンプル1

まずはボクがよく使う方法です。

実際の表示

• ホーム
• サービスラインナップ
• ウェブサイト制作

CSS

#main .entryBody #topicPath_01 {
	margin:10px 0;
}
#main .entryBody #topicPath_01 li {
	display:inline;
	line-height:110%;
	list-style-type:none;
}
#main .entryBody #topicPath_01 li a {
	padding-right:10px;
	background:url(../img/entry/topicpath.gif) no-repeat right center;
}

HTML

<ul id="topicPath_01">
<li><a href="/">ホーム</a></li>
<li><a href="/">サービスラインナップ</a></li>
<li>ウェブサイト制作</li>
</ul>

>を背景画像にし、リストでマークアップ。
コレの利点は、リンクが無ければ>が表示されないので、現在のページって示す為にclassを設けたりする必要がないことです。

サンプル2

ボクがよく使う方法その2です。

実際の表示

• ホーム
• サービスラインナップ
• ウェブサイト制作

CSS

#main .entryBody #topicPath_02 {
	float:left;
	margin:10px 0;
}
#main .entryBody #topicPath_02 li {
	float:left;
	line-height:110%;
	list-style-type:none;
}
#main .entryBody #topicPath_02 li a {
	margin-right:5px;
	padding-right:10px;
	background:url(../img/entry/topicpath.gif) no-repeat right center;
}

HTML

<ul id="topicPath_02">
<li><a href="/">ホーム</a></li>
<li><a href="/">サービスラインナップ</a></li>
<li>ウェブサイト制作</li>
</ul>

さっきは、リストを横に並べる為にdisplay:inlineを使ってましたが、今回はfloat:leftで並べています。

サンプル3

アクセシビリティ的に良さげなタイプ

実際の表示

ホームサービスラインナップウェブサイト制作

CSS

#main .entryBody #topicPath_03 {
	display:inline;
}
#main .entryBody #topicPath_03 img {
	margin:0 5px;
}

HTML

<p id="topicPath_03">
<a href="/">ホーム</a>
<img src="/img/entry/topicpath.gif" alt="の中の" />
<a href="/">サービスラインナップ</a>
<img src="/img/entry/topicpath.gif" alt="の中の" />
ウェブサイト制作
</p>

※見やすくする為に改行をしてます。実際はしてないです。

パンくずリスト＝ulでマークアップとは限らないんだ。
って思った代表例。
>を画像にする事で、altに「の中の」を入れ、音声ブラウザなどで『ホームの中のサービスラインナップの中のウェブサイト制作』と読ませるそうな。

サンプル4

classを追加して>を消すタイプ

実際の表示

• ホーム
• サービスラインナップ
• ウェブサイト制作

CSS

#main .entryBody #topicPath_04 {
	float:left;
	margin:10px 0;
}
#main .entryBody #topicPath_04 li {
	float:left;
	line-height:110%;
	list-style-type:none;
	margin-right:5px;
	padding-right:10px;
	background:url(../img/entry/topicpath.gif) no-repeat right center;
}
#main .entryBody #topicPath_04 li.active {
	background:none;
}

HTML

<ul id="topicPath_04">
<li><a href="/">ホーム</a></li>
<li><a href="/">サービスラインナップ</a></li>
<li class="active">ウェブサイト制作</li>
</ul>

1、2と似てるけど、指定を全てli要素に行い現在のページにはclassを追加して、>を消しているタイプ。

サンプル5

:after要素を利用したタイプ

実際の表示

• ホーム
• サービスラインナップ
• ウェブサイト制作

CSS

#main .entryBody #topicPath_05 {
	margin:10px 0;
}
#main .entryBody #topicPath_05 li {
	display:inline;
	line-height:110%;
	list-style-type:none;
}
#main .entryBody #topicPath_05 li a:after {
    content:" > ";
}

HTML

<ul id="topicPath_05">
<li><a href="/">ホーム</a></li>
<li><a href="/">サービスラインナップ</a></li>
<li>ウェブサイト制作</li>
</ul>

まぁご存知のようにIEには対応してないので実用性はビミョー。
a要素で指定してるけど、li要素にしてclass追加とか、display:inlineじゃなくてfloat:leftでも勿論可能。

サンプル6

1の右寄せバージョン

実際の表示

• ホーム
• サービスラインナップ
• ウェブサイト制作

CSS

#main .entryBody #topicPath_06 {
	margin:10px 0;
	text-align:right;
}
#main .entryBody #topicPath_06 li {
	display:inline;
	line-height:110%;
	list-style-type:none;
}
#main .entryBody #topicPath_06 li a {
	padding-right:10px;
	background:url(../img/entry/topicpath.gif) no-repeat right center;
}

HTML

<ul id="topicPath_06">
<li><a href="/">ホーム</a></li>
<li><a href="/">サービスラインナップ</a></li>
<li>ウェブサイト制作</li>
</ul>

右寄せのパンくずリストの場合、ul要素をtext-align:rightで右にし、li要素をdisplay:inlineで横並びに。
右寄せのデザインはあまりみないけど、出来るかな・・・ってならない為に覚えておくと便利です。

サンプル7

6のフロートバージョン

実際の表示

• ホーム
• サービスラインナップ
• ウェブサイト制作

CSS

#main .entryBody #topicPath_07 {
	margin:10px 0;
}
#main .entryBody #topicPath_07 li {
	float:right;
	line-height:110%;
	list-style-type:none;
}
#main .entryBody #topicPath_07 li a {
	margin-left:5px;
	padding-left:10px;
	background:url(../img/entry/topicpath_re.gif) no-repeat left center;
}

HTML

<ul id="topicPath_07">
<li><a href="/">ホーム</a></li>
<li><a href="/">サービスラインナップ</a></li>
<li>ウェブサイト制作</li>
</ul>

コレは見にくいと思うから、あまり出会うケースが無いと思いますが、右が上位階層になる場合に。

サンプル8

display:inlineで並べたバージョン

実際の表示

• ホーム >
• サービスラインナップ >
• ウェブサイト制作

CSS

#main .entryBody #topicPath_08 {
	margin:10px 0;
}
#main .entryBody #topicPath_08 li {
	display:inline;
	line-height:110%;
	list-style-type:none;
}

HTML

<ul id="topicPath_08">
<li><a href="/">ホーム</a> &gt; </li>
<li><a href="/">サービスラインナップ</a> &gt; </li>
<li>ウェブサイト制作</li>
</ul>

画像じゃなくてテキストで区切ってます。
とっても簡単。

書いてて思ったこと...

なんだ、この見栄え的に殆ど変わらない地味なエントリーは、、、と。
書いてて微妙に虚しくなりました（苦笑

ご指摘を頂いたので追記です（1/31 21:00頃）

ボクは普段ul要素で組んでますが、ol要素の方が妥当だと意見をいただきました。
確かにolの方が分かりやすいよな。と感じるので、いちおol推奨です。

あと、パンくずリストはあくまでも「そのページまでの道のり」や「現在のページが何処か？」ってのを分かる事を目的としているので、その辺が分かりやすければ、リストじゃなきゃいけないとか、p要素じゃなきゃいけないって事は無いと思ってます。

各種SBMに追加

• 
• 
• 
• 
• 
• 
• 
•