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

吉田先生

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

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

ナビゲーションバー

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

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

ナビゲーションバーのベース

まず、ナビゲーションのコードの一番外側。
<nav>タグに指定されているCSSクラスを見てみましょう。

Bootstrap公式ドキュメントからコピーしてきたテンプレートコードには、3つのクラスが指定されています。
それぞれ、以下のような役割があります。

ナビゲーションバーのベースとなるCSSを設定しているnavbarクラス、これは必須です。

そして、navbar-expand-lgクラスはナビゲーションバーのレスポンシブな動作を設定しています。

navbar-expandクラスにはメニューのli要素を並べて表示する（展開する）役割があります。
-で繋げてBoostrapのブレークポイント名をつけると「画面幅が〇〇px以上なら、メニューを並べて表示する」という指定ができます。
ブレークポイント名に関しては『Bootstrap5のグリッドを理解する』と同じです。

背景色を設定しているbg-から始まるクラスは、次のナビゲーションバーの配色の項目で詳しく紹介します。

brand

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

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

場合によっては、画像とテキストを両方並べたいこともあるでしょう。
その場合はimgタグにd-inline-blockとalign-text-topというクラスを設定します。どちらもBootstrapのクラスです。

そして、imgタグの後にテキストを書きます。

nav-item(メニュー項目)

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

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

dropdown

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

そして、<li>タグの中に<ul>～</ul>で囲ったリストをもう一つ入れ子にします。

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown
    </a>
    <ul class="dropdown-menu">
        <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="#"）はそのままにしておいてください。
別のページなどへ繋いでしまうとドロップダウンが開かなくなります。

次に、ドロップダウン内メニューの部分です。

<ul>タグにdropdown-menuクラスを指定することで、上のaタグがクリック/タップされた時に開くメニューと認識されます。

<li>タグにはdropdown-itemクラスを指定すると、ドロップダウンが開いたと時に表示される項目としてCSSが設定されます。
仕切りの部分は、必要なければ削除してください。

また、こちらもメニュー数に応じて「dropdown-item」クラスのリンクタグを増やしたり減らしたりしてください。

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

ナビゲーションバーの“色”を決めているCSSクラスについて見ていきましょう。

背景色

前回使用したナビゲーションのテンプレートコードには、navタグにbg-body-tertiaryクラスが設定されていました。

Bootstrapではbg-から始まるクラス名は、背景色（Background）の指定に使っています。
これは、ナビゲーションバーに限らず、どの要素に使っても機能します。

ですので、公式ドキュメントでは別のページで紹介されています。
Utilitiesグループにある「Background」のページで、背景色指定に使えるクラスの一覧が確認できます。

URL：https://getbootstrap.jp/docs/5.3/utilities/background/

こちらに掲載されているクラスをbg-body-tertiaryと入れ替えると、ナビゲーションバーの背景色をお好きに変えることが出来ます。

また、Bootstrapで用意されていない色を使いたい場合もありますよね。
その場合は、自分でCSSを書いて好きな色を設定することが出来ます。

上図イメージのようにstyle指定を追加すれば、どんな色に変更する事も出来ます。
もちろんオリジナルのcssクラスを作り、cssファイルで設定することも可能です。

ベースとなる配色

ナビゲーションバーの背景色を好きに設定する方法がわかりました。
ですが、濃い色・暗い色を設定すると、下図のようにメニューやボタンが見えにくいですよね。

手軽にナビゲーションの視認性を高められるよう、ナビゲーションバーでは大きく２種類の配色が用意されています。

Bootstrap公式ドキュメント、Navbarのページを確認できます。
右サイドバーのページ内メニュー（項目）に「配色」があるので、見てみましょう。

URL：https://getbootstrap.jp/docs/5.3/components/navbar/

<nav>タグにdata-bs-theme="dark"という属性を加えると、暗い背景色向けの配色に変わるということが説明されています。

背景色に応じて、メニューなどのテキストカラーなどが見えにくくならない方を選びましょう。

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

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

<nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">

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

<nav class="navbar navbar-expand-lg bg-dark fixed-top" data-bs-theme="dark">

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

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

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

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

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

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

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

• Bootstrapのbg-**クラスを使い、ナビゲーションバーの背景色を変更する（必要に応じ、配色も変更）
• ナビゲーションを画面上部の固定表示にする

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

【例】

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

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