Bootstrap4 色

Bootstrap4 の色

この記事では、Bootstrap4 で利用可能な定義済みカラークラスについて解説します。これらのクラスを使用すると、テキスト、背景、枠線の色を簡単に設定できます。

テーマカラー

Bootstrap4 では、主要なテーマカラーとして、青、シアン、緑、黄、赤、ピンクの6色が用意されています。これらの色は、ウェブサイトの全体的な雰囲気を決定づける際に使用されます。

色	クラス	例
青	`.text-primary`, `.bg-primary`, `.border-primary`	`<p class="text-primary">青色のテキストです。</p>`
シアン	`.text-info`, `.bg-info`, `.border-info`	`<p class="text-info">シアン色のテキストです。</p>`
緑	`.text-success`, `.bg-success`, `.border-success`	`<p class="text-success">緑色のテキストです。</p>`
黄	`.text-warning`, `.bg-warning`, `.border-warning`	`<p class="text-warning">黄色のテキストです。</p>`
赤	`.text-danger`, `.bg-danger`, `.border-danger`	`<p class="text-danger">赤色のテキストです。</p>`
ピンク	`.text-pink`, `.bg-pink`, `.border-pink`	`<p class="text-pink">ピンク色のテキストです。</p>`

二次カラーは、主に背景色や枠線の色として使用されます。Bootstrap4 では、濃い灰色と薄い灰色の2色が用意されています。

色	クラス	例
濃い灰色	`.text-secondary`, `.bg-secondary`, `.border-secondary`	`<p class="text-secondary">濃い灰色のテキストです。</p>`
薄い灰色	`.text-light`, `.bg-light`, `.border-light`	`<p class="text-light">薄い灰色のテキストです。</p>`

補助カラーは、テーマカラーを補完するために使用されます。Bootstrap4 では、青、インディゴ、紫、ピンク、赤、オレンジ、黄、緑、青緑、シアン、灰色の11色が用意されています。これらの色は、ボタン、リンク、アイコンなどに使用されます。

補助カラーのクラス名は、テーマカラーのクラス名と同様です。例えば、青色の補助カラーを使用する場合は、.text-blue, .bg-blue, .border-blue を使用します。

状態カラーは、成功、情報、警告、危険などの状態を表すために使用されます。Bootstrap4 では、青、緑、黄、赤の4色が用意されています。

状態	クラス	例
成功	`.text-success`, `.bg-success`, `.border-success`	`<p class="text-success">成功メッセージです。</p>`
情報	`.text-info`, `.bg-info`, `.border-info`	`<p class="text-info">情報メッセージです。</p>`
警告	`.text-warning`, `.bg-warning`, `.border-warning`	`<p class="text-warning">警告メッセージです。</p>`
危険	`.text-danger`, `.bg-danger`, `.border-danger`	`<p class="text-danger">エラーメッセージです。</p>`

Bootstrap4 では、上記の色の他に、白、薄い灰色、灰色、濃い灰色、黒の5色が用意されています。これらの色は、テキスト、背景、枠線などに使用されます。

色	クラス	例
白	`.text-white`, `.bg-white`, `.border-white`	`<p class="text-white bg-dark">白いテキストです。</p>`
薄い灰色	`.text-light`, `.bg-light`, `.border-light`	`<p class="text-light bg-dark">薄い灰色のテキストです。</p>`
灰色	`.text-gray`, `.bg-gray`, `.border-gray`	`<p class="text-gray-dark bg-light">灰色のテキストです。</p>`
濃い灰色	`.text-dark`, `.bg-dark`, `.border-dark`	`<p class="text-dark">濃い灰色のテキストです。</p>`
黒	`.text-black-50`, `.bg-black-50`, `.border-black-50`	`<p class="text-black-50 bg-light">黒色のテキストです。</p>`

A1: はい、できます。SCSS を使用して、Bootstrap4 の変数を上書きすることで、独自の色を定義することができます。詳細については、公式ドキュメントのテーマ設定を参照してください。

A2: いいえ、できません。Bootstrap4 のクラスでは、単一の色しか設定できません。グラデーションの色を設定するには、CSS の linear-gradient() 関数などを使用する必要があります。

A3: はい、使用できます。ただし、クラス名によって、適用される要素が異なります。例えば、.text-* クラスはテキストにのみ適用され、.bg-* クラスは背景にのみ適用されます。.border-*クラスは枠線にのみ適用されます。