color プロパティの影響範囲

Category : CSS


This property describes the foreground color of an element’s text content.

This property describes the foreground color of an element’s text content. In addition it is used to provide a potential indirect value (currentColor) for any other properties that accept color values. If the ‘currentColor’ keyword is set on the ‘color’ property itself, it is treated as ‘color: inherit’.

Color Module Level 3 の方では currentColor の説明が入っていますが基本は同じで、このプロパティは前景色を指定するプロパティであると書かれています。

color プロパティの影響を受ける例


ボーダーを指定する際、ボーダーカラーが未指定の場合は color プロパティで指定した色がボーダーカラーの計算済みスタイルとして使用されます。

CSS 2.1 の「8.5.2 Border color」 において、border-*-color の初期値は the value of the ‘color’ property となっています。

If an element’s border color is not specified with a border property, user agents must use the value of the element’s ‘color’ property as the computed value for the border color.

では Borders Module Level 3 ではどうなのかと CSS Backgrounds and Borders Module Level 3 の「4.1. Line Colors: the ‘border-color’ properties」 を見ると、border-*-color の初期値は currentColor であると書かれています。
currentColor の色は color プロパティによって決められるので、初期のボーダーカラーはやはり color プロパティで指定したものとなります。

また、outline-color も同様です。

<shadow> の色

box-shadow, text-shadow プロパティの値に使用される形式で、構文は次のようになっています。

<shadow> = inset? && [ <length>{2,4} && <color>? ]

構文を見ると分かる通り、色の指定は各種 <length> と一緒に指定する必要がありますが、色の指定自体は任意です。
未指定だとどうなるのか。それは <shadow> の説明文 に書かれています。

The color is the color of the shadow. If the color is absent, the used color is taken from the ‘color’ property.

色の指定がない場合は color プロパティの指定を使うよ、ということです。


など、初期値が currentColor のもの。

とりあえず color プロパティによって指定された色は文字色以外にも影響するということは覚えておきたいですね。

Leave a Reply