Webデザイン初心者でも簡単に使える！Bootstrap4基本の使い方【パンくずリスト編】

おはようございます！社員Aです👩

連載しております「Bootstrapシリーズ」ですが、第8回目になりました！

Bootstrap4基本の使い方シリーズ

複数記事に分けてWEB制作でよく使うBootstrapの機能や意外と知られていない便利な機能なども紹介していきますので、初めてBootstrapにチャレンジされる方も、既にBootstrapを使って開発をされている方にも読んでいただけると嬉しいです。

第8回目の今回は「パンくずリスト編」！Bootstrap4でパンくずリストを設定する方法を解説していきたいと思います。Webデザイン初心者の方でも簡単に使えるので、ぜひこの機会にBootstrap4の使いかたをマスターしてみませんか？

Bootstrap4 パンくずリスト

パンくずリストはいまユーザーがどのページに居るのかを視覚的にわかりやすくするためのものです。

また、パンくずリストを設置することにより、Googleなどの検索エンジンにもページの構成を理解してもらいやすくなります。

Bootstrap4では簡単にパンくずリストを設置することが出来ます。

基本のルールについて

• nav要素の中に、「.breadcrumb」のクラスを付与したolもしくはulを入れ込む
• ol・ulの中に、「.breadcrumb-item」のクラスを付与したliを入れ込む
• liに「.active」のクラスを付与すると、アンカーリンクが外れる

表示

ソース

<nav>
  <ul class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">ホーム</a></li>
    <li class="breadcrumb-item active">弊社について</li>
  </ul>
</nav>

li要素を増やしていくと、長いパンくずリストも簡単に作成できます！

パンくずリストのカラーを変更する

Bootstrapデフォルトのパンくずリストは背景色がグレーですが、こちらも簡単に変更ができます。

サイトの雰囲気に合わせて変更してみましょう。

表示

ソース

.breadcrumb{/* 背景色の変更 */
	background: #caedfd;
}
.breadcrumb a{/* 文字色 */
	color:#000;
}
.breadcrumb-item.active{/* アクティブ文字色の変更 */
	color:#fff;
}
.breadcrumb-item+.breadcrumb-item::before{/* 区切り線の文字色変更 */
	color:#000;
}

パンくずリストの区切り線を好きな記号に変更する

Bootstrapデフォルトのパンくずリストは区切り線がスラッシュになっていますが、こちらも簡単に変更ができます。

表示

ソース

.breadcrumb-item+.breadcrumb-item::before{/*区切り線の変更*/
	    content: ">";
}

contentの中に入れた文字（記号）が区切り線として表示されます。

まとめ

今回はパンくずリスト編ということで、カスタマイズも含めたパンくずリストの設定方法をご紹介しました。

クラス付与だけで、パンくずリストが作れるので特にSEOを重視している方には試していただきたいです！