Go to information

color

colorプロパティは前景色(文字色)を指定します。値には16進数RGB値カラーネームなどでを指定します。

初期値
UA の設定に依存
適用対象
すべての要素
継承
する
メディア
visual

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

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

colorプロパティの説明とは直接関係のない余談ですが、各 UA の実装が抱えている問題で、hr要素の水平線部分の色を変える場合、Microsoft Internet Explorer ではテキストではない水平線が colorプロパティの指定で反映されます。これに対して正しい動作は、Firefox, Netscape, Opera, Safari であり、水平線は背景色を指定する background-colorプロパティで指定します。このように hr要素の水平線の色に関しては UA の実装に違いがあるので、その互換性を考慮して、colorプロパティと background-colorプロパティに同じ色を指定すると良いでしょう。これによりレンダリングの異なる UA でも同じ表現が可能になります。

colorプロパティの実装状況

Windows版Internet Explorer
Firefox
Opera
Safari
Macintosh版Internet Explorer 5

サンプル

記述例
p strong { color : red ; }
......
<p>インターネットでできることの筆頭に
<strong>World Wide Web</strong>
があげられます。</p>
表示例
現在位置
  1. W3G
  2. CSS
  3. 色と背景
  4. color
ナビゲーション
ステータス情報
作者
上田 遼
公開
2007-02-02T16:09:09+09:00
更新
2008-12-29T04:30:37+09:00
URI
http://w3g.jp/css/color_background/color
検索

直近の制作実績等:大阪人間科学大学 New! / 大阪薫英女子短期大学 New! / セキスイハイム みんなのお国じまん New!