Color
color は CSS のプロパティで、要素のテキストやテキスト装飾における前景色の色値を設定し、 currentColor の値を設定します。currentColor は他のプロパティの間接的な値として使用される可能性があり、 border-color のような他の色に関するプロパティの既定値にもなったりします。
HTML における色の使用の概要については、CSS を使用した HTML 要素への色の適用をご覧ください。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
transparent | 1 | 12 | 1 | 1 | 18 | 1 |
| その他 | ||||||
| は CSS のデータ型で、1 つの色を表します。 はアルファチャネルの透過値を含むことがあり、この色を背景とどれだけ混合するかを示すこともできます。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS タイプ | ||||||
transparent | 1 | 12 | 1 | 1 | 18 | 1 |
基本構文
CSS
body {
color: #333333;
}
a {
color: oklch(0.5 0.2 240);
}ライブデモ
実務での使いどころ
-
サイト全体のテキストカラー設定
body に color を設定することで、サイト全体の基本テキスト色を統一し、currentColor を通じてボーダーやSVGにも一貫した配色を適用できます。
注意点
- color は多くの他のプロパティのデフォルト値に影響します（border-color、text-decoration-color、SVGの fill など）。変更時は意図しない副作用がないか確認してください。
アクセシビリティ
- テキストの色と背景色のコントラスト比がWCAG 2.1の基準（通常テキスト4.5:1、大きなテキスト3:1）を満たすことを必ず確認してください。