Bootstrapで遊ぶ９（文字、背景色の設定）

おつかれさまです。

大きな枠組み、レイアウトが作れるようになったところで、文字や色の設定を確認したいと思います。これまではstyleを使ってゴリ押しで文字や背景色のデザインを管理していましたが、styleではなくBootstrapにも文字や背景色を設定できる仕様があります。

掘れば深いのですが、かる～くメモ程度に。

まず文字色から、Bootstrap仕様の色は１０種類、

#	クラス名	色コード
1	text-primary	#007BFF
2	text-secondary	#6C757D
3	text-success	#28A745
4	text-info	#17A2B8
5	text-warning	#FFC107
6	text-danger	#DC3545
7	text-dark	#343A40
8	text-muted	#6C757D
9	text-light	#F8F9FA
10	text-white	#FFFFFF

テストで書いてみます。

<h1>テキストカラーのテスト</h1>
<p class="text-primary">1.text-primary</p>
<p class="text-secondary">2.text-secondary</p>
<p class="text-success">3.text-success</p>
<p class="text-info">4.text-info</p>
<p class="text-warning">5.text-warning</p>
<p class="text-danger">6.text-danger</p>
<p class="text-dark">7.text-dark</p>
<p class="text-muted">8.text-muted</p>
<p class="text-light">9.text-light</p>
<p class="text-white">10.text-white</p>

した２つ、白すぎて、もうこれわかんねぇな。

あと背景色も確認、こちらは9種類、「-muted（#6C757D）」の色がありません。

#	クラス名	色コード
1	bg-primary	#007BFF
2	bg-secondary	#6C757D
3	bg-success	#28A745
4	bg-info	#17A2B8
5	bg-warning	#FFC107
6	bg-danger	#DC3545
7	bg-dark	#343A40
8	bg-light	#F8F9FA
9	bg-white	#FFFFFF

<h1>背景カラーのテスト</h1>
<p class="bg-primary">1.text-primary</p>
<p class="bg-secondary">2.text-secondary</p>
<p class="bg-success">3.text-success</p>
<p class="bg-info">4.text-info</p>
<p class="bg-warning">5.text-warning</p>
<p class="bg-danger">6.text-danger</p>
<p class="bg-dark">7.text-dark</p>
<p class="bg-light">8.text-light</p>
<p class="bg-white">9.text-white</p>

Bootstrapを使ってページデザインを作成する場合は、この色の中から選ぶようにします、そうすることでページデザイン全体に統一感をもたせ、見栄え良く仕上げることができます。