Bootstrap 5 のカラー

この記事では、Bootstrap 5 で提供されるカラーユーティリティクラスについて説明します。テーマカラー、すべてのカラーユーティリティクラス、カラー変数について解説します。

テーマカラー

Bootstrap 5 は、ボタン、リンク、その他のコンポーネントの背景色やテキストカラーに使用できる 10 種類の定義済みカラーを提供しています。

各テーマカラーには、色の濃淡を表す色合いが用意されています。例えば、`blue-100`、`blue-200` などです。

<button class="btn btn-primary">プライマリ</button>
<button class="btn btn-secondary">セカンダリ</button>
<button class="btn btn-success">成功</button>
<button class="btn btn-danger">危険</button>
<button class="btn btn-warning">警告</button>
<button class="btn btn-info">情報</button>
<button class="btn btn-light">明るい</button>
<button class="btn btn-dark">暗い</button>

すべてのカラーユーティリティクラス

Bootstrap 5 は、背景色、テキストカラー、ボーダーカラーなどを設定するためのカラーユーティリティクラスを提供しています。

各ユーティリティクラスは、`.bg-*`、`.text-*`、`.border-*` などの命名規則に従っています。

テーマカラーに加えて、グレースケールも用意されています。

<p class="bg-primary text-white">プライマリ背景、白テキスト</p>
<p class="text-secondary">セカンダリテキスト</p>
<p class="border border-danger">危険なボーダー</p>

カラー変数

Bootstrap 5 は、CSS 変数を使用してカラー値を定義しています。これにより、カラーを簡単にカスタマイズできます。

すべてのカラー変数の名前とデフォルト値は、公式ドキュメントで確認できます。

これらの変数を上書きすることで、テーマカラーやその他のカラー設定をカスタマイズできます。

:root {
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
}

よくある質問

Q1. Bootstrap 5 で独自のカラーを追加するにはどうすればよいですか？

A1. CSS 変数を使用して独自のカラーを定義し、ユーティリティクラスを作成することで、Bootstrap 5 に独自のカラーを追加できます。

Q2. Bootstrap 4 のカラーと Bootstrap 5 のカラーの違いは何ですか？

A2. Bootstrap 5 では、カラーパレットが更新され、よりモダンでアクセスしやすいカラーが使用されています。また、CSS 変数を使用してカラーが定義されるようになり、カスタマイズが容易になっています。

Q3. Bootstrap 5 のカラーユーティリティクラスはどこで使用できますか？

A3. Bootstrap 5 のカラーユーティリティクラスは、テキスト、背景、ボーダーなど、あらゆる要素のスタイル設定に使用できます。