color

Updated 2013.10.27 / Published 2007.02.02

colorプロパティは前景色（文字色）を指定します。値にはRGB値やカラーネームなどで色を指定します。

値

初期値

UA の設定に依存

適用対象

すべての要素

継承

する

メディア

visual

colorプロパティは、たとえ、img要素などのテキスト内容が存在しない要素であっても、border-colorプロパティの初期値としてボーダーの色になったり、何らかのトラブルで画像が表示できない場合や画像の表示に対応していない・あるいは表示しない設定にしている環境での代替テキスト（altanative text）の表示色となったり影響をあたえます。

特に背景色を指定した場合は、colorプロパティで前景色もあわせて指定するようにします。なぜなら、制作者スタイルシートで背景色だけを白色に指定していても、ユーザがUAの設定を変更している場合やユーザスタイルシートを利用している場合に、必ずしも前景色を黒色に設定しているとは限らないためです。また、背景色は文字色と似通った色を指定していると文字が読みづらくなるため、背景色と文字色のコントラストはできるだけ高い組み合わせになるように明度や彩度を調節する等して見やすくなるように工夫しましょう。

colorプロパティの実装状況

IE: ◯
Firefox: ◯
Opera: ◯
Chrome: ◯
Safari: ◯
iOS: ◯
Android: ◯

サンプル

p em { color : red ; }
......
<p>インターネットでできることの筆頭に<em>World Wide Web</em>があげられます。</p>

次のサンプルは、colorプロパティとは直接関係のない余談ですが、Internet Explorer6/7/8 では区切り線の色が前景色扱いになっているためhr要素の区切り線の色を変える場合、colorプロパティの指定で反映されます。これに対して正しい振る舞いは、IE9以上とその他のモダンブラウザであり、区切り線の色は背景色を指定する background-colorプロパティで指定します。

hr {
  background-color : red ; /*正しい指定*/
  color : red ; /*IE6,7,8用の補完*/
  height : 2px ;
  border : 0 none ;
}
......
<hr />
<p>さて、話は変わりますが...。</p>

このように hr要素に限っては実装の問題があるUAでの振る舞いの違いを考慮して、colorプロパティと background-colorプロパティに同じ色の値を指定しておくと良いでしょう。