パンくずリストをCSS3のみでスマートに表現する裏技

2012年03月29日

前回の記事ではパンくずリストをグーグルに教える方法を書きましたが、今回はパンくずリストの様々な表現方法を見ていこうと思います。

パンくずリストとは?

童話『ヘンゼルとグレーテル』で迷子にならないようにパンくずを通り道にこぼしていったのが元となります。神話の『ミノタウロス』の話にもある糸を体に巻いてダンジョンに潜っていった話も同じですね。ウェブ上では現在のページが位置する階層を分かりやすくするものです。

トップページ > PCで動くエミュレータ > プレイステーション > ePSXe

ちなみに、パンくずを英語でいうとbradcrumbsになりますが、それだと実際のパンくずの意味もあるのでTopic Pathのほうが通じやすかったりします。最近ではbreadcrumbsも認知されつつあるけどね。

htmlの書き方には様々な方法があり、パラグラフやリストタグが一般的ですが、僕はリストタグの中でもOLタグを好んで使います。

リストに順番をつける

  1. トップページ
  2. PCで動くエミュレータ
  3. プレイステーション
  4. ePSXe

[html]
<ol>
<li><a href="/">トップページ</a></li>
<li><a href="/about/emulators-pc/">PCで動くエミュレータ</a></li>
<li><a href="/playstation-pc/">プレイステーション</a></li>
<li>ePSXe</li>
</ol>
[/html]

OLタグは順番に意味のあるリストを記すときに使います。例えばランキングなど。グーグルロボットの挙動を見ていたらパンくずリストも、OLタグで表記するのが一番近いのではないかと感じました。

ロボット的には最適でも、↑のただの箇条書きでは利用者にとってわけわかんないのでCSSで装飾を施します。style.cssというファイルを作り、以下のタグをheadタグの中に埋める。

[html]
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
[/html]

CSSでできる面白い裏技を紹介

  1. ホーム
  2. PC上で動くエミュレータ
  3. プレイステーション
  4. ePSXe

[html]
<ol id="topicpath">
<li><a href="/">ホーム</a></li>
<li><a href="/about/emulators-pc/">PC上で動くエミュレータ</a></li>
<li><a href="/playstation-pc/">プレイステーション</a></li>
<li>ePSXe</li>
</ol>
[/html]

現在、当サイトで使用しているパンくずリストです。一見して普通のリストタグを使ったパンくずリストに思えますが、実は■現在地をCSSから記入させています。

見出しに■や★や●などの記号を使って目立たせたい場合、直接htmlに入力するよりもCSSによって表示させたほうがスマートです。

[css]
ol#topicpath:before {
content: "■現在地";
display: block;
font-weight: bold;
}
ol#topicpath li {
display: inline;
}
ol#topicpath li a {
padding-right: 23px;
background: url(images/topic-arrow.gif) right center no-repeat;
}
[/css]
注意点

  1. contentの中にはだいたいの文字を入力可能
  2. ブロック要素にすることで文字の後を改行させる
  3. リストをインライン要素にして横並びにする。(float leftよりスマート)
  4. aタグの中に矢印画像とpadding-rightで画像の横幅スペースを空ける。
  5. a要素にだけ矢印画像を指定することによって、ePSXeの右側には自動で画像表示されなくなる。

beforeが肝心の部分で、そのタグが使われる最初の部分にコンテンツが挿入されます。beforeなのでリストの前に飛び出しちゃうかな?と思ったけど■現在地もちゃんとリストに収まってくれました。ちなみに、afterにすれば最後尾に文字を記入できます。

検索エンジンの多くはCSSを無視するので、ここに記入すれば人間にだけ文字を見せ、ロボットには認識させないなんていう裏技もできますが、ダメですよ。