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

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

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

吉田先生

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


◎ナビゲーションバー

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

brand

 

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

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

 

・メニュー

ナビゲーションバーに設置したいメニューは、以下部分に入れていくことになります。以下コードが、メニュー1つ分のコードです。基本的には、メニューの数だけ以下部分を増やしたり減らしたりします。「#」の部分には遷移先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」クラスのリンクタグを増やしたり減らしたりしてください。

 

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

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

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

・背景色変更

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

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

 

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

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

 

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

無料ビデオ講座のお知らせ

Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。

無料講座一覧を見る

×