ナビゲーションバー
前回、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です。