Bootstrap

【Bootstrap4】navbarの背景色・文字色を変える方法

bootstrap4の公式サイトには、たくさんnavbarの使い方が解説されています。

navbarの背景色を変える方法を解説します。

Bootstrapのnavbarの背景色・文字色を変える方法

Bootstrapのnavbarの背景色・文字色を変える方法をご紹介します。

Bootstrapのnavbarの背景色を変える方法

Bootstrapのnavbarの背景色を変える方法は簡単です。

bg-●●の設定を変えるだけです。

Bootstrapの公式サイトでは、暗い色のnavbarがたくさん紹介されています。

しかしこれは単なる使用例です。使用例としてbg-darkという設定をしたnavbarがたくさん紹介されているにすぎません。

別にbg-darkにしなくても構いません。

Bootstrapはbg-●●とクラスをつけることで、navbarに限らずbuttonなどでも背景色を指定することができます。

bg-darkをbg-primaryに変更すれば、背景色にprimaryの色が設定されます。

bg-darkをbg-dangerに変更すれば、背景色にdangerの色が設定されます。

ただ背景色にbg-darkを指定したものを例として紹介されているというのみに過ぎません。

Bootstrapのnavbarの文字色を変える方法

Bootstrapのnavbarで使われる文字の色は、基本的には黒っぽい色か白っぽい色のどちらかから選びます。

navbar-light・navbar-darkという2種類のnavbar用クラスが用意あります。

背景色と文字の色の明暗差が大きいほど、文字が読みやすくなります。背景色が明るいならnavbar-light、暗いならnavbar-darkを指定しましょう。

navbarの文字色を別の色にはできないのか

navbarをnavbar-light、navbar-darkで指定されている色以外にすることはできないのかというと、できます。

しかしnavbar-light、navbar-darkで指定されている色の中には、リンクのホバー時の文字色、押した時の文字色などが含まれています。一部のみを変更すると、そこだけ浮いてしまうので、基本はそのまま使った方が無難です。

navbarの関連記事について

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

Bootstrapの色を変える方法

どうしてもBootstrapを使用していると、どれも似た印象になってしまう。

そもそもbg-primaryなど、primaryから呼び出される色そのものを変更してみたい。

navbarなどの色を変えたいという方は、こちらの記事をどうぞ。

【色も変えれる】Bootstrapをsassでカスタマイズして使おうBootstrapの特定の部分を変えたいと思ったとき、思った通りの見た目にならないことがあります。これは元々のBootstrapのcss...

透明なnavbarを作る方法

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

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

Bootstrapのnavbarの挙動について詳しく知りたい

navbarに関係するクラスで、どんなcssが設定されているのか詳しく知りたい方はこちらの記事をどうぞ。

適当なコピペを脱却したい中級者向けの記事となっております。

Bootstrap4のnavbarを極めるBootstrap4でグローバルナビを簡単に作成するクラスであるnavbarを使用するとき、毎回Bootstrap公式サイトの凡例をコピ...