BODY { color : #000000; } /*BODY要素のテキストカラーを黒*/ P { color : #333; } /*P要素のテキストカラーをグレー(#333333)*/
適用した要素のテキストの前景色を指定します。 値には、HTML同様RGB値とカラーネームが使用できます。その他にも指定方法があります。
BODY { background-color : #ffffff; } /*BODY要素の背景色を白*/ STRONG { background-color : rgb(128,128,128); } /*STRONG要素の背景色をグレー(#808080)*/
適用した要素の背景色を指定します。 値には、HTML同様RGB値とカラーネームが使用できます。その他にも指定方法があります。
BODY { background-image : url(../image/bgimage.gif); } /*BODY要素の背景に画像*/ TABLE { background-image : url(../image/tbimage.gif); } /*TABLE要素の背景に画像も可能*/
適用した要素の背景の画像を指定します。 指定するURLに相対パスで指定する場合は、スタイルシートからの相対パスで指定します。
BODY { background-image : url(../image/bgimage.gif); /*BODY要素の背景に画像*/ background-repeat : no-repeat; } /*背景画像を繰り返さず表示*/
適用した要素の背景画像の繰り返し方法について指定します。 ただし、背景画像が指定(background-image)されていなければ意味がありません。
BODY { background-image : url(../image/bgimage.gif); /*BODY要素の背景に画像*/ background-attachment : fixed; } /*背景画像をスクロールさせない*/
適用した要素のスクロールについて指定します。 指定は、スクロ−ルさせるか、させないかのみです。 ただし、背景画像が指定(background-image)されていなければ意味がありません。
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要素に対しての位置ではなく、 キャンバス(ブラウザの表示部分)に対する位置指定となります。
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要素の左上に画像左上を合わせる*/ }
背景画像についてのプロパティを一括で指定できるプロパティです。