ホームページの基礎（2. CSS 編）

2.6 前景色と背景色

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

2.6.1 プロパティ定義の表記法法

まずは，本コンテンツでの各プロパティの定義を以下の書式で表現することとします。

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

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

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

"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}

CSS総目次 | ページ先頭に戻る

2.6.2 前景色（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プロパティ以外の他のプロパティにおいても同様です。

CSS総目次 | ページ先頭に戻る

2.6.3 背景色（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

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

CSS総目次 | ページ先頭に戻る