【HTML&CSS】パンくずリストを実装する簡単な方法

こんにちは、フロントエンドエンジニアのまさにょんです。

今回は、パンくずリストを実装する簡単な方法について解説します。

1 パンくずリストとは？
2 パンくずリストの実装SampleCodeとHTML実行イメージ
3 おすすめ書籍(HTML&CSS編)
4 Twitterやってます！Follow Me！
5 参考・引用
6 最近の投稿

パンくずリストとは？

パンくずリストとは、Webサイトを閲覧しているユーザーが、現時点でWebサイト上のどの位置にいるかをわかりやすく示すテキストリンクのことです。

用語の由来は、『ヘンゼルとグレーテル』で道に迷わないようにパンくずを落としながら歩いたように、

辿ってきた経路が一目でわかるようになっているのが特徴です。

Webサイト上でよく見るのは、次のような「 > 」区切りのものだと思います。

英語だと、ブレッドクラムとか、トピックパスと呼ばれているらしいです。

用語の由来は、童話「ヘンゼルとグレーテル」で、
森の中で迷わないようにパンくずを落としながら歩き、帰り道がわかるようにしたという物語である。
他に、「ブレッドクラム」「トピックパス」とも呼ばれる。
引用元: パンくずリストとは｜用語集 – アイレップ

パンくずリストの実装SampleCodeとHTML実行イメージ

パンくずリストのSampleCodeを実行すると次のような「 > 」区切りのパンくずリストが生成されます。

ポイントは、疑似要素「 ::before 」の「 > 」指定の際に「 ~ 」を使っている点です。

「~」で区切ると同階層の後につづく要素に指定したStyleが適用されるので、今回は「li ~ li」にすることで、最初の「li」以降のすべての「li」の前に擬似要素「 > 」が作成されます。

<style>

ul.breadcrumb {
    padding: 10px 16px;
    list-style: none;
    background-color: #eee;
}

ul.breadcrumb li {
    display: inline;
    font-size: 18px;
}

/* 疑似要素 */
ul.breadcrumb li~li::before {
    padding: 8px;
    color: black;
    content: ">";
}

ul.breadcrumb li a {
    color: #0275d8;
    text-decoration: none;
}

/* 疑似クラス */
ul.breadcrumb li a:hover {
    color: #01447e;
    text-decoration: underline;
}

</style>

<h1>パンくずリストのSample</h1>

<ul class="breadcrumb">
    <li><a href="#gunma">グンマー帝国</a></li>
    <li><a href="#capital">首都</a></li>
    <li><a href="#maebasi">前橋市</a></li>
    <li><a href="#gunmachan">ぐんまちゃんの家</a></li>
</ul>