吉田先生
Bootstrapを使えば、ナビゲーションバーやドロップダウンリストなども簡単に組み込むことができます。
前回、Bootstrapのナビゲーションバーを初めて使ってみました。
今回は、ナビゲーションバーの具体的な使い方について学んでいきましょう。
前回使用したテンプレートのコードの解説から行っていきます。
まず、下のコードを見てください。
この「navbar-brand」というクラスは、ロゴやサイト名などの部分を書くときに使用します。
文字のみでサイト名を入れるのであれば「Navbar」というテキスト部分を書き換えればOKです。
画像を使いたい場合は「Navbar」というテキスト部分を「img」タグに置き換えてください。
画像+テキストの場合は「img」クラスに以下CSSクラスを設定。
「img」タグの後にテキストを書きます。
ナビゲーションバーに設置したいメニューは、<ul class="navbar-nav">内に入れていくことになります。
以下コードが、メニュー1つ分のコードです。
基本的にはメニューの数だけ<li>タグ部分を増やしたり減らしたりします。
「#」の部分には遷移先URLを入れ、テキスト部分にメニュー名を入れます。
次に、ドロップダウン部分を見ていきましょう。
ドロップダウンを使いたい場合は、<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」クラスのリンクタグを増やしたり減らしたりしてください。
ナビゲーションバーのテンプレートの1行目を見てください。
CSSクラスで「navbar-light」もしくは「navbar-dark」という部分があります。
これは、ナビゲーションバーテンプレートの種類を指定している部分です。
ナビゲーションバーテンプレートには2種類あり、ナビゲーションバーの背景色の明度によって使い分ける必要があります。
背景色に応じて、メニューなどのテキストカラーなどが見えにくくならない方を選びましょう。
ナビゲーションの背景色は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を使って、ナビゲーションを変更してみましょう。
変更箇所は、以下2つです。
ナビゲーション下の画像は、被ってしまっても害のないものです。
実習ではmargin-topを加える必要はありません。クラスの変更だけ行ってみてください。
【例】
<nav class="navbar navbar-expand-lg navbar-light bg-info fixed-top">
このように、ページをスクロールダウンしてもナビゲーションがずっと見えていればOKです。
無料ビデオ講座のお知らせ
Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。