The Web Design Group

背景と色彩プロパティー

Background and Color Properties



色  彩(Color)

構文: color: <color>
初期値: ブラウザによって決められている
適用: 全ての要素
継承: 可能

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

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

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


背景色(Background Color)

構文: background-color: <value>
取りえる値: <color> | transparent
初期値: transparent
適用: 全ての要素
継承: 不可

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

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

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

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


背景画像(Background Image)

構文: background-image: <value>
取りえる値: <url> | none
初期値: 無し
適用: 全ての要素
継承: 不可

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: <value>
取りえる値: repeat | repeat-x | repeat-y | no-repeat
初期値: 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: <value>
取りえる値: scroll | fixed
初期値: scroll
適用: 全ての要素
継承: 不可

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

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

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


背景位置(Background Position)

構文: background-position: <value>
取りえる値: [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]
初期値: 0% 0%
適用: ブロック−レベルとそれに代る要素
継承: 不可

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

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

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

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

水平方向の値のみがあたえられた場合垂直位置は50%になります。長さとパーセンテーギの組み合わせはマイナス位置であるようにできます。例えば、 10% -2cmは許されます。しかし、パーセンテージと長さはキーワードと組み合わすことはできません。

キーワードはいかの様に解釈されます:

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

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


背景(Background)

構文: background: <value>
取りえる値: <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>
初期値: 未定義
適用: 全ての要素
継承: 不可

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%に設定されます。

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


Maintained by John Pozadzides and Liam Quinn


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

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