背景と色彩プロパティー

Background and Color Properties

• 色　　彩（Color）

• 背景色彩（Background Color）
• 背景画像（Background Image）
• 背景反復（Background Repeat）
• 背景飾り（Background Attachment）

• 背景位置（Background Position）

• 背　　景（Background）

色　　彩（Color）

colorプロパティーで、制作者が要素の色を特定できます。色彩値の説明は 単位セクションを見てください。色彩規則の例です：

H1 { color: blue }
H2 { color: #000080 }
H3 { color: #0c0 }

初期の頃のスタイル・シートユーザーとの衝突を回避するために、 backgroundと colorプロパティーは必ず一緒に特定すべきです。

背景色（Background Color）

background-colorプロパティーは要素の背景の色を設定します。例えば：

BODY { background-color: white }
H1   { background-color: #000080 }

ユーザーのスタイル・シートとの衝突を回避する手助けとして、 background-imageは、 background-colorが使われる時はいつも、特定されるべきです。多くの場合 background-image: noneが適しています。

制作者はまた短縮型であるbackgroundプロパティーを使い、これは background-colorプロパティよりも現在ではよくサポートされています。

背景画像（Background Image）

background-imageプロパティは要素の背景画像を設定します。例え：

BODY { background-image: url(/images/foo.gif) }
P    { background-image: url(http://www.htmlhelp.com/bg.png) }

背景画像が定義される場合、同じ background colorも、画像を読み込まないときのために、定義されるべきです。

制作者は短縮型である backgroundプロパティーも使い、このほうが現在では background-imageよりよくサポートされています。

背景の反復（Background Repeat）

background-repeatプロパティーは、特定された background imageがどの様に繰り返されるか決めます。 repeat-x値は画像を水平方向に繰り返し、一方 repeat-y値は画像を垂直方向に繰り返します。例えば：

BODY { background: white url(candybar.gif);
       background-repeat: repeat-x }

上の例で、画像は水平方向にだけ引き詰められています。

制作者は短縮型である backgroundプロパティーも使うかもしれませんし、これは background-repeatよりも現在ではよくサポートされています。

背景飾り（Background Attachment）

background-attachmentプロパティーは、特定された background imageが内容とともにスクロールするか画面に関して固定されているかを決めます。例えば、以下のものは固定された背景画像を特定しています：

BODY { background: white url(candybar.gif);
       background-attachment: fixed }

制作者は短縮型である backgroundプロパティーを使うかもしれませんし、このほうが現在では background-attachmentよりよくサポートされています。

背景位置（Background Position）

background-positionプロパティーは、特定された background imageの初期の位置を与えます。プロパティーは ブロック−レベル要素とそれに代る要素にだけ適用されます（ おき代えられる要素は内部次元のみが知っているものの一つです：HTMLでおき代えられる要素には IMG・ INPUT・ TEXTAREA・ SELECTそして OBJECTがあります）。

背景位置を割り当てる一番やさしい方法は、キーワードです：

• 水平キーワード（ left・ center・ right）
• 垂直キーワード（ top・ center・ bottom）

Percentagesとlengthsも、背景画像の位置を割り当てるのに使われます。パーセンテージは要素のサイズに対して相対的なものです。長さも許されますが、これらは異なる画面解像度の取り扱いの際継承性が弱いので推奨できません。

パーセンテージや長さを使う場合水平方向の位置が真っ先に特定され、続いて垂直方向の位置がとくていされます。 20% 65%といった値は、画像の20%以上65%以下の点が要素の20%以上65%以下の点に置かれることを特定します。 5px 10pxといった値は、画像の左上角が要素の右から5ピクセルそして上左から10ピクセル下に配置されることを特定します。

水平方向の値のみがあたえられた場合垂直位置は50%になります。長さとパーセンテーギの組み合わせはマイナス位置であるようにできます。例えば、 10% -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%

背景画像はキャンバス画面に対して固定(fixed)されている場合画像は要素にでなくキャンバス画面に相対的に配置されます。

制作者は短縮型である backgroundプロパティーも使え、これは現在では background-positionプロパティーよりよくサポートされています。

背景（Background）

backgroundプロパティーは、より特殊な背景関連プロパティ−の短縮型です。 background宣言の例を以下にあげます：

BODY       { background: white url(http://www.htmlhelp.com/foo.gif) }
BLOCKQUOTE { background: #7fffd4 }
P          { background: url(../backgrounds/pawn.png) #f0f8ff fixed }
TABLE      { background: #0c0 url(leaves.jpg) no-repeat bottom right }

特定化されていない値は、その初期値を受け取ります。例えば上のはじめから三つの規則では、 background-positionプロパティーは 0% 0%に設定されます。

ユーザーのスタイル・シートとの衝突を避ける手助けとして、 backgroundと colorは必ず一緒に特定されるべきです。

Maintained by John Pozadzides and Liam Quinn

CSSインケックス ‾ CSS構造 ‾ CSSプロパティー

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.