【color】文字色の指定

colorプロパティでは、テキストの文字色(前景色)を指定することができます。

テキストの色(フォントの色)は、red、blueなど色名のキーワードで指定することができますが、一般的にはRGB値などの数値で指定されます。

※色についてはカラーコード一覧を参照下さい。

また文字色を設定する際は、背景の色も一緒に設定するようにします。 これはユーザーが独自のスタイルシートなどで背景色を設定している場合があるためです。 この場合、その色と設定した文字色の組み合わせ次第では、文字が判別しづらくなる事があります。 ですので、できるだけ背景色も同時に設定するようにして下さい。

書式

  • color : ……… 文字の色を指定する

★:色(カラーチャート参照)、inherit

#ffffff、#333、rgb(255,1,1)などのRGB値、または色名などのキーワードで指定します(アクセシビリティ・ガイドラインのcss技術書には、色指定する場合は色の名前ではなく、数値を使用する事が推奨されている)

使用した時の例

.sample1 {
  color:#fff;
  background:#333;
}
.sample2 {color: red;}
<div class="sample1">正確には文字色の事を、背景画像や背景色に対して、前景色と呼びます</div>
<div class="sample2">キーワード(色名)で指定した場合。背景色は設定していません。</div>

ブラウザ上の表示例

正確には文字色の事を、背景画像や背景色に対して、前景色と呼びます
キーワード(色名)で指定した場合。背景色は設定していません。

対応ブラウザなどのデータ

初期値 ブラウザによる 値の継承 継承する
適用可能な要素 すべての要素
メディア visual
対応ブラウザ Internet Explorer3~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~

関連情報