6. 前景色と背景色

ここでは、「文字の色（前景色）」や、その「背景色」を設定するためのプロパティについて説明する。

プロパティ定義

本書では、各プロパティの定義を以下の書式で表現する。

プロパティ名
値	指定する値の構文
初期値	初期値
適用対象	プロパティを適用する対象要素
継承	プロパティの継承性
パーセント値	パーセント値の解釈

"指定する値の構文"では、以下の値を記述することができる。

キーワード値および文字列

"inherit"、"auto"などのキーワード。また、キーワード以外の文字列。

color: red

<と>で囲まれたデータ

<色>や<長さ>などは基本データ型。<ボーダー幅>などのように、基本データ型以外の場合は、 各プロパティにおいて説明する。

color: <色>
border: <ボーダー幅>

<と>間に引用符（'）で囲まれたデータ

<'border-width'>のように引用符で囲まれたデータを記述している場合、 そのプロパティで定義された値を参照することを意味する。

border-top: <'border-top-color'>

さらに、プロパティの値を配置する方法は、以下の記号で表現する。

記号	意味	用例
空白	すべてその順序で記述する	A B C
|	いずれか１つを記述する	A | B | C
||	少なくとも１つ以上を、任意順序で記述する	A || B || C
[ ]	グループ化に用いる	[ A B ] | C

また、すべての型、キーワードまたは大カッコで括られたグループの後には、その回数を表現する記号がつくことがある。

記号	意味	用例
*	0回以上記述する	A*
+	1回以上記述する	A+
?	0回または1回記述する	A?
{n,m}	n回以上m回以下記述する	A{1,4}

前景色（colorプロパティ）

「前景色」、すなわち文字色は「colorプロパティ」によって指定する。 その書式は以下のとおりである。

colorプロパティ
値	<色> | inherit
初期値	UAに依存
適用対象	すべての要素
継承	する
パーセント値	受けつけない

<色>

前景色をキーワード、色コードで指定する。

color: red;
color: #ff0000;
color: #f00;
color: rgb(255, 0, 0);
color: rgb(100%, 0%, 0%);

inherit

キーワード"「inherit」"を指定した場合は、その親要素の計算値を継承することを意味する。 また、明示的なinheritの指定は、通常では継承しないプロパティでも強制的に継承することができる。 これは、colorプロパティ以外の他のプロパティにおいても同様である。

背景色（background-colorプロパティ）

「背景色」は、「background-colorプロパティ」によって指定し、 対象要素の背景の色を指定します。その書式は以下のとおりである。

background-colorプロパティ
値	<色> | transparent | inherit
初期値	transparent
適用対象	すべての要素
継承	しない
パーセント値	受けつけない

<色>

背景色をキーワード、色コードで指定する。背景色は、その対象要素によって背景色で描画される範囲が異なる。 ブロックモデル(※ 代表的なものにp、見出し、blockquoteなどのブロック要素がある。)に対して指定した場合は、その矩形（四角）領域がすべて背景色で描画され、それ以外の要素に指定した場合は、 その内容物（コンテンツ）のみが描画される。

body {
    color: black;
    background-color: white;
}
h1, em {
    color: white;
    background-color: blue;
}

transparent

透過色を意味する。要するに透明な色であるから、親要素（ボックス）の背景が透けて見えることになる。

inherit

親要素の計算値を継承する。

ページの先頭に戻る