6. 前景色と背景色

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

プロパティ定義

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

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

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

キーワード値および文字列
"inherit"、"auto"などのキーワード。また、キーワード以外の文字列。
color: red
<と>で囲まれたデータ
<色>や<長さ>などは基本データ型。<ボーダー幅>などのように、基本データ型以外の場合は、 各プロパティにおいて説明する。
color: <色>
border: <ボーダー幅>
<と>間に引用符(')で囲まれたデータ
<'border-width'>のように引用符で囲まれたデータを記述している場合、 そのプロパティで定義された値を参照することを意味する。
border-top: <'border-top-color'>

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

記号意味用例
空白すべてその順序で記述するA B C
|いずれか1つを記述するA | B | C
||少なくとも1つ以上を、任意順序で記述する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;
}
背景色の描画(background-colorプロパティ)
transparent
透過色を意味する。要するに透明な色であるから、親要素(ボックス)の背景が透けて見えることになる。
inherit
親要素の計算値を継承する。

ページの先頭に戻る


Copyright c 2006-2007 御隠居 (滄洲). All Rights Reserved.