SITEMAP [初めてのホームページ講座] [CSS] [CSS1] [プロパティ一覧] [色と背景]

CSS1 Reference

プロパティ

2. 色と背景


2-1. color

<color>
初期値
ブラウザ標準
適用要素
全て
継承性
有り
割合指定
無し
BODY { color : #000000; }   /*BODY要素のテキストカラーを黒*/
P    { color : #333; }      /*P要素のテキストカラーをグレー(#333333)*/

適用した要素のテキストの前景色を指定します。 値には、HTML同様RGB値とカラーネームが使用できます。その他にも指定方法があります。

[Go To Top]

2-2. background-color

<color> | transparent
初期値
transparent
適用要素
全て
継承性
無し
割合指定
無し
BODY   { background-color : #ffffff; }            /*BODY要素の背景色を白*/
STRONG { background-color : rgb(128,128,128); }   /*STRONG要素の背景色をグレー(#808080)*/

適用した要素の背景色を指定します。 値には、HTML同様RGB値とカラーネームが使用できます。その他にも指定方法があります。

transparent
透明を意味します。BODY要素の透明は通常「白」です。
[Go To Top]

2-3. background-image

<url> | none
初期値
none
適用要素
全て
継承性
無し
割合指定
無し
BODY  { background-image : url(../image/bgimage.gif); }   /*BODY要素の背景に画像*/
TABLE { background-image : url(../image/tbimage.gif); }   /*TABLE要素の背景に画像も可能*/

適用した要素の背景の画像を指定します。 指定するURLに相対パスで指定する場合は、スタイルシートからの相対パスで指定します。

[Go To Top]

2-4. background-repeat

repeat | repeat-x | repeat-y | no-repeat
初期値
repeat
適用要素
全て
継承性
無し
割合指定
無し
BODY  { background-image  : url(../image/bgimage.gif);   /*BODY要素の背景に画像*/
        background-repeat : no-repeat; }                 /*背景画像を繰り返さず表示*/

適用した要素の背景画像の繰り返し方法について指定します。 ただし、背景画像が指定(background-image)されていなければ意味がありません。

repeat
縦・横方向とも繰り返し
repeat-x
横方向のみ繰り返し
repeat-y
縦方向のみ繰り返し
no-repeat
繰り返さない(単体)
[Go To Top]

2-5. background-attachment

scroll | fixed
初期値
scroll
適用要素
全て
継承性
無し
割合指定
無し
BODY  { background-image      : url(../image/bgimage.gif);  /*BODY要素の背景に画像*/
        background-attachment : fixed; }                    /*背景画像をスクロールさせない*/

適用した要素のスクロールについて指定します。 指定は、スクロ−ルさせるか、させないかのみです。 ただし、背景画像が指定(background-image)されていなければ意味がありません。

scroll
スクロールさせる
fixed
スクロールさせない
[Go To Top]

2-6. background-position

[<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]
初期値
0% 0%
適用要素
ブロックレベル要素、置換要素
継承性
無し
割合指定
要素に依存
BODY{
   background-image    : url(../image/bgsample.gif);  /*BODY要素の背景画像を指定*/
   background-repeat   : no-repeat;                   /*繰り返し表示しない*/
   background-position : 0% 0%;                       /*BODY要素の左上に画像左上を合わせる*/
}

指定する値によって、解釈される内容が異なるので注意が必要です。 指定は、「横方向の位置」「縦方向の位置」の順で、1つのみ指定した場合は、横縦方向が同じになります。 また、画像の位置は指定した要素の内容(paddingで指定した)部分になり、マージンは無視されます。

具体的な例を下表に示します。

指定した値左位置上位置等価な指定方法サンプル
0% 0%画像左を要素左画像上を要素上top left , left top 参照
50% 0%画像横中央を要素横中央画像上を要素上top , top center , center top 参照
100% 0%画像右を要素右画像上を要素上right top , top right 参照
0% 50%画像左を要素左画像縦中央を要素縦中央left , left center , center left 参照
50% 50%画像横中央を要素横中央画像縦中央を要素縦中央center , center center 参照
100% 50%画像右を要素右画像縦中央を要素縦中央right , right center , center right 参照
0% 100%画像左を要素左画像右を要素右bottom left , left bottom 参照
50% 100%画像横中央を要素横中央画像右を要素右bottom , bottom center , center bottom 参照
100% 100%画像右を要素右画像右を要素右bottom right , right bottom 参照
20% 70%画像左から20%を要素左から20%画像上から70%を要素上から70% 参照

単位の組み合わせは可能ですが、値に文字列(leftなど)と数値を組み合わせることはできません。 また、BODY要素の背景画像として使用し、しかもスクロール固定(background-attachment)されていた場合は、BODY要素に対しての位置ではなく、 キャンバス(ブラウザの表示部分)に対する位置指定となります。

top
画像上を要素上に合わせる
center
画像縦中央を要素縦中央に合わせる
bottom
画像下を要素下に合わせる
left
画像左を要素左に合わせる
center
画像横中央を要素横中央に合わせる
right
画像右を要素右に合わせる
[Go To Top]

2-7. background

<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>
初期値
各プロパティ参照
適用要素
全て
継承性
無し
割合指定
background-positionのみ有効
BODY{
   background : #cccccc url(../image/bgsample.gif) no-repeat fixed 0% 0%;
   /*下の例と等価*/
}
BODY{
   background : #cccccc url(../image/bgsample.gif) no-repeat fixed 0% 0%;
   background-color      : #cccccc;                     /*背景色をグレー(この場合は画像がないときに有効)*/
   background-image      : url(../image/bgsample.gif);  /*BODY要素の背景画像を指定*/
   background-repeat     : no-repeat;                   /*繰り返し表示しない*/
   background-attachment : fixed;                       /*スクロールさせない*/
   background-position   : 0% 0%;                       /*BODY要素の左上に画像左上を合わせる*/
}

背景画像についてのプロパティを一括で指定できるプロパティです。

[Go To Top]

Last modified Apr,2002
Copyright(C)1999 Miyazaki , All Rights Reserved.