背景と色

Revised: Apr./4th/2006

背景や画像は、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 は、親要素の値を明示的に継承する指定です。前景物のスクロールに対して背景画像を UA (User Agent) の表示域(viewport、初期包含ブロック)に固定するには 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>

画像内の相対位置とパッディング領域を含めた要素内の相対位置が一致するように配置します。値が一つだけの場合は、水平方向の指定として解釈され、垂直方向は 50% とみなされます。つまり、水平方向は、画像の横幅を100%とする左辺からの比率と、パッディング領域の幅を100%とする左辺からの比率が一致するようにずらし、垂直方向は、画像の中央とパッディング領域の中央が一致するように配置します。

<percentage> 指定の定義は、'0% 0%' で画像が左上隅、'100% 100%' で右下角、'50% 50%' で中央になるように工夫されています。'm% n%' の場合は、画像の水平方向 m% で垂直方向 n% の点が、パデッディング領域の水平方向 m% で垂直方向 n% の点が一致します。

プロパティ '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 }

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

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