パンくずリストの作り方

パンくずリストとはWebページがWebサイトのどの位置にあるのかを示すナビゲーションです。森の中で迷わないようにパンくずを少しずつ落としながら歩いたという童話の『ヘンゼルとグレーテル』から由来したといわれています。日本では「パンくずリスト」、英語では“breadcrumb”または、“breadcrumb　navigation”が一般的です。
通常は、ヘッダーかタイトル領域の下、記事本文が始まる前に配置します。Webページが階層的に深い場所にあるときに設置しておくとアクセシビリティが向上します。

作り方その１

HTMLで番号なしリスト(ol)を作成し、リスト項目(li)に戻るページのタイトルを列挙し、それぞれにジャンプ先をリンクを付けます。

CSSでli要素にdisplayプロパティの値として inline を指定して、ulのリスト項目を縦並びから横並びに変更しています。

HTMLソース

<ul>
<li><a href="../...">top頁</a> &gt;
<li><a href="../..">次の頁 </a>&gt;
<li>現在の頁
</ul>

ここで「"../.."」はリンク先のパスを省略した形です。「&gt;」は 「>」です。

CSS

ul li{
      display : inline;
}
ul li a{
      color : rgb(51, 51, 51);
      text-decoration : none;
}
ul li a:hover{
      color : rgb(242, 0, 242);
}

ポイントはli要素にdisplayプロパティの値として inline を使い、ulのリスト項目を縦並びから横並びに変更しています。その他は修飾部分で、「li a」で下線を消し、文字色を通常の色に戻しています。「ul li a:hover」でマウスがあたったときに文字色を変化させています。

作り方その２

HTMLは上記と同じで、CSSでli要素にfloat: left を指定して、ulのリスト項目を縦並びから横並びに変更しても同じ結果が得られます。

ul li{
      display : float: left;
}
ul li a{
      color : rgb(51, 51, 51);
      text-decoration : none;
}
ul li a:hover{
      color : rgb(242, 0, 242);
}

戻る