breadcrumbs list(パンくずリスト)ナビゲーション

breadcrumbs list(パンくずリスト)とは、そのページの位置がホームページの中で どの階層にあるかを示したナビゲーションです。

当ページの場合、「Home > HTML & CSS > breadcrumbs list」 のように画面左上に現されています。

breadcrumbs listの由来は、童話「ヘンゼルとグレーテル」で、森の中で迷わないようにパンくずを 少しずつ落としながら歩いたという事だそうです。

breadcrumbs list(パンくずリスト)のほかに、topic path(トピックパス)とも言われます。

HTMLの例:

<div id="breadcrumbs">
<ol>
    <li><a href="https://www.bnote.net/">Home</a></li>
    <li><a href="../html_idx.html">HTML & CSS</a></li>
    <li>breadcrumbs list(パンくずリスト)
</ol>
</div>

CSSの例:

#breadcrumbs li{
    display:inline;
}
#breadcrumbs a{
    padding-right: 14px;
    background: url('breadcrumbs.png') center right no-repeat;
}

背景画像で各階層の区切り 「>」を表示しています。