CSS

BootstrapのNavbarの使い方【メニュー・色・ロゴ】

どうも、つよぽんです!

今回はBootstrapのNavbarの使い方についての解説をします。Navbarを使うことでTwitterやFacebookのように画面上部に設置されるメニューをカンタンに作ることが出来ます。

今回の記事は次のような方に向けて書きました。

想定読者
  • BootstrapのNavbarの使い方を知りたい
  • 画面上部にメニュー付きのナビゲーションバーを設置したい

今回の記事は以下の学習コンテンツ記事内のスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
BootstrapのNavbarを使うCSSのBootstrapのNavbarを使うことで、TwitterやFacebookなどで見かける画面上部に固定されたナビゲーションメニューを作ることが出来ます。また、画面サイズに応じてメニューの表示スタイルを切り替えることも可能です。...

それでは次の内容で話を進めていきます。

今回の内容
  1. BootstrapのNavbarとは
  2. BootstrapのNavbarを使って画面上部にナビゲーションバーを設置する
  3. Bootstrapのnavbar-brandを使ってページタイトルをセットする
  4. Bootstrapのnavbar-navを使ってメニューをセットする

 

BootstrapのNavbarとは

冒頭でも説明しましたが、ここであらためてBootstrapのNavbarとは何をするものなのか説明します。

BootstrapのNavbarとはWebページ上部にページタイトルメニューなどがセットされているナビゲーションバーのことです。

言葉だけではイメージがつきにくいかと思うので、Twitterのナビゲーションバーを見てみましょう。次の画像はTwitterのナビゲーションバーの部分を画像に撮ったものです。

TwitterのナビゲーションバーTwitterのナビゲーションバー

上の画像の赤枠内の部分がナビゲーションバーとなります。この画面上部に設置するナビゲーションバーをBootstrapのNavbarを使うことでカンタンに実装できるのです。

それでは、次の章から「ナビゲーションバーの設置」「ページタイトルの設置」「メニューの設置」方法を順に解説していきます。

BootstrapのNavbarを使ってナビゲーションバーを設置する

Bootstrapでナビゲーションバーを設置するためには、nav要素に次の3つのclass属性値をセットする必要があります。

セットする3つの値
  1. navbar
  2. navbar-[色]
  3. bg-[色](もしくは、style属性でbackground指定)

以下の画像は上記3つのclass属性値をnav要素にセットしたサンプルとなります。

ナビゲーションバー設置のサンプルコードナビゲーションバー設置のサンプルコード

上記画像で使われているコードは以下のリンクから直接確認することも出来ます。

BootstrapのNavbarサンプル1

navbar

navbar」はナビゲーションバーの表示要素を作成します。

実際には、②navbar-[色]③bg-[色]と組み合わせて使うことで、ナビゲーションバーで表示する文字の色や背景色を決めるのではセットで使う必要があります。

navbar-[色]

[色]の部分には「dark」もしくは「light」のいずれかの値がセットされます。つまり「navbar-dark」もしくは「navbar-light」のいずれかを選択することになります。

「navbar-dark」と「navbar-light」の使い分けは次のようになります。

darkとlightの使い分け
  1. navbar-dark : 文字色が白くなる。白文字が見やすい背景色が暗い色(濃い緑)のときに使う
  2. navbar-light : 文字色が黒くなる。黒文字が見やすい背景色が明るい色(黄色)のときに使う

bg-[色](もしくは、style属性でbackground指定)

[色]の部分には、Bootstrapで用意されている「Theme colors」を使うことができます。

Theme colors」のドキュメントを読むとどんな値が用意されているか確認することが出来ますが、ここでも以下に一覧を並べます。

Theme colorsの色
  • Primary : 青色
  • Secondary : 濃い灰色
  • Success : 緑色
  • Danger : 赤色
  • Warning : 黄色
  • Info : 水色
  • light : 薄い灰色
  • dark : 黒

また、「Theme colors」を使わない場合は、bg-[色]の代わりに、CSSのbackgroundプロパティで背景色を指定することも可能です。

Bootstrapのnavbar-brandを使ってページタイトルをセットする

ページタイトルをナビゲーションバーにセットする場合は、ナビゲーションバーであるnav要素の中に、class属性値に「navbar-brand」をもつa要素をセットすることで実装できます。

下の画像の赤枠内a要素にnavbar-brandのclass属性値をセットしたサンプルコードとなります。

出力結果を見るとナビゲーションバーの左側で、少し文字が大きく表示されているのがわかるかと思います。(下の画像だと「Web白熱教室」がページタイトルとして使われている。)

