Bootstrap ナビゲーションバー完全入門！.navbar-expand の選び方を初心者向けにやさしく解説

展開幅の設計：.navbar-expand（-sm/-md/-lg/-xl/-xxl）の選び方

先生と生徒の会話形式で理解しよう

生徒

「Bootstrapのナビゲーションバーって、画面の大きさで形が変わりますよね？どうやって決めているんですか？」

先生

「それは .navbar-expand という仕組みを使って、どの画面幅で横並びにするかを決めているんだよ。」

生徒

「-sm とか -md とかありますけど、正直よく分かりません……」

先生

「大丈夫。パソコンを触ったことがない人でも分かるように、画面サイズの考え方から順番に説明するね。」

1. Bootstrapのナビゲーションバーとは？

Bootstrapのナビゲーションバー（Navbar）とは、Webページの上部によく表示されるメニュー部分のことです。ホーム、サービス、問い合わせなどのリンクをまとめて表示するために使われます。

初心者向けに例えると、ナビゲーションバーは「お店の入口にある案内板」のような存在です。どこに何があるのかを、訪れた人に分かりやすく伝える役割があります。

Bootstrapでは、このナビゲーションバーをとても簡単に作ることができ、画面サイズに応じて自動で見た目を変えることもできます。

2. 画面サイズとレスポンシブデザインの基本

レスポンシブデザインとは、スマートフォン・タブレット・パソコンなど、画面の大きさに合わせて表示を変える考え方です。

Bootstrapでは、画面の幅をいくつかの段階に分けて考えます。これを「ブレークポイント」と呼びます。難しく聞こえますが、「この幅を超えたら見た目を変える境界線」くらいの理解で大丈夫です。

ナビゲーションバーでは、この画面幅を使って「横並びにするか」「ボタンでまとめるか」を決めています。

3. .navbar-expand の役割を理解しよう

.navbar-expand は、ナビゲーションバーが横並びに展開される画面幅を指定するためのクラスです。

何も指定しない場合、ナビゲーションバーは常に折りたたまれた状態になります。つまり、メニューがハンバーガーボタンの中に隠れたままです。

.navbar-expand を付けることで、「この画面サイズ以上なら横並びにする」という指定ができます。


<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a class="navbar-brand" href="#">サイト名</a>
</nav>

ブラウザ表示

この例では、画面幅が md サイズ以上になると、メニューが横に並びます。

4. -sm / -md / -lg / -xl / -xxl の違い

Bootstrap5では、画面サイズを段階的に分けるために、-sm や -md などの名前を使います。

これは服のサイズ表記と似ています。sm は小さめ、md は普通、lg は大きめ、という感覚で覚えると分かりやすいです。


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

ブラウザ表示

-sm はスマートフォンでも横並びになりやすく、-lg はパソコン画面になってから横並びになります。

5. 初心者におすすめの選び方

初心者には .navbar-expand-md を使うケースがとても多いです。理由は、スマートフォンでは折りたたみ、パソコンでは横並び、という自然な動きになるからです。

スマートフォンの小さい画面では、横並びのメニューは見づらくなりがちです。そのため、ボタンでまとめて表示する方が親切です。

まずは md を基準にして、実際に画面を縮めたり広げたりしながら確認するのがおすすめです。

6. 実際のナビゲーションバー例で確認

ここでは、初心者向けのシンプルなナビゲーションバーを例にします。


<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="#">MySite</a>
        <button class="navbar-toggler" type="button">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-nav">
            <a class="nav-link" href="#">ホーム</a>
            <a class="nav-link" href="#">サービス</a>
            <a class="nav-link" href="#">お問い合わせ</a>
        </div>
    </div>
</nav>

ブラウザ表示

このナビゲーションバーは、スマートフォンではメニューが折りたたまれ、画面が広くなると横並びになります。