背景と色

Revised: Jun./4th/2004

背景や画像は、HTML による物理的な指定方法でも実現可能です。HTML の最近の指定方法のトレンドは、(X)HTML はマークアップ言語として解釈し直され、文書の内容の表現には CSS えお使います。

ここでは、要素の背景や前景の指定方法を紹介します：

1. color
2. background-color
3. background-image
4. background-repeat
5. background-attachment
6. background-position
7. background

color

プロパティ 'color' は、セレクタにマッチした対象の前景色を指定します。文字列を内容とする場合は、文字色の指定になります。

'color' は子要素に継承されます。デフォルトの値は、ユーザエージェントに依存します。inherit は、親要素の値を明示的に継承する指定です。<color> には、16 色の色名か、数字による指定が可能です。

プロパティ 'color' の例：

/* body 要素の前景色（文字色など）が黒 */
body { color: black }

/* h1 要素の前景色が赤 */
h1 { color: red }

/* p 要素の前景色が濃いグレー */
p { color: #333 }

/* strong 要素の前景色は親要素の値を継承 */
strong { color: inherit }

background-color

プロパティ 'background-color' は、セレクタにマッチした対象の背景色を指定します。

'background-color' は子要素に継承されません。デフォルトの値は透明を意味する transparent です。親要素の色が透過します。inherit は、親要素の値を明示的に継承する指定です。<color> には、16 色の色名か、数字による指定が可能です。

プロパティ 'background-color' の例：

/* body 要素の背景色を黒、前景色を白 */
body { color: white;
	background-color: black }

前景色と背景色は、同時に指定するようにしましょう。

background-image

プロパティ 'background-image' は、セレクタにマッチした対象の背景画像を指定します。

'background-image' は子要素に継承されません。デフォルトの値は、画像が存在しないことを意味する none です。inherit は、親要素の値を明示的に継承する指定です。<uri> には、画像の URI を指定します。CSS ファイルからの相対 URL か、絶対 URL を指定します。

プロパティ 'background-image' の例：

/* body 要素の背景色を黒、前景色を白、
   背景画像は一つ上のディレクトリ内の cover.png  */
body { color: white;
	background-color: black;
	background-image: url(../cover.png) }

背景画像を指定するときは、背景色も同時に指定するようにしましょう。背景画像が得られない場合は、背景色で表示され、背景画像が得られる場合は、背景色の上に画像が乗ることになります。

後で紹介する省略プロパティ 'background' を使えば、次のように指定できます：

/* body 要素の背景色を黒、前景色を白、
   背景画像は一つ上のディレクトリ内の cover.png  */
body { color: white;
	background: black url(../cover.png) }

background-repeat

プロパティ 'background-repeat' は、セレクタにマッチした対象の背景画像の繰り返し方法を指定します。

'background-repeat' は子要素に継承されません。デフォルトの値は、縦横方向に繰り返される repeat です。inherit は、親要素の値を明示的に継承する指定です。繰り返さない場合は no-repeat、横方向にだけ繰り返すには repeat-x、縦方向にだけ繰り返すには repeat-y を指定します。

プロパティ 'background-repeat' の例：

/* body 要素の背景色を黒、前景色を白、
   背景画像は一つ上のディレクトリ内の cover.png、
   背景画像は縦方向にだけ繰り返す  */
body { color: white;
	background-color: black;
	background-image: url(../cover.png);
	background-repeat: repeat-y }

background-attachment

プロパティ 'background-attachment' は、セレクタにマッチした対象の背景画像のスクロール方法を指定します。

'background-attachment' は子要素に継承されません。デフォルトの値は、文書のスクロールと一緒にスクロールする scroll です。inherit は、親要素の値を明示的に継承する指定です。前景物のスクロールに対して背景画像をウィンドウに固定するには fixed を指定します。

プロパティ 'background-attachment' の例：

/* body 要素の背景色を黒、前景色を白、
   背景画像は一つ上のディレクトリ内の cover.png、
   背景画像は縦方向にだけ繰り返す、
   背景はウィンドウに対して固定してスクロールしない  */
body { color: white;
	background-color: black;
	background-image: url("../cover.png");
	background-repeat: repeat-y;
	background-attachment: fixed }

background-position

プロパティ 'background-position' は、セレクタにマッチした対象の背景画像の位置の初期値を指定します。

'background-position' は子要素に継承されません。デフォルトの値は、文書の左上端を意味する 0% 0% です。inherit は、親要素の値を明示的に継承する指定です。

'background-position'プロパティの値は一つ、或は二つとります。

二つ取る場合

一つ目の値が左右、二つ目の値が上下を指定します。

一つ取る場合

左右の値と解釈され、上下は中央に表示されます。

値に許されるキーワードの意味は次のようになります。

top

画像の上端と、パッディング領域を含めた要素の上端が重なる指定です。単独で指定した場合、水平方向の位置は center と解釈されます。

left

画像の左端と、パッディング領域を含めた要素の左端が重なる指定です。単独で指定した場合、垂直方向の位置は center と解釈されます。

center

垂直方向としては、画像の縦方向の真ん中と、パッディング領域を含めた要素の縦方向の真ん中が重なるように表示されます。水平方向としては、画像の横方向の真ん中と、パッディング領域を含めた要素の真ん中が重なります。単独で指定した場合は、縦横双方に付いて center が指定されている基と解釈され、画像の中心と要素の中心が重なるように表示されます。

<length>

画像の左上端と、パッディング領域を含めた要素の左上端とのずれの大きさを指定します。

相対値指定の単位

• em: フォントの大きさ
• ex: 小文字の高さ
• px: ピクセル

絶対値指定の単位

• in: インチ。2.54 cm
• cm: センチメートル
• mm: ミリメートル
• pt: ポイント。1/72 インチ
• pc: ピカ。12 ポイント

<percentage>

当該要素のボックスを包含する包含ブロックの幅を 100% として指定します。

<percentage> 指定の場合に 100% として参照されるのは包含ブロックの幅です。ボックスモデルのパッディング領域の幅のことです。

0% 0% であれば、画像の左上端と包含ブロックの左上端が一致し、left top と一致します。100% 100% であれば、画像の右下端と包含ブロックの右下端が一致し、right bottom と一致します。10% 30% であれあば、画像の左から 10%、上から 30% の点が、包含ブロックの 左から 10%、上から 30% の点に一致します。50% 50% でれあば、画像の中央と包含ブロックの中央が一致するので、center と等価になります。

プロパティ 'background-position' の例：

/* body 要素の背景色を黒、前景色を白、
   背景画像は一つ上のディレクトリ内の cover.png、
   背景画像は縦方向にだけ繰り返す、
   背景はウィンドウに対して固定してスクロールしない、
   背景画像の初期位置は中央  */
body { color: white;
	background-color: black;
	background-image: url(../cover.png);
	background-repeat: repeat-y;
	background-attachment: fixed;
	background-position: center }

background

プロパティ 'background' は、背景指定の省略化プロパティです。

'background' は子要素に継承されません。デフォルトの値は、未定義です。inherit は、親要素の値を明示的に継承する指定です。

プロパティ 'background' の例：

/* body 要素の背景色を黒、前景色を白、
   背景画像は一つ上のディレクトリ内の cover.png、
   背景画像は縦方向にだけ繰り返す、
   背景はウィンドウに対して固定してスクロールしない、
   背景画像の初期位置は中央  */
body { color: white;
	background: black url(../cover.png) repeat-y fixed center }

不要な指定は必要ありません。例えば、次のように指定することが可能です。

/* 背景色を黒、背景画像は"../cover.png" */
body { color: white;
	background: black url(../cover.png) }