Bootstrap実践編 - ヘッダーメニューの追加

お疲れ様です。
ライフマップ開発チームの大城です。

本日は、Bootstrapを使って簡単なヘッダーメニューをWebサイトに追加しようと思います。
Bootstrap導入編はこちらをご覧ください！
https://tech-lifemap.blogspot.com/2022/04/bootstrap.html

# Webサイト作成

ヘッダーメニュー

早速サイトの上部にメニューを追加していきましょう。
ドキュメントだとこの部分です。

こんな感じでコードを追加しましょう。

  <header>
      <nav class="navbar navbar-light bg-light">
        <div class="container-fluid">
          <h1 class="navbar-brand mb-0">Navbar</h1>
        </div>
      </nav>
    </header>

クラスの説明

• navbar: ナビゲーションバー用装飾適応
• navbar-light: メニューの文字色の指定。背景色に合わせてlightかdarkを選びます。
• bg-light: 背景色の指定。今回は薄い灰色。
• container-fluid: レイアウトの指定。横幅いっぱいに要素を表示します。
• navbar-brand: ロゴやサイト名に使用します。文字色の指定だけみたい...？

ヘッダーメニューが追加されましたね。

次は適当なメニュー項目を追加しましょう。
以下のコードを追加してください。

    <nav class="navbar navbar-expand-lg navbar-light bg-light">

クラスの説明

• navbar-expand-lg: レスポンシブ設定。ブラウザのサイズによってメニューの表示を切り替えます。

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <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" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
              </li>
            </ul>
          </div>

クラスの説明

• navbar-toggler: メニュー開閉ボタンの装飾
• navbar-toggler-icon: メニュー開閉ボタンのアイコン
• collapse: コラプス機能を使う場合設定します。
• navbar-collapse: メニュー開閉エリアの装飾
• navbar-nav: メニューの装飾
• nav-link: メニューの装飾
• active: nav-linkに付ける事でメニューを強調します。
• disabled: nav-linkに付ける事でメニューを非活性化します。

属性の説明

• data-bs-toggle="collapse": このボタンはコラプス機能のトグルです、と指定する
• data-bs-target="#navbarNav": コラプスする対象は〇〇(id)です、と指定する

これでメニュー項目が追加されたと思います！

コラプス機能が使われているので、幅が狭くなるとメニューも開閉式に変わるかと。
簡単にレスポンシブ対応できて便利ですよね〜

今回はここまでとします！

それではまた次回〜
大城でした。