Bootstrap - パンくずリスト：初めてのガイド
こんにちは、Web開発者の卵さんたち！今日は、Bootstrapのパンくずリストについて深く掘り下げます。パンくずリストがどういうものか知らない方も安心してください - このチュートリアルが終わる頃には、プロのように作成できるようになるでしょう！一緒にこのエキサイティングな旅に出発しましょう。
パンくずリストとは？
コードに入る前に、パンくずリストとは何かを理解しましょう。広大な森（インターネットは時々そんな感じがします）を探索していると、パンくずの道筋があって助かると思いませんか？それ exactにパンくずリストがWebデザインでやることです！
パンくずリストは、ユーザーに現在のページがウェブサイトの階層構造のどこにあるかを示すナビゲーションアシストです。通常、ページの上部にリンクの行として表示され、ユーザーが簡単に上位ページに戻れるようにします。
Bootstrapのパンくずリストを使う理由
Bootstrap、私たちの近所のCSSフレームワークは、パンくずリストの作成を簡単にします。既にスタイルが付いたコンポーネントを提供して、私たちがウェブページに簡単に実装できるようにしています。ですので、新しいものを考え直す必要はなく、Bootstrapの準備好的なパンくずリストを使って、好みに合わせてカスタマイズできます！
では、袖をまくってコードを書きましょう！
基本的なパンくずリスト
ステップ1: Bootstrapを設定する
まず第一に、HTMLファイルにBootstrapを含める必要があります。HTMLの<head>セクションに以下の行を追加してください：
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>これにより、BootstrapのCSSとJavaScriptファイルがドキュメントにリンクされます。
ステップ2: 基本的なパンくずリストを作成する
それでは、初めてのパンくずリストを作成しましょう！以下は基本的な構造です：
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">ホーム</a></li>
<li class="breadcrumb-item"><a href="#">ライブラリ</a></li>
<li class="breadcrumb-item active" aria-current="page">データ</li>
</ol>
</nav>これを分解すると：
- パンくずリストを
<nav>要素でラップし、aria-label="breadcrumb"を設定します。これにより、スクリーンリーダーのアクセシビリティが向上します。 -
<ol>要素とクラスbreadcrumbを使ってパンくずコンテナを作成します。 - 各
<li>要素はパンくずの階層構造のレベルを表します。 -
breadcrumb-itemクラスで各アイテムをスタイルします。 - 最後のアイテムには
activeクラスとaria-current="page"が設定され、現在のページを示します。
ブラウザでこれを見ると、整然としたパンくずの道筋が表示されます：ホーム > ライブラリ > データ
ステップ3: リンクを追加する
パンくずリストを機能的にするために、適切なリンクを追加する必要があります。コードを修正してみましょう：
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">ホーム</a></li>
<li class="breadcrumb-item"><a href="library.html">ライブラリ</a></li>
<li class="breadcrumb-item active" aria-current="page">データ</li>
</ol>
</nav>これにより、「ホーム」をクリックするとindex.htmlに、「ライブラリ」をクリックするとlibrary.htmlに移動します。現在のページ（「データ」）にはリンクはありません。
ディバイダー
デフォルトでは、Bootstrapはディバイダーとしてフォワードスラッシュ（/）を使用しています。でも、もしあなたがもっと創造的になりたい場合はどうでしょうか？ディバイダーのカスタマイズ方法を見てみましょう！
CSSを使ったカスタムディバイダー
ディバイダーをCSSで変更できます。以下のようにします：
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">ホーム</a></li>
<li class="breadcrumb-item"><a href="#">ライブラリ</a></li>
<li class="breadcrumb-item active" aria-current="page">データ</li>
</ol>
</nav>この例では、--bs-breadcrumb-divider CSS変数を使ってディバイダーを">"記号に変更しています。
アイコンを使ったディバイダー
もっと派手にしたい場合は、アイコンをディバイダーとして使ってみましょう！この例ではFont Awesomeアイコンを使います：
<!-- Font AwesomeをHTMLのheadにインクルード -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<!-- パンくずリストのHTML -->
<nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">ホーム</a></li>
<li class="breadcrumb-item">
<i class="fas fa-chevron-right"></i>
<a href="#">ライブラリ</a>
</li>
<li class="breadcrumb-item active" aria-current="page">
<i class="fas fa-chevron-right"></i>
データ
</li>
</ol>
</nav>ここでは、--bs-breadcrumb-dividerを空文字列に設定し、Font Awesomeの矢印アイコンをパンくずのアイテム間に手動で追加しています。
パンくずリストのベストプラクティス
パンくずリストを作成し、カスタマイズする方法を学んだので、いくつかのベストプラクティスについて話しましょう：
- シンプルに保つ：パンくずリストにすべてのページを含めることは避けて、主要なカテゴリに限定します。
- 明確なラベルを使用：パンくずのラベルは簡潔で説明的なものにします。
- 単一レベルのウェブサイトでは使用しない：パンくずリストは明確な階層構造を持つサイトに最も役立ちます。
- 上部に配置する：パンくずリストは通常、ページの上部、メインナビゲーションの下に配置されます。
結論
おめでとうございます！Bootstrapのパンくずリストの作成とカスタマイズを学びました。基本的な実装から派手なディバイダーまで、ユーザーがあなたのウェブサイトを簡単にナビゲートできるようにするためのスキルを身につけました。
パンくずリストは、デジタルの森の中での道標です。ユーザーに現在位置を理解させ、どのように戻るかを示すものです。賢く使えば、ユーザーはあなたのサイトを楽しく探索できるようになります！
練習を続け、探索を続け、そして最も重要な的是、Web開発を楽しみましょう。次回まで、ハッピーコーディング！
Credits: Image by storyset