【Bootstrapの基本要素】色（Colors）について

記事内に商品プロモーションを含む場合があります

ここでは、Bootstrapの基本要素の中でも【色】についてふれていきます。
（※Bootstrapの公式ドキュメントではcolorsという項目です。）

色と言えば、webの世界では着色するのは数えるくらいしかありません。

1. 文字色
2. 背景色

くらいのものです。

それでは、今回は【色】について詳しくみていきましょう。

Bootstrapの文字色について

早速ですが、文字色に関してのクラス名は以下のように記述します。

text-単語

色の【名前】ではなく、色を【連想させる単語】で表しています。

詳細をみていきましょう。

文字色のクラス名

.text-primary	青系
.text-secondary	グレー
.text-success	緑系
.text-danger	赤系
.text-warning	黄色系
.text-info	水色系
.text-light	明るいグレー（※）
.text-dark	暗いグレー
.text-white	白（※）

※色が白に近いものは、背景色を黒にして可視化しています。

なお、この辺りの”単語”というのは、この後お伝えする背景色やアラートなど、他の要素でも同じ名称で出てくるので（alert-primary・alert-secondaryなど）、覚えておいて損はありません。

文字色の記述コード

コードを書くと以下のようになります。

文字色の記述

1.  <div class=“container”>
2.         <p class=“text-primary”>text-primary</p>
3.         <p class=“text-secondary”>text-secondary</p>
4.         <p class=“text-srccess”>text-srccess</p>
5.         <p class=“text-danger”>text-danger</p>
6.         <p class=“text-warning”>text-warning</p>
7.         <p class=“text-info”>text-info</p>
8.         <p class=“text-light”>text-light</p>
9.         <p class=“text-dark”>text-dark</p>
10.         <p class=“text-white”>text-white</p>
11.     </div>

※実画面での反映は、先述したテーブルの反映をご確認ください。

以上が文字色についてです。

Bootstrapの背景色について

では次に、背景色についてみていきます。

背景色も文字色を表記はほとんど変わりません。
と言うか、文字色と似ています。

以下のように記述します。

bg-単語

詳細をみていきましょう。

背景色のクラス名

.bg-primary	青系
.bg-secondary	グレー
.bg-success	緑系
.bg-danger	赤系
.bg-warning	黄色系
.bg-info	水色系
.bg-light	明るいグレー
.bg-dark	暗いグレー
.bg-white	白

 

背景色の記述コード

背景色のコードも記述してみます。

背景色の記述

1. <div class=“container”>
2.         <p class=“bg-primary”>bg-primary</p>
3.         <p class=“bg-secondary”>bg-secondary</p>
4.         <p class=“bg-srccess”>bg-srccess</p>
5.         <p class=“bg-danger”>bg-danger</p>
6.         <p class=“bg-warning”>bg-warning</p>
7.         <p class=“bg-info”>bg-info</p>
8.         <p class=“bg-light”>bg-light</p>
9.         <p class=“bg-dark”>bg-dark</p>
10.         <p class=“bg-white”>bg-white</p>
11.     </div>

 

以上が背景色についてです。

まとめ

Bootstrapの基本要素である【色】について解説しました。

1. 文字色について
2. 背景色について

いづれも、単語自体は同じものを使用していますが、textかbgかの使い分けが必要です。
また、色そのものの表示は難しくないので、覚えてしまえば、すぐに使うことができます。

ぜひ、使いこなしてみてください。

ちなみに、Bootstrapの公式サイトでは、こちらのページに色についてのドキュメントがあるので、よかったらご参考ください。