Bootstrapのナビバーのカラースキームについて

環境

Bootstrap5
HTML

はじめに

Bootstrapのナビバー（ナビゲーションバー）のカラースキームの設定は、何色にするべきか悩むところです。服を買うときに、試着室に入って、「うーん、この柄は違うな」とか、別の服を選んできて、「うーん、この柄はどうかな」とか言っているようなものでしょうか。カラースキームにはどのような設定があるのか、色々と試してみます。

内容

ダーク系の色にしたい場合の設定です。

sample.html

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">

このようなイメージになります。

bg-xxxとnavbar-xxxの順番は、気にする必要はありません。このように順番を前後して記述しても問題なく動作します。

sample.html

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

ライト系の色にしたい場合の設定です。

sample.html

<nav class="navbar navbar-expand-sm navbar-light bg-light">

このようなイメージになります。

このように設定すると、ライト系のバックに文字色が白になってしまうため、文字が分かり難くなるため、この組み合わせは基本的に使うことはできません。

sample.html

<nav class="navbar navbar-expand-sm navbar-dark bg-light">

このような見え方になってしまいます。

また、このように設定するとダーク系のバックに文字色が黒になってしまうため、これも、文字が消えて使えません。

sample.html

<nav class="navbar navbar-expand-sm navbar-light bg-dark">

このような見え方になってしまいます。

pg-xxxxの、xxxxには、darkとlight以外の色を指定することができます。primaryを指定するとバックが青色になります。しかし、バックが青色で文字色が黒だと少し目がチカチカして見難いでしょうか。

sample.html

<nav class="navbar navbar-expand-sm navbar-light bg-primary">

このようなイメージになります。

このように設定すると、バックが青色で、文字色が白っぽくなります。この方が見やすいでしょう。

sample.html

<nav class="navbar navbar-expand-sm navbar-dark bg-primary">

このようなイメージになります。

pg-xxxxのxxxxには、青色のprimary以外にも、他の色を選択することができます。赤色であれば、danger、緑色であれば、successとなります。他にも数種類あります。

参考
https://getbootstrap.jp/docs/4.1/utilities/colors/

バックの色は、Bootstrapで予約されている色しか使えないということはありません。自分で好きな色にカスタマイズすることができます。バックの色をシアンにしたい場合、シアンの色コードを#rrggbbで指定すれば、任意の色に設定することができます。シアンはBootstrapでは変数として予約されていません。色コードを指定すると好きな色にカスタマイズすることができます。

参考：色コードを調べるサイト
https://itsakura.com/html-color-codes

sample.html

<nav class="navbar navbar-expand-sm navbar-light" style="background-color: #00FFFF;">

このようなイメージになります。