Bootstrapのナビゲーションバーを作ってみよう

Contents

完成イメージ

左に「MySite」などのロゴ
右に3つのメニュー（例：ホーム / サービス / お問い合わせ）
スマホではハンバーガーボタンで開閉

作成ファイル・保存場所

bootstrap フォルダに以下のファイルを作成してください。

ファイル名	内容
bootstrap04.html	ハンバーガーメニュー付きナビバー練習用ファイル
※CSSファイル不要	BootstrapはCDNで読み込みます

※CSSのCDNの他に、ハンバーガーメニューを動かすための BootstrapのJavaScript CDN を</body>の直前に貼り付けてください。Bootstrap公式>>https://getbootstrap.jp/

htmlは下記をコピーして使います。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap ナビゲーションバー</title>
    <!-- Bootstrap CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>








    <!-- BootstrapのJavaScript（ハンバーガーメニューに必要） -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

目的

Bootstrapの .navbar コンポーネントを使って 上部にナビゲーションバーを設置する
.navbar-toggler を使って スマホではハンバーガーメニューに変化する仕組みを理解する
.collapse と data-bs-toggle を組み合わせて、クリックでメニュー表示を切り替える機能を作る

チェックポイント

.navbar navbar-expand-md を使っているか（768px以上で展開）
.navbar-brand でロゴやサイト名が表示されているか
.navbar-toggler ボタンが正しく配置されているか
.collapse クラスで折りたたみメニューが制御されているか

`.navbar-toggler` とは？

.navbar-toggler は、スマホ画面などでメニューを開く「ハンバーガーアイコンのボタン」を表示するためのクラスです。

このボタンは次のように記述します

<button class="navbar-toggler" type="button"
        data-bs-toggle="collapse"
        data-bs-target="#mainNav"
        aria-controls="mainNav"
        aria-expanded="false"
        aria-label="メニュー切り替え">
  <span class="navbar-toggler-icon"></span>
</button>

ボタンの中にある <span class="navbar-toggler-icon"> がハンバーガーの見た目です！

`.collapse` とは？

.collapse は、表示／非表示を切り替えられるようにするためのクラスです。
.navbar-collapse と一緒に使うことで、ナビゲーションメニューが折りたたまれて表示されます。

<div class="collapse navbar-collapse" id="mainNav">
  <!-- ナビリンクが入ります -->
</div>

.collapse → 初期状態は非表示（スマホなどで）
.collapse.show → 開いた状態（JavaScriptが自動で付け外しします）

作業ステップ

bootstrap04.html というファイルを新規作成します。
<header> の中に .navbar を作成し、以下の構成を作りましょう：
- サイト名またはロゴ（.navbar-brand）
- メニューリンク（<ul class="navbar-nav"> の中に <li><a> を複数）
- ハンバーガーメニュー用の .navbar-toggler と .collapse
メニューを右寄せにしたい場合は、.ms-auto をメニューの親要素に付けてください。
動作確認：
- PC表示：メニューが常に表示される
- スマホ表示：ハンバーガーアイコンをタップするとメニューが開く

Bootstrapトレーニング

実際に、以下のコードを CDNリンク部分以外は自分で入力してみましょう！手を動かすことで、コードの流れやクラスの使い方がしっかり身につきます。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap ナビゲーションバー</title>
    <!-- Bootstrap CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <header>
        <nav class="navbar navbar-expand-md navbar-light bg-light px-3">
            <a class="navbar-brand" href="#">MySite</a>

            <!-- ハンバーガーボタン -->
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav"
                aria-controls="mainNav" aria-expanded="false" aria-label="ナビゲーションの切り替え">
                <span class="navbar-toggler-icon"></span>
            </button>

            <!-- ナビゲーションメニュー -->
            <div class="collapse navbar-collapse" id="mainNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">ホーム</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">サービス</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">お問い合わせ</a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>

    <main class="container my-5">
        <h1>ナビバーのデモページ</h1>
        <p>画面サイズを変えて、ナビゲーションバーの動きを確認してみましょう。</p>
    </main>

    <!-- BootstrapのJavaScript（ハンバーガーメニューに必要） -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

応用ポイント

.navbar-dark, .bg-dark, .fixed-top などでデザインや位置を変更してみよう
メニューを中央揃えにしたり、.dropdown で階層付きメニューを試すのもおすすめ！