Bootstrap 面包屑ナビゲーション

パンくずリストは、Webサイトの階層構造における現在のページの位置を示す、補助的なナビゲーションシステムです。この記事では、Bootstrap でパンくずリストを実装する方法について詳しく説明します。

1. パンくずリストの作成方法

Bootstrap でパンくずリストを作成するには、以下の手順に従います。

  1. <ul> 要素に .breadcrumb クラスを追加します。
  2. 各リストアイテム (<li>) に .breadcrumb-item クラスを追加します。
  3. オプション：現在のページを示すために、最後のリストアイテムに .active クラスを追加します。

2. リンク

デフォルトでは、すべてのパンくずアイテムはリンクとして扱われます。

  • <a> タグまたはその他のクリック可能な要素を使用して、リンクを作成できます。
  • 最後のパンくずアイテムは、現在のページを表すため、通常はリンクを含めるべきではありません。

3. 区切り文字

パンくずリストは、デフォルトで '/' を区切り文字として使用します。

CSS の ::before 擬似要素を使用して、区切り文字をカスタマイズできます。

4. サンプルコード

以下は、パンくずリストを作成するための基本的な HTML コード例です。


<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

5. アクセシビリティ

パンくずリストは、スクリーンリーダーのユーザーにとって重要です。

現在のページをマークするために、aria-current="page" 属性を使用することをお勧めします。

6. Sass

パンくずリストのスタイルをカスタマイズするための Sass 変数と mixin が用意されています。

変数 説明
$breadcrumb-padding-y 垂直方向のパディング
$breadcrumb-padding-x 水平方向のパディング
$breadcrumb-margin-bottom 下マージン
$breadcrumb-divider 区切り文字
$breadcrumb-active-color アクティブなアイテムの色

7. その他

Bootstrap には、ナビゲーションバーやページネーションなど、パンくずリストに関連するコンポーネントやプラグインが用意されています。

Q&A

Q1: パンくずリストの項目の数を制限する必要がありますか？

A1: パンくずリストは、ユーザーがWebサイトの構造を理解し、簡単にナビゲートできるようにすることを目的としています。項目が多すぎると、逆効果になる可能性があります。目安として、パンくずリストの項目は3〜5個に抑えることをお勧めします。ただし、Webサイトの構造によっては、これより多くても問題ない場合があります。

Q2: パンくずリストを動的に生成するにはどうすればよいですか？

A2: サーバーサイドのプログラミング言語やJavaScriptを使用して、現在のページのURLに基づいてパンくずリストを動的に生成できます。たとえば、URLが "/products/category/item" の場合、"Home"、"Products"、"Category"、"Item" の4つのパンくずアイテムを生成できます。

Q3: パンくずリストのスタイルをカスタマイズするにはどうすればよいですか？

A3: BootstrapのSass変数を使用するか、独自のCSSルールを記述することで、パンくずリストのスタイルをカスタマイズできます。たとえば、区切り文字を変更したり、背景色やフォントサイズを変更したりできます。