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

吉田先生

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

• ナビゲーションバー
• ナビゲーションバーの配色
• ナビゲーションの表示位置
• 【実習】ナビゲーションの色変更＆固定

ナビゲーションバー

前回、Bootstrapのナビゲーションバーを初めて使ってみました。

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

brand

まず、下のコードを見てください。

この「navbar-brand」というクラスは、ロゴやサイト名などの部分を書くときに使用します。

文字のみでサイト名を入れるのであれば「Navbar」というテキスト部分を書き換えればOKです。
画像を使いたい場合は「Navbar」というテキスト部分を「img」タグに置き換えてください。

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

nav-item(メニュー項目)

ナビゲーションバーに設置したいメニューは、<ul class="navbar-nav">内に入れていくことになります。

以下コードが、メニュー１つ分のコードです。
基本的にはメニューの数だけ<li>タグ部分を増やしたり減らしたりします。
「＃」の部分には遷移先URLを入れ、テキスト部分にメニュー名を入れます。

dropdown

次に、ドロップダウン部分を見ていきましょう。
ドロップダウンを使いたい場合は、<li>タグの「nav-item」クラスと合わせて「dropdown」というクラスも記述します。

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

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

常に表示されるメニュー名部分の、リンクタグ内にある遷移先URL（href="#"）はそのままにしておいてください。
別のページなどへ繋いでしまうとドロップダウンが開かなくなります。

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

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

ナビゲーションバーのテンプレートの１行目を見てください。
CSSクラスで「navbar-light」もしくは「navbar-dark」という部分があります。
これは、ナビゲーションバーテンプレートの種類を指定している部分です。

ナビゲーションバーテンプレートには２種類あり、ナビゲーションバーの背景色の明度によって使い分ける必要があります。
背景色に応じて、メニューなどのテキストカラーなどが見えにくくならない方を選びましょう。

ナビゲーションの背景色はBootstrapで用意されているクラスを使用したり、オリジナルCSSを設定して任意の配色に変更する事も出来ます。

ナビゲーション背景色の変更

Bootstrapで用意されている配色を見てみましょう。
Bootstrap公式サイトのUtilities > Backgroundで使用できるカラーとクラスが確認できます。

ナビゲーションの背景色に適用すると、以下の例のようになります。
Bootstrapで用意された配色を使う場合はテンプレートのコードの一部を変更するだけでOKです。

Bootstrapで用意されていない色を使いたい場合は、テンプレートにコードを追加する必要があります。
下図イメージのようにstyle指定を追加すれば、どんな色に変更する事も出来ますよ。

もちろんオリジナルのcssクラスを作り、cssファイルで設定することも可能です。

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

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

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

fixed-top クラス使用時の注意点

ナビゲーションに「fixed-top」クラスを追加すると、その下にあるコンテンツが覆い隠されます。
例えば、前回のビッグイメージ画像だと、画像の高さが短くなったように見えるはずです。

これは「fixed-top」クラスを追加するとナビゲーションが浮かんだような状態になるため。
ナビゲーションと、画像上部とが、重なって表示されている形になっています。

人の写真を使っているなど「ナビゲーションと画像が被ってしまうのが嫌」という場合には、ナビゲーションの高さと同じだけmargin-topを加えることで被らないように調整できます。

どのくらいのmargin-topを加えれば良いかは、検証ツールで確認して下さい。
下図ではオレンジ色の部分が追加したmargin部分です。

【実習】ナビゲーションの色変更＆固定

前回作成したlayout.htmlを使って、ナビゲーションを変更してみましょう。
変更箇所は、以下２つです。

• ナビゲーションの配色を変更する（背景色はBootstrapのbg-**クラスを使う）
• ナビゲーションを画面上部の固定表示にする

ナビゲーション下の画像は、被ってしまっても害のないものです。
実習ではmargin-topを加える必要はありません。クラスの変更だけ行ってみてください。

【例】

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

このように、ページをスクロールダウンしてもナビゲーションがずっと見えていればOKです。