Bootstrapを使えば、ナビゲーションバーやドロップダウンリストなども簡単に組み込むことができます。
ナビゲーションバー
前回、Bootstrapのナビゲーションバーを初めて使ってみました。しかし、テンプレートをコピペしただけでしたね。今回は、ナビゲーションバーの具体的な使い方について学んでいきましょう。
では、前回使用したテンプレートのコードの解説から行っていきます。
・brand
まず、下のコードを見てください。
この「navbar-brand」というクラスは、ロゴやサイト名などの部分を書くときに使用します。文字のみでサイト名を入れるのであれば、「Navbar」というテキスト部分を書き換えればOKです。
画像を使いたい場合は、「Navbar」というテキスト部分に「img」タグを書きます。
画像＋テキストの場合は「img」クラスに以下CSSクラスを設定し「img」タグの後にテキストを書きます。
・メニュー
ナビゲーションバーに設置したいメニューは、<ul>内に入れていくことになります。
以下コードが、メニュー１つ分のコードです。
基本的にはメニューの数だけ<li>タグ部分を増やしたり減らしたりします。
「＃」の部分には遷移先URLを入れ、テキスト部分にメニュー名を入れます。
・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>
まずドロップダウンを使いたい場合は、<li>タグの「nav-item」クラスと合わせて「dropdown」というクラスも記述します。
そして、ドロップダウンメニューを作る時に知っておかなければいけない部分を見ていきましょう。まず、常に表示される部分のメニュー名です。以下リンクタグ内に記述します。
常に表示されるメニュー名部分のリンクタグ内にある遷移先URL（href="#"）そのままにしておいてください。別のページなどへ繋いでしまうとドロップダウンが開かなくなります。
次に、ドロップダウン内メニューの部分です。 仕切りの部分は、必要なければ削除してください。また、こちらもメニュー数に応じて「dropdown-item」クラスのリンクタグを増やしたり減らしたりしてください。
ナビゲーションバーの配色
ナビゲーションバーのテンプレートの１行目を見てください。 このコードのCSSクラスで「navbar-light」もしくは「navbar-dark」という部分があります。これは、ナビゲーションバーテンプレートの種類を指定している部分です。ナビゲーションバーテンプレートには２種類あり、ナビゲーションバーの背景色の明度によって使い分ける必要があります。これは、メニューなどのテキストカラーなどが背景色によっては見えにくくなるなどの影響がある為です。
この背景色はBootstrapで用意されている他の配色を使用したり、オリジナルCSSを設定して任意の配色に変更する事も出来ます。背景色に合ったナビゲーションバーテンプレートを使用しましょう。
・背景色変更
まず、Bootstrapで用意されている配色を見ていきます。 以下カラーは一部で、Bootstrap公式サイトの「Utilities」という項目内「Colors」に全色一覧があります。
このように、Bootstrapで用意された配色を使う場合はテンプレートのコードの一部を変更するだけでOKです。
任意の色に変えたい場合は、テンプレートにコードを追加する必要があります。
上図のイメージのようにstyle指定を追加すれば、どんな色に変更する事も出来るようになります。もちろんオリジナルのcssクラスを作り、cssファイルで設定することも可能です。
ナビゲーションの表示位置
ナビゲーションは、以下イメージ上のように何も指定しなければサイト内最上部に固定されます。 つまり、スクロールしてサイトの下の方に行くとナビゲーションは見えなくなるという事です。
ナビゲーションを常に画面上部に表示させたい場合は「fixed-top」というCSSクラスを使用します。このクラスを使用すると、スクロールしていっても常に画面上部にナビゲーションが表示されるようになります。
◆実習5.ナビゲーションを固定しよう
前回作成したindex.htmlのナビゲーションを画面上部の固定表示にしてみましょう。
<nav>タグに「fixed-top」クラスを追加ます。
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
保存してブラウザで確認すると、下へスクロールしても常にナビゲーションが画面上部に表示されるようになっているはずです。
ビッグイメージの画像が雲なので分かりにくいですが、 「fixed-top」クラスを追加した場合はトップ部分の高さが短くなっていますよね。
これは.img-hidden{{ height: 300px;}の設定が効かなくなったわけではなく、
「fixed-top」クラスを追加するとナビゲーションが浮いたような状態になるため。
ビッグイメージの上部とナビゲーションが重なっている状態です。
人の写真などを使っていて「ナビゲーションと被ってしまうのが嫌」という場合には、ビッグイメージを囲っている<div>タグに対してオリジナルクラスを追加して、cssでmargin-topの値にナビバー分の高さ(px)を設定します。下図ではオレンジ色の部分が追加したmargin部分です。
