Cascading Style Sheets解説

Properties・色と背景関連

color 前景色（文字色）

値：

<color>

初期値：

UA依存

適用対象：

全要素

継承：

される

解説：

前景色（文字色）を指定します。色の指定方法については「色の指定方法」を参照してください。

例：

p{color: #808080}

background-color 背景色

値：

<color> | transparent

初期値：

transparent

適用対象：

全要素

継承：

されない

解説：

背景色を指定します。「transparent」=「透明」。

「transparent」を指定した場合、指定要素の背景は「透明」となり、親要素の背景がそのまま用いられます（親要素の背景が「透けて」表示される）。

色の指定方法については「色の指定方法」を参照してください。

例：

p{background-color: #80ffff}

background-image 背景イメージ

値：

<url> | none

初期値：

none

適用対象：

全要素

継承：

されない

解説：

背景画像を指定します。

<url>で指定するときは、その相対（又は絶対）URLを「url(」と「)」で囲んで指定します。同時に「background-color」プロパティで背景色も指定しておいた方が良いでしょう。

例：

body{background-image: url(sample.gif)}

background-repeat 背景繰り返しの制御

値：

repeat | repeat-x | repeat-y | no-repeat

初期値：

repeat

適用対象：

全要素

継承：

されない

解説：

背景画像の繰り返し方法を指定します。

例：

body{background-repeat: repeat-y}　/* 画像は縦方向に並んで表示されます */

background-attachment 背景のスクロールを制御

値：

scroll | fixed

初期値：

scroll

適用対象：

全要素

継承：

されない

解説：

背景画像のスクロールを制御します。「fixed」を指定した場合、文字をスクロールさせても背景画像はスクロールしません。

例：

body{background-attachment: fixed}　/* 背景画像は固定表示 */

background-position 背景位置

値：

[ <パーセント> | <単位指定> ]{1,2} | [ top | center | bottom ] || [ left | center | right ]

初期値：

0% 0%　（左上から表示開始、「top left」指定と同義）

適用対象：

ブロック要素と置換要素

継承：

されない

<パーセント>：

要素自身の表示サイズに対する比率

マイナス値：

可能

解説：

背景画像の表示開始位置を指定します。

パーセントや単位指定で1つだけ値を指定した場合、その値は水平方向の位置を指定したとみなされ、垂直方向の位置は自動的に50%に設定されます。2つの値を指定した場合は、1つ目の値が水平方向、2つ目の値が垂直方向の位置を表します。

例：

body{background-position: right}　/* 指定した要素の右側に表示されます */

background 一括指定

値：

<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>

初期値：

各プロパティの初期値

適用対象：

全要素

継承：

されない

解説：

関連するプロパティ（「background-color」、「background-image」、「background-repeat」、「background-attachment」、「background-position」）を一括で指定します。

例：

body{background: #000000 url(sample.gif) fixed}
　/* この場合「background-repeat」と「background-position」を省略しているので、初期値から「repeat」と「0% 0%」が指定される。 */

[Back(b)][Cover(c)]