Bootstrap ナビゲーションバー

この記事では、Bootstrap 5 でレスポンシブなナビゲーションバーを作成およびカスタマイズする方法について説明します。

1. ナビゲーションバー基礎 (Navbar basics)

基本的なナビゲーションバーを作成するには、以下の定義済み CSS クラスを使用します。

.navbar: ナビゲーションバーのコンテナ
.navbar-brand: ナビゲーションバーのブランド名またはロゴ
.navbar-nav: ナビゲーションリンクのコンテナ
.nav-link: ナビゲーションリンク

また、カラースキーム（.navbar-light、.navbar-dark）と背景カラースキーム（.bg-light、.bg-dark、.bg-primary など）を使用して、ナビゲーションバーの外観をカスタマイズすることもできます。

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">ブランド名</a>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">ホーム</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">リンク</a>
      </li>
    </ul>
  </div>
</nav>

2. ブランド (Brand)

.navbar-brand クラスを使用して、ナビゲーションバーのブランド名またはロゴをカスタマイズできます。ブランドに画像を追加するには、<img> タグを使用します。

<a class="navbar-brand" href="#">
  <img src="logo.webp" alt="ロゴ" width="30" height="24">
</a>

3. リンク (Links)

.nav-link クラスを使用してナビゲーションリンクを作成します。.active クラスを使用して現在のページを示し、.disabled クラスを使用してリンクを無効にします。

<a class="nav-link active" aria-current="page" href="#">アクティブ</a>
<a class="nav-link" href="#">リンク</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">無効</a>

4. フォーム (Forms)

.form-inline クラスを使用して、ナビゲーションバーに検索ボックスなどのフォーム要素を追加できます。

<form class="d-flex">
  <input class="form-control me-2" type="search" placeholder="検索" aria-label="検索">
  <button class="btn btn-outline-success" type="submit">検索</button>
</form>

5. テキスト (Text)

.navbar-text クラスを使用して、ナビゲーションバーにプレーンテキストコンテンツを追加できます。

<span class="navbar-text">
  ナビゲーションバーのテキスト
</span>

6. カラースキーム (Color schemes)

カラースキーム（.navbar-light、.navbar-dark）と背景カラースキーム（.bg-light、.bg-dark、.bg-primary など）を使用して、ナビゲーションバーの外観をカスタマイズできます。詳細については、Bootstrap ドキュメントを参照してください。

7. コンテナ (Containers)

.container および .container-fluid クラスを使用して、ナビゲーションバーの幅を制御できます。詳細については、Bootstrap ドキュメントを参照してください。

8. 配置 (Placement)

.fixed-top、.fixed-bottom、および .sticky-top クラスを使用して、ビューポート内のナビゲーションバーの位置を制御できます。詳細については、Bootstrap ドキュメントを参照してください。

9. レスポンシブ動作 (Responsive behaviors)

.navbar-toggler、.navbar-collapse、および .navbar-expand-* クラスを使用して、小さなデバイスで折り畳むレスポンシブなナビゲーションバーを作成できます。詳細については、Bootstrap ドキュメントを参照してください。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">ブランド名</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーションの切替">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">ホーム</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">リンク</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

10. JavaScript の動作 (JavaScript behavior)

.collapse クラスと data-bs-toggle="collapse"、data-bs-target="#navbarNav" 属性は、ナビゲーションバーの折りたたみ動作を制御するために使用されます。詳細については、Bootstrap ドキュメントを参照してください。

11. アクセシビリティ (Accessibility)

スクリーンリーダーのユーザー向けに、ナビゲーションバーをアクセス可能にするための考慮事項がいくつかあります。詳細については、Bootstrap ドキュメントを参照してください。

よくある質問

ナビゲーションバーの色を変更するにはどうすればよいですか？

カラースキームクラス（.navbar-light または .navbar-dark）と背景ユーティリティクラス（.bg-*）を使用します。詳細については、Bootstrap ドキュメントを参照してください。
ナビゲーションバーをページの上部に固定するにはどうすればよいですか？

.fixed-top クラスをナビゲーションバーに追加します。詳細については、Bootstrap ドキュメントを参照してください。
ナビゲーションバーにドロップダウンメニューを追加するにはどうすればよいですか？

ドロップダウンメニューを作成するには、ドロップダウンコンポーネントを使用します。詳細については、Bootstrap ドキュメントを参照してください。