Bootstrapのnavbarの文字色や背景色を変更する方法!

この記事では、Bootstrapのnavbarの文字色や背景色を変更する方法を解説しています。Bootstrapでは、クラスを指定するだけで文字色や背景色を変更できます。サンプルコードも用意しているので、参考にしてください。

コンテンツ [表示]

  1. 1Bootstrapのnavbarの文字色や背景色を変更したい
  2. 2Bootstrapのnavbarの文字色や背景色を変更する方法
  3. 2.1文字色を変更する
  4. 2.2背景色を変更する
  5. 3navbarの文字色と背景色を変更する
  6. 4まとめ

Bootstrapのnavbarの文字色や背景色を変更したい

Bootstrapを使うと文字色や背景色を簡単に指定できます。

しかし、背景色によって文字が見にくくなってしまったりなどの問題が発生することがあります。

navbarで色を指定するときには、それを防いでくれる便利なクラスがありますので、今回紹介していきます。

Photo byPexels

Bootstrapのnavbarの文字色や背景色を変更する方法

文字色を変更する

nav要素に、.navbar-lightもしくは.navbar-darkを適用することで、ナビゲーションバー内の文字色が統一されます。

.navbar-lightを適用すると明るい背景用、.navbar-darkを適用すると暗い背景用の文字色になります。どちらか1つを適用するとよいでしょう。

navbar-darkを指定した場合

<nav class="navbar navbar-expand navbar-dark bg-info fixed-top">

もちろん、自分で好きな色を指定することもできます。この場合は上記のクラスを指定せず、文字色を指定しましょう。

背景色を変更する

nav要素にbg-〇〇クラスを適用することでナビゲーションバーの背景色を指定します。
クラスの名前(○○の部分)と色の対応は以下のようになります。

bg-infoを指定した場合

<nav class="navbar navbar-expand navbar-dark bg-info fixed-top">
クラスと色の対応リスト

自分で好きな色を指定したい場合は、上記のクラスを指定せず、style属性で指定しましょう。

navbarの文字色と背景色を変更する

以上2つを使っていくつかのサンプルコードを作成してみました。

navbar-darkとbg-infoを使用

navbar-lightとbg-infoを使用

一つ前のサンプルコードとは変わって文字色が黒になっています。背景が暗い場合は白文字、明るい場合は黒文字が見やすいからですね。

navbar-darkとbg-primaryを使用

bg-○○のクラスを変更すると背景色が変わります。

まとめ

いかがでしたか?Bootstrapでは簡単に背景色を指定でき、色の明暗に合わせて文字色を変更できます。是非試してみてください。

以下の記事も参考にしてください。

Bootstrapで文字色や背景色を変更する方法を解説!のイメージ
Bootstrapで文字色や背景色を変更する方法を解説!
この記事では、Bootstrapで文字色と背景色を変更する方法を解説します。Bootstrapに用意されている色についてのクラスを使うと、文字色と背景色を簡単に変更することができます。色とクラスの組み合わせも全て紹介します。

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

まゆ
ライター

まゆ

 主にHTML,Bootstrapの記事を描いています。