Bootstrapのナビゲーションを理解する【図解たっぷりBootstrap入門】

現行最新版（Bootstrap 5）講座をリリースしました

→Bootstrap 5講座のご受講はこちら

吉田先生

Bootstrapを使えば、ナビゲーションバーやドロップダウンリストなども簡単に組み込むことができます。

• ナビゲーションバー
• brand
• メニュー
• dropdown
• ナビゲーションバーの配色
• 背景色変更
• ナビゲーションの表示位置

◎ナビゲーションバー

前回、Bootstrapのナビゲーションバーを初めて使ってみました。しかし、テンプレートをコピペしただけでしたね。今回は、ナビゲーションバーの具体的な使い方について学んでいきましょう。では、前回使用したテンプレートのコードの解説から行っていきます。

brand

まず、上記コードを見てみましょう。この「navbar-brand」というクラスは、ロゴやサイト名などの部分を書くときに使用します。文字のみでサイト名を入れるのであれば、「Navbar」というテキスト部分を書き換えればOKです。画像を使いたい場合は、「Navbar」というテキスト部分に「img」タグを書きます。

画像＋テキストの場合は「img」クラスに以下CSSクラスを設定し「img」タグの後にテキストを書きます。

・メニュー

ナビゲーションバーに設置したいメニューは、以下部分に入れていくことになります。以下コードが、メニュー１つ分のコードです。基本的には、メニューの数だけ以下部分を増やしたり減らしたりします。「＃」の部分には遷移先URLを入れ、テキスト部分にメニュー名を入れます。

・dropdown

次に、ドロップダウン部分を見ていきます。まずドロップダウンを使いたい場合は、

 タグの「nav-item」クラスと合わせて「dropdown」クラスも記述します（以下ハイライト部分）。

<li class="nav-item dropdown">
     <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown
     </a>
     <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
     </div>
</li>

そして、ドロップダウンメニューを作る時に知っておかなければいけない部分を見ていきましょう。まず、常に表示される部分のメニュー名です。以下リンクタグ内に記述します。このリンクタグの、遷移先URLはそのままにしておいてください。ドロップダウンが開かなくなります。

次に、ドロップダウン内メニューの部分です。仕切りの部分は、必要なければ削除してください。また、こちらもメニュー数に応じて「dropdown-item」クラスのリンクタグを増やしたり減らしたりしてください。

◎ナビゲーションバーの配色

ナビゲーションバーのテンプレートの１行目を見てください。このコードのCSSクラスで「navbar-light」もしくは「navbar-dark」という部分があります。これは、ナビゲーションバーテンプレートの種類を指定している部分です。ナビゲーションバーテンプレートには２種類あり、ナビゲーションバーの背景色の明度によって使い分ける必要があります。これは、メニューなどのテキストカラーなどが背景色によっては見えにくくなるなどの影響がある為です。

この背景色ですが、Bootstrapで用意されている他の配色や、任意の配色に変更する事が出来ます。ですので、背景色に合ったナビゲーションバーテンプレートを使用しましょう。

・背景色変更

まず、Bootstrapで用意されている配色を見ていきます。以下カラーは一部で、Bootstrap公式サイトの「Utilities」という項目内「Colors」に全色一覧があります。

このように、Bootstrapで用意された配色を使う場合はテンプレートのコードの一部を変更するだけでOKです。では、任意の色に変えたい場合についてです。この場合は、テンプレートにコードを追加する必要があります。以下イメージを見てみてください。コードを追加する事で、どんな色に変更する事も出来るようになります。

◎ナビゲーションの表示位置

ナビゲーションは、以下イメージ上のように何も指定しなければサイト内最上部に固定されます。つまり、スクロールしてサイトの下の方に行くとナビゲーションは見えなくなるという事です。

画面の最上部に固定したい場合は「fixed-top」というCSSクラスを使用します。このクラスを使用すると、スクロールしていっても常に画面上部にナビゲーションが表示されるようになります。