パンくずリスト(ナビゲーション)を作る

パンくずリストを作るにはリストを使う

HTMLでの記述でのポイント

• olを使う

CSSでの記述でのポイント

• インラインボックスにする：横並びになる
• 各要素の後ろに”»”をつける：階層になる
• 最後の要素だけ"»"はつけない

"»"は好きなものに変えられる

.breadcrumb ol {
    /* デフォルトCSSの解除 */
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.breadcrumb li {
    /* liはブロックボックスのため */
    display: inline;
}
.breadcrumb li::after {
    /* 各項目の後ろに"»"をつける */
    content: "»";
}
.breadcrumb li:last-child::after {
    /* 最後の項目には"»"をつけない */
    content: none;
}

---

これだけで、パンくずリストが作れちゃうのすごい...

一つ一つを理解できればそこまで難しくないんだね！！

See the Pen yKMXVe by tamago (@tamago324) on CodePen.

こちらサイトでも同じようなCSSで実装しているから、このCSSでの実装が一般的なのかも？HTMLでの書き方に関しては、olではなくulで作ってるのが少し気になった。サンプルではulだったけど、実際のソースを見てみたらolになっていた！！

参考文献

• パンくずリストとは？作り方とCSSデザインサンプル12選

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)