navbar-brandを使ってページタイトルをセットnavbar-brandを使ってページタイトルをセット

上記画像で使われているコードは以下のリンクから直接確認することも出来ます。

BootstrapのNavbarサンプル1

Bootstrapのnavbar-navを使ってメニューをセットする

Bootstrapでメニューをセットする際はul属性のclass属性値に「navbar-nav」をセットします。(下のアニメーション画像の緑枠内の部分)

そして、各メニューアイテムをli要素のclass属性値には「nav-item」をセットします。

各メニューはクリック可能な要素なので、li要素の中にはa要素をセットして、a要素のclass属性値には「nav-link」をセットすることでメニューが出来上がります。

画面サイズが小さいときにメニュー開閉ボタンを表示するサンプル画面サイズが小さいときにメニュー開閉ボタンを表示するサンプル

上記画像で使われているコードは以下のリンクから直接確認することも出来ます。

BootstrapのNavbarサンプル2

画面サイズによってはナビゲーションバー上にメニューをセットすることが出来ないため、次の2つを気にする必要があります。

メニュー表示で気にすること
  1. 画面サイズに応じたメニュー表示の切り替え
  2. 画面サイズが小さいときに使うメニュー開閉ボタンの挙動

画面サイズに応じたメニュー表示の切り替え

画面サイズに応じてメニューを「ナビゲーションバー上に表示する」「メニュー開閉ボタンを押したら表示する」という機能を切り替えるために、nav要素のclass属性値に「navbar-expand-[サイズ]」を指定します。

[サイズ]にセットできる値は次の通りで、画面サイズがセットしたサイズの値以上になるとナビゲーションバー上にメニューが表示されます。

サイズで利用できる値
  • sm : 576px以上
  • md : 768px以上
  • lg : 992px以上
  • xl : 1200px以上

各サイズに関しては以下のドキュメントで確認できます。

Grid options

サンプルコードの「BootstrapのNavbarサンプル2」では「navbar-expand-lg」のように「lg」が使われているので、画面サイズが992px以上になったらナビゲーションバー上にメニューが表示されます。

以下のアニメーション画像は992px以上になったらメニューがナビゲーションバー上に表示されて、992px未満だと非表示になる様子を表しています。

画面サイズを大きくするとナビゲーションバー上にメニューが表示されて開閉ボタンが非表示になるサンプル画面サイズを大きくするとナビゲーションバー上にメニューが表示されて開閉ボタンが非表示になるサンプル

画面サイズが小さいときに使うメニュー開閉ボタンの挙動

画面サイズが指定したサイズ以上のときはナビゲーションバー上にメニューが表示されますが、画面サイズが指定したサイズ未満のときはどのようにしてメニューを表示させれば良いでしょう?

メニューの開閉を行う「トグルボタン」を設置することで、画面サイズが小さくてもメニューを表示することが可能になります。

以下の画像はこの章の冒頭でも貼り付けた画像になりますが、トグルボタンを設置するためには以下の赤枠内オレンジ枠内緑枠内を実装する必要があります。

画面サイズが小さいときにメニュー開閉ボタンを表示するサンプル画面サイズが小さいときにメニュー開閉ボタンを表示するサンプル

赤枠内のbutton要素のclass属性値に「navbar-toggler」、data-toggle属性に「collapse」、data-target属性には緑枠内のメニューの親要素であるdivのIDセレクターを設置します。(IDセレクター = 「#」から始まるid属性値。オレンジ枠内のid値が同じであることが確認できる)

そして、緑枠内のdiv要素のclass属性値には「collapse」と「navbar-collapse」をセットして、ID属性値は、トグルボタンのdata-targetのIDセレクターと紐づくように同じID値をセットする。(オレンジ枠内を参照)

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  1. BootstrapのNavbarを使うことでナビゲーションバーを設置することが出来る
  2. ナビゲーションバーを作るには「navbar」「navbar-[色]」「bg-[色]」(もしくはCSSのbackgroundプロパティ)を指定する
  3. ナビゲーションバーにページタイトルをセットするには「navbar-brand」を使う
  4. ナビゲーションバーにメニューをセットするには「navbar-nav」を使い、画面サイズに応じたメニューの表示方法を切り替える実装をする必要がある

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
BootstrapのNavbarを使うCSSのBootstrapのNavbarを使うことで、TwitterやFacebookなどで見かける画面上部に固定されたナビゲーションメニューを作ることが出来ます。また、画面サイズに応じてメニューの表示スタイルを切り替えることも可能です。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です