Bootstrap

Bootstrap4のnavbarを極める

Bootstrap4でグローバルナビを簡単に作成するクラスであるnavbarを使用するとき、毎回Bootstrap公式サイトの凡例をコピーして、適当に書き換えて使用していました。

当然ながら曖昧な知識のままでは応用が利きません。ちょっとカスタマイズしたいと思ったときに適用されるcssが意図したものにならず、実装に時間を取られることがありました。navbar-navはどこにつけたらよいのか?navbar-collapseを記述する位置はどこか?きちんと理解しようと思ったのでまとめます。

今回はnavbarのクラスに着目した記事ですので、containerやドロップダウン、レスポンシブなどの内容には触れないか、軽く紹介する程度に留めます。

Bootstrapのnavbarのクラスについて

まずはnavbarのクラスの効果を確認しましょう。他の関連するクラスへの理解を深めるために、navbarのクラスについてはcssを抜粋して紹介します。

.navbar {position: relative;//  親要素に対して相対位置に配置する。
display: flex;flex-wrap: wrap; // 複数行にまたがるコンテンツを折り返して表示する。
align-items: center; // コンテンツを縦方向に中央ぞろえする。
justify-content: space-between; // flexboxで左揃えのコンテンツと右揃えのコンテンツを離して配置する。
space out brand from logo・・・中略・・・}

Bootstrap4のナビゲーションにおいて、このクラスを指定した部分はナビゲーションの配置をするためのflexboxが適用され、横並びのレイアウトになります。Bootstrapでナビゲーションを使用しようとする場合は、これを書かないとまともに表示されなくなります。必ず書くようにしましょう。

navbarクラスの使用方法

<nav class="navbar navbar-expand navbar-dark bg-dark">・・・中略・・・</nav>

navタグの内部に記述した内容が、ナビゲーションとして扱われます。

bg-darkは背景色を指定しているだけで、ナビゲーションの挙動に影響を与えません。bg-primaryなど好きに書き換えてもOK。

navbar-dark、navbar-lightはグローバルナビ用に文字の色を変えています。

トグラークラスについて

navbarを使用する際には、レスポンシブ対応をするため一緒にトグラークラスを使用する場合が多くあります。

詳しくは以下の記事をご覧ください。

【Bootstrap4】navbarでレスポンシブデザインをしようBootstrapのnavbarにはレスポンシブデザインを実装するためのクラスが用意されています。 スマホ用のハンバーガーメニュー...

文字色・余白指定のクラス

navbar内で使用し文字の色や余白を変化させるクラスを紹介します。

navbar-light・navbar-darkのクラスについて

navbar-lightもしくはnavbar-darkを指定します。このクラスをつけるとリンクなどの色をまとめて指定してくれます。

背景色が明るければ暗い文字の方が、背景色が暗ければ明るい文字の方が、明暗の差がついて読みやすくなります。背景色が明るいならnavbar-light、暗いならnavbar-darkを指定した方が親切ですね。

navbar-brandのクラスについて

Used for brand, project, or site names.などと書かれていますが、別にロゴなどのみしか書いてはいけないというわけではありません。こちらは文字の大きさや余白の設定を変えるものです。

sassも一部見てみましょう。普通のことしか書いていません。

.navbar-brand {
display: inline-block;
padding-top: $navbar-brand-padding-y;
padding-bottom: $navbar-brand-padding-y;
margin-right: $navbar-padding-x;
font-size: $navbar-brand-font-size;
line-height: inherit;
white-space: nowrap;
@include hover-focus {text-decoration: none;}

ほかの文字と比べて目立つようになるので、一部の文字にしか使わないように注意書きがされているだけですね。

リンクのクラスについて

navbar-navを指定すると横並びになるなどレイアウトが適用されます。nav-linkを指定すると文字色が変化します。nav-linkに加えてactiveのクラスを付けると、付けないよりも文字の色が鮮やかになり、現在参照しているページが見やすくなります。

.navbar-nav {
display: flex;
flex-direction: column; // cannot use `inherit` to get the `.navbar`s 
valuepadding-left: 0;
margin-bottom: 0;
list-style: none;・・・中略・・・}

使い方も添付しておきます。

<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li><li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
</ul>

nav-itemについて

おそらくおしゃれ用クラスです。navbar.scssをnav-itemで検索しましたが、何もヒットしませんでした。Chromeのデベロッパーツールでnav-item部分を選択しても、CSSが適用されている気配はありませんでした。

自分の中では長年の疑問が解けてすっきりしました。

余白の作り方

ナビゲーションが意図した通りに表示できない、勝手に整列されてしまうと思う場合は、おそらくmx-auto、ml-、mr-などでマージンが設定されています。

公式サイトのデモと、マージンについての指定を参考にするとよいでしょう。

冒頭に説明したnavbarのクラスでは、justify-content: space-between;が設定されています。タグの階層を整理して、左と右、もしくは中央に揃えるコンテンツと捉え、適切にマージンをつければ簡単に配置ができるようになるはずです。

navbarの関連記事について

Bootstrap関連の記事をほかにも書いています。

Bootstrapのnavbarの色を変えたい方向けの記事

Bootstrapのnavbarの色を変えたい方向けに別の記事を用意しております。こちらの方がやさしい内容となっております。

【Bootstrap4】navbarの背景色・文字色を変える方法bootstrap4の公式サイトには、たくさんnavbarの使い方が解説されています。 navbarの背景色を変える方法を解説しま...

透明なnavbarを作る方法

透明なnavbarを作り背景画像を見せる方法を解説しています。

【Bootstrap4】透明で背景が見えるおしゃれなnavbarを作ろうきれいなウェブサイトのBootstrapテンプレートを見ると、navbarの背景色が透明で、後ろの背景画像が見えるものがあるかと思います...