【入門】Bootstrapの書き方　〜 パンくずリスト 〜

みなさんこんにちは、さくちゃんです。
本日は「パンくずリストの書き方」についてやっていきます。
今回学ぶ内容は、以下の3つです。

• 公式サイトの確認
• パンくずリストとは？
• 基本的な書き方

Bootstrapの書き方 〜パンくずリスト〜

公式サイトの確認

まずは、公式サイトを確認していきましょう。
公式サイトのタブの「Documentation」をクリックします。

次に左サイドバーの「Components」をクリックします。

そして「Components」の中の「Breadcrumb」をクリックすると参照できます。

パンくずリストとは？

パンくずリストとは何かと言うと、Webサイト内のどこにいるのかをわかりやすくするために、Webページを階層化して表示させるものです。
よく下のような図を見たことがあるかと思います。

Bootstrapでは、この「パンくずリスト」を簡単に書くことができます！
では実際に、書き方を見ていきましょう。

基本的な書き方

「パンくずリスト」の書き方は、下のように書いていきます。

<nav>
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
  </ol>
</nav>

では詳しく説明していきます。

breadcrumb

breadcrumbは、パンくずリストであることを認識させるための要素です。
<nav>タグにclass名で「breadcrumb」と指定してあげるだけで認識されます。

breadcrumb-item

breadcrumb-itemは、パンくずリストのリストを表示させるための要素です。
<li>タグにclass名で「breadcrumb-item」と指定してあげます。そしてリンクを挿入する<a href=” “>でリンク、表示名を指定します。

まとめ

パンくずリストはユーザーにとって現在の位置を把握するために必要になります。
最近のWebサイトには、必ずと言っていいぐらいパンくずリストが表示されています。
この機会に是非覚えておきましょう！

では本日は以上になります。