14 色及び背景

CSS特性によって,文書作成者は、要素の前景の色及び背景の色を指定できる。背景は色であっても,画像であってもよい。背景特性によって,文書作成者は背景画像に位置指定を行い,それを繰り返すことができ,さらに表示域に関してそれを固定するのがよいか,文書とともにスクロールするのがよいかを宣言できる。

有効な色値の構文については,色単位を参照されたい。

14.1 前景の色('color' 特性)

'color'
値:  <color> | inherit
適用対象:  すべての要素
継承:  する
パーセント値:  N/A
メディア:  視覚メディア
初期値:  利用者エージェントに依存する

この特性は,要素のテキスト内容の前景の色を記述する。赤を指定するにも, 次の異なる方法が存在する。

EM { color: red }              /* predefined color name */
EM { color: rgb(255,0,0) }     /* RGB range 0-255   */

14.2 背景

文書作成者は,要素の背景(すなわち,レンダリング面)を色又は画像のどちらかとして指定できる。ボックスモデルに関しては,"背景"は,内容領域及びパディング領域の背景を表す。境界色及びスタイルは,境界特性を用いて設定される。マージンは常に透明なので,親ボックスの背景は常に透けて見える。

背景特性は継承されないが,'background-color'の初期値が'transparent'であるため,デフォルトで親ボックスの背景は透けて見える。

ルート要素が生成するボックスの背景は,描画面全体を覆う。

しかし,HTML文書の場合, 文書作成者がHTML要素ではなくてBODY要素に関して背景を指定することを推奨する。利用者エージェントは, 次の優先規則を遵守して,背景を埋めることが望ましい。HTML要素に関する'background'特性の値が'transparent'ではない場合は,その値を使用し,それ以外の場合は,BODY要素に対する'background'特性の値を使用する。その結果の値が'transparent'となる場合は, レンダリングは定義されない。

これらの規則によって, 次のHTML文書の背景にある描画面は"マーブル"になる。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Setting the canvas background</TITLE>
    <STYLE type="text/css">
       BODY { background: url("http://style.com/marble.png") }
    </STYLE>
  </HEAD>
  <BODY>
    <P>My background is marble.
  </BODY>
</HTML>

