4-13-6a　背景色を設定

背景色を設定する方法です。background-colorプロパティを利用致します。（下記の見本では「body」部を全て一括で指定しております）。

<head> ～ </head> 内に記述して下さい。

<style type="text/css">
<!--
body {
background-color: #ffcccc; /* 背景色（薄いピンク） */
} -->
</style>

色を変更したい方は、「#ffcccc」（薄いピンク）を「#ffcc99」（薄いオレンジ）等に変更して下さい。

[ 関連事項 ： HP-TIPS > CSS > 外部スタイルシートの記述方法 ]

pagetop

4-13-6b　壁紙を設定する際も背景色は設定すること

CSSのコーナー 『1-3　スタイルシートによる背景指定の基本』 にも書きましたが、 壁紙を利用する場合も背景色は設定して下さい。 （壁紙の重さによっては、なかなかブラウザに表示されない場合があります）。

<style type="text/css">
<!--
body {
background-color :#ffcccc ; /* 背景色（薄いピンク） */
background-image : url(★) ;
}
-->
</style>

上記の書き方でページ一杯に壁紙が繰り返し表示されます。★部分に画像アドレスを設定して下さい。url(flower.gif); や　url(cake.jpg);　等でOKです。 （壁紙を右一列に表示したり、特定の場所に表示させたりする方法は 『2-1　壁紙の固定方法』 をご覧下さいませ）

色目の濃い壁紙を利用し文字色を淡い色合いにしていた場合、壁紙がすぐに読み込まれれば問題はありませんが、そうでない場合は壁紙が表示されない限りページの中身を読む事が出来ません（汗）。 そのような場合でも背景色に壁紙と同じ色合いを設定していれば、壁紙の読み込みが遅くても訪問者は苛立つ事無くページの中身を読む事が出来ます。


その他、特定のセレクタ（例：「body」、「p」等）に複数のプロパティ（「color」、「font-size」等）を設定する見本は 『4-9　見出しを修飾する』 をご覧下さい。

[ 関連事項 ： HP-TIPS > HPの作り方 > 用語集 > セレクタ ]
[ 関連事項 ： HP-TIPS > HPの作り方 > 用語集 > プロパティ ]

pagetop