色と背景

目次

  1. 前景
  2. 背景
    1. 背景色
    2. 背景画像
    3. 背景の簡略化プロパティ

前景

colorプロパティは要素の前景色を指定します。値は<色>を取ります。このプロパティは文字の色の他、text-decorationプロパティで引かれる線の色などにも影響します。

例
em { color: red }

背景

CSSのボックスモデルにおいて「背景」という語は、内容領域、パディング、ボーダーの背景を指します。

HTML文書において、html要素のbackground-colorプロパティの算出値が"transparent"でbackground-imageプロパティが"none"であるなら、ユーザーエージェントはキャンバスの背景描画にbody要素のプロパティの算出値を使わなければならないという特別な規定があります。仕様書では、HTML文書の背景についてはhtml要素ではなくbody要素にプロパティを適用するよう推奨しています。(XHTML文書にこの規定はありません。)

背景色

背景色はbackground-colorプロパティで指定できます。値には<色>の他にキーワード"transparent"が指定できます。初期値は"transparent"です。

値に"transparent"を指定すると親ボックスの背景が透けて見えるので"inherit"で親要素の背景色を継承させるのと変わらないように思えますが、positionプロパティで位置決めすると、"transparent"なら下にあるボックスのボーダーや文字などが透けて見え、"inherit"なら親要素と同じ色で塗り潰されて見えないという違いが生じます。

例
body { background-color: #eee }

背景画像

背景に使う画像はbackground-imageプロパティで指定します。値は<URI>か"none"です。値が"none"の場合、もしくはURIで示された画像を表示できないときは、background-colorプロパティで示された色が前面に描画されます。また、背景画像の透明部分、背景画像のない部分もbackground-colorプロパティの色で塗りつぶされます。

例
body { background-image: url("back.png") }

background-repeatプロパティは、背景画像をどのように並べるのかを指定できます。値には以下のキーワードを指定します。初期値は"repeat"です。

repeat
画像を水平方向と垂直方向の両方にし敷き詰めて並べます。
repeat-x
画像を水平方向にし敷き詰めて並べます。
repeat-y
画像を垂直方向にし敷き詰めて並べます。
no-repeat
画像を繰り返して並べません。

background-attachmentプロパティは背景画像を包含ブロックに合わせてスクロールさせるか、表示域に対して固定するのかを指定します。指定できる値は次のキーワードです。

scroll
背景画像を包含ブロックとともにスクロールさせます。
fixed
背景画像は表示域に対して固定されます。

"fixed"にした場合、背景画像が見えるのはその画像が要素の内容領域、パディング領域、ボーダー領域に重なったときだけです。つまり、スクロールしてその要素が背景画像のない位置に移動すると、背景画像が見えなくなるということです。

background-positionプロパティは背景画像の表示開始位置を指定します。水平方向の位置、垂直方向の位置の順番に値を二つ指定します。値が一つのときは、水平方向のみの指定となり垂直方向の位置は"50%"になります。画像の配置はボックスのパディング辺を基準とします。

<パーセント値> <パーセント値>
パーセント値が指定された場合、そのパーセント値で表わされる背景画像の座標とボックスの座標を重ね合わせるようにして配置します。例えば、"50% 50%"であれば、画像の中央とボックスの中央とが重なり、ちょうどボックスの真ん中に画像が位置するようになります。パーセント値はパディング辺からの距離を表すのではありません。
<長さ> <長さ>
画像の左辺と左パディング辺の距離、画像の上辺と上パディング辺の距離を表します。

これらの他に、"left"、"right"、"top"、"bottom"、"center"のキーワードが使えます。"left"と"top"が"0%"、"right"と"bottom"が"100%"、"center"が"50%"に対応します。キーワードは水平・垂直方向のどちらを先にしてもよいことになっています。例えば、"left top"と"top left"は同値です。また、キーワードを一つだけにすることもでき、その場合指定されていない方向の値は"50%"になります。

<パーセント値>、<長さ>、キーワードはいっしょに使ってもよいことになっています。ただしその場合、"left"と"right"は一番目に、"top"と"bottom"は二番目に記述します。

例
body {
 background-color: white;
 background-image: url("back.png");
 background-repeat: no-repeat;
 background-position: 80% 70%
}

背景の簡略化プロパティ

backgroundプロパティは背景関連プロパティの簡略化プロパティです。値にはbackground-colorプロパティ、background-imageプロパティ、background-repeatプロパティ、background-attachmentプロパティ、background-positionプロパティで指定できる値を一つ以上指定します。指定されなかったプロパティについては初期値が設定されます。

例1
body { background: white url("back.png") }

背景色は"white"、背景画像は"back.png"となります。背景画像は左上から垂直・水平方向に繰り返し表示され、包含ブロックとともにスクロールします。

例2
body { background: white url("back.png") no-repeat fixed right bottom }

全て指定した例です。"back.png"を表示域の右下に一つだけ表示します。

Information