テキストカラープロパティ
最終更新：2026-09-13
color テキストカラープロパティ
color プロパティは要素のテキストの前景色を設定し、最もよく使われる CSS プロパティの一つです。color キーワード、hex 値、RGB、HSL など、多くの色形式を受け付けます。このプロパティは子要素に継承されるため、通常は親要素に設定してテキストの塊全体の色を統一します。
| カテゴリ | |
|---|---|
| 初期値 | canvastext |
| 継承 | はい |
| 適用対象 | all |
| アニメーションタイプ | color |
| CSS バージョン | CSS1 |
| 状態 | 標準 |
📝 構文
color: <color>;⚙️ 値
| 値 | タイプ | 説明 |
|---|---|---|
<color> | タイプ | テキストの前景色 |
▶ 例
以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：
🌐 ブラウザーサポート
| ブラウザー |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| color | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザーでサポート | |||||
ヒント： color プロパティは子要素に継承されるため、body に設定するとサイト全体の既定のテキスト色が統一されます。
注意： 色だけで情報を伝えないでください。色覚異常のユーザーは見分けられない可能性があります。色にテキストやアイコンを組み合わせてください。
❓ よくある質問
QCSS の color プロパティはどの色形式に対応していますか？
Acolor キーワード（red、transparent）、hex コード（#ff0000、#f00）、rgb()/rgba()、hsl()/hsla() に対応しています。CSS Color 4 では lch()、oklch()、および rgb(255 0 0 / 50%) のような空白区切りの構文が追加されました。日常の開発では hex と rgb() が最も一般的で、hsl() は色相や明度の調整に便利です。
Qcolor と background-color の違いは何ですか？
Acolor はテキスト（前景）の色を設定し、子要素に継承され、さらに色が明示的に設定されていない要素（ボーダーや下線など）の currentcolor として機能します。background-color は要素の背景を設定し、継承されません。両者がテキストの読みやすさを決定するため、十分なコントラストを確保してください。WCAG AA では通常のテキストに少なくとも 4.5:1 を求めています。
Q#f00 と #ff0000 に違いはありますか？
Aいいえ。#f00 は #ff0000 の短縮形です。チャンネルの 2 桁の hex 値が同じ（00、ff、aa など）場合、1 桁に圧縮できます。4 桁と 8 桁の形式はアルファチャンネルを追加します。例えば #ff000080 は 50% の不透明度の赤を意味し、最初の 3 桁／6 桁が色、最後の 1 桁／2 桁がアルファです。
QCSS 変数でサイトの配色テーマを管理するにはどうすればよいですか？
A:root で変数を定義します。例: --primary: #2c7be5; --text: #333; とし、color: var(--primary); で参照します。一元管理することでテーマ変更が容易になり、color-mix()（モダンブラウザ対応）を使えば変数から明るい・暗いバリエーションを導出できます。color-mix() をサポートしない古いブラウザ向けにフォールバック値を提供してください。
🏷️ 関連プロパティ
💡 関連事例
📚 関連チュートリアル