14.2.1 背景特性( 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position'及び'background')

'background-color'
値:  <color> | transparent | 継承
初期値:  transparent
適用対象:  すべての要素
継承:  しない
パーセント値:  N/A
メディア:  視覚メディア

この特性は,要素の背景の色を,<color>値,又は背景にある色を透けて見せるためのキーワード'transparent'のどちらかに設定する。

H1 { background-color: #F00 }
'background-image'
値:  <uri> | none | inherit
初期値:  none
適用対象:  すべての要素
継承:  しない
パーセント値:  N/A
メディア:  視覚メディア

この特性は, 要素の背景画像を設定する。背景画像を設定する場合,文書作成者は,画像が利用できないときに使用する背景の色も指定することが望ましい。画像が利用できるとき,背景の色の上に画像がレンダリングされる。したがって,画像の透明な部分では背景の色が透けて見える。

この特性の値は,画像を指定するための<uri>であるか, 画像を使用 しない場合の'none'であるかのどちらかとする。

BODY { background-image: url("marble.gif") }
P { background-image: none }
'background-repeat'
値:  repeat | repeat-x | repeat-y | no-repeat | inherit
初期値:  repeat
適用対象:  すべての要素
継承:  しない
パーセント値:  N/A
メディア:  視覚メディア

背景画像が指定される場合, この特性は,画像が繰り返される(タイル状に敷き詰められる)かどうかを指定し,どのように繰り返されるかを指定する。 ボックスの内容領域及びパディング領域がすべてタイル状に覆われる。 値は, 次の意味をもつ。

repeat
上下方向にも左右方向にも画像を繰り返す。
repeat-x
左右方向だけに画像を繰り返す。
repeat-y
上下方向だけに画像を繰り返す。
no-repeat
画像を繰り返さない。画像の1コピーだけが描かれる。

BODY { 
  background: white url("pendant.gif");
  background-repeat: repeat-y;
  background-position: center;
}

A centered background image,
with copies repeated up and down the padding and content areas.   [D]

背景画像のコピーを1枚中央に配置し,その他のコピーを その上下に配置して,要素の背景に上下に帯を形成する。

'background-attachment'
値:  scroll | fixed | inherit
初期値:  scroll
適用対象:  すべての要素
継承:  しない
パーセント値:  N/A
メディア:  視覚メディア

背景画像が指定される場合,この特性は,背景画像が表示域に関して固定されるのか('fixed'),文書とともにスクロールされるのか('scroll')を指定する。

画像が固定される場合でも, 画像が見えるのは,要素の背景又はパディングの領域の中に限られる。したがって,画像がタイル状に敷き詰め('background-repeat: repeat')られない場合には,見えなくなることがある。

次の例は,要素がスクロールされる場合に,表示域に"貼りついた"ままの 無限の上下の帯を生成する。

BODY { 
  background: red url("pendant.gif");
  background-repeat: repeat-y;
  background-attachment: fixed;
}

利用者エージェントは'fixed'を'scroll'として処理してもよい。しかし, 文書作成者が画像を'fixed'をサポートするブラウザだけに提供する方法がないため, 利用者エージェントは,少なくともHTML要素及びBODY要素については, 'fixed'を正確に解釈することを推奨する。 詳細については適合性を参照のこと。

'background-position'
値:  [ [<percentage> | <length> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit
初期値:  0% 0%
適用対象:  ブロックレベル要素及び 置換要素
継承:  しない
パーセント値:  ボックス自体のサイズ を参照
メディア:  視覚メディア

背景画像が指定されている場合, この特性はその初期位置を指定する。 値は, 次の意味をもつ。

<percentage> <percentage>
値が '0% 0%'の組のとき,画像の左上隅をボックスのパディング辺の左上隅に揃える。値が '100% 100%'の組のとき,画像の右下隅をパディング領域の右下隅に揃える。 値が'14% 84%'の組のとき,画像の左から14%,上から84%の点を パディング領域の左から14%,上から84%の点に揃える。
<length> <length>
値が'2cm 2cm'の組のとき, 画像の左上隅を,パディング領域の左上隅から右に2cm,上から2cmの点に揃える。
top left 及び left top
'0% 0%'と同じ。
top, top center, 及び center top
'50% 0%'と同じ。
right top 及び top right
'100% 0%'と同じ。
left, left center, 及び center left
'0% 50%'と同じ。
center 及び center center
'50% 50%'と同じ。
right, right center, 及び center right
'100% 50%'と同じ。
bottom left 及び left bottom
'0% 100%'と同じ。
bottom, bottom center, 及び center bottom
'50% 100%'と同じ。
bottom right 及び right bottom
'100% 100%'と同じ。

パーセント値又は長さの値が一つだけ提供される場合は, 左右位置だけを設定し,上下位置は50%とする。二つの値が提供される場合は, 左右位置を最初に設定する。'50% 2cm'など,長さの値とパーセントの値とを組み合わせてもよい。負の値も使用できる。キーワードを, パーセント値又は長さの値と組み合わせることはできない。可能な組合せのすべては, 前述のとおりとする。

例:

BODY { background: url("banner.jpeg") right top }    /* 100%   0% */
BODY { background: url("banner.jpeg") top center }   /*  50%   0% */
BODY { background: url("banner.jpeg") center }       /*  50%  50% */
BODY { background: url("banner.jpeg") bottom }       /*  50% 100% */

背景画像が表示域内に固定される場合('background-attachment' 特性を参照)は, 画像は, 要素のパディング領域ではなく, 表示域に対して相対的に配置される。 その例を次に示す。

BODY { 
  background-image: url("logo.png");
  background-attachment: fixed;
  background-position: 100% 100%;
  background-repeat: no-repeat;
} 

この例では, (単独の)画像が表示域の右下隅に配置される。

'background'
値:  [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherit
初期値:  簡略記述特性については定義されない
適用対象:  すべての要素
継承:  しない
パーセント値:   'background-position'で使用できる
メディア:  視覚メディア

'background'特性は, 各背景特性(即ち, 'background-color', 'background-image', 'background-repeat', 'background-attachment' 及び 'background-position')をスタイルシートの同じ位置に設定するための簡略記述特性とする。

'background'特性は,まず各背景特性をすべてその初期値に設定し, それから宣言で提供される明示的な値を割り当てる。

例:

次の例の最初の規則では,'background-color'に関する値だけが提供され,その他の各特性はその初期値に設定される。2番目の規則では, すべての各特性が指定されている。

BODY { background: red }
P { background: url("chess.png") gray 50% repeat fixed }

14.3 ガンマ補正

ガンマの課題に関する情報については, PNG規定([PNG10])のGamma Tutorialを参照されたい。

ガンマ補正の計算では, CRTに表示するUAは理想的なCRTを想定してよく,ディザ化によって生じる見かけのガンマへの影響を無視してもい。すなわち,現プラットフォームで行わなければならない最小処理は, 次のとおり。

MS-Windowsを使用するPC
なし
X11を使用するUnix
なし
QuickDrawを使用するMac
ガンマ1.45[ICC32]を適用。ColorSync-savvyアプリケーションは,正確な色補正を実行するために,単にsRGB ICCプロファイルをColorSyncに渡すだけでよい。
Xを使用するSGI
/etc/config/system.glGammaValからのガンマ値を適用。デフォルト値は1.70とする。Irix 6.2以降で動作するアプリケーションは,単にsRGB ICCプロファイルを色管理システムに渡すだけでよい。
NeXTStepを使用するNeXT
ガンマ2.22を適用。

"ガンマを適用"とは,OSで処理される前に,三つのR, G及びBのそれぞれが R'=Rgamma, G'=Ggamma, B'=Bgammaに変換されなければならないことを意味する。

これは,ブラウザの起動の都度,256要素の照合表を次のとおり構築することによって,迅速に実行してもよい。

for i := 0 to 255 do
  raw := i / 255.0;
  corr := pow (raw, gamma);
  table[i] := trunc (0.5 + corr * 255.0)
end

この処理によって,色属性ごとの面倒な数学的処理の実施を,1画素当りはるかに小さいものとすることができる。