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

Bootstrap

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

2019年08月29日 8:00 2019年09月06日

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」のクラスを付与すると、アンカーリンクが外れる

 

表示

 

ソース

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

 



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

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

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

 

表示

 

ソース

 

反映されない時は…もし、CSSが適用されない場合はBootstrapのCSSを直接編集していただくか、CSSの読み込む順位(bootstrap.css → style.css)を変更すると反映されるかと思います。

どうしても反映されない場合は、「!important」をつけて強制的に変更する方法もあります。

 

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

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

 

表示

 

ソース

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

 

まとめ

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

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

 

関連記事

この記事を書いた人

社員A

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。ブログの執筆を通じて、やっと日本語Lv.20くらいになれた気がします。 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物が好きな皆さん、小動物トークしましょう!