基本要素

【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の公式サイトでは、こちらのページに色についてのドキュメントがあるので、よかったらご参考ください。