★このページでは、CSSの基本的な仕様について解説しています。
動作確認されているのはIE6.0のみですので、それ以外のバージョン、ブラウザでは正しく表示されない場合があります。
|
初級篇★ページ作りの基礎知識２. スタイルシートを使ってみよう VOL6. 背景に関する設定 その1 ★ 背景の色と画像
スタイルシートで要素を設定すると box が形成されることは先にお話しましたが、その要素に設定された背景色、もしくは背景画像が表示されるのは、内容領域、パディングまでの範囲で、マージンは常に透明となります。従ってマージン部分は、それを含む親要素があれば、その色もしくは画像が透過された状態で表示されます。例えば<body>〜</body>内に<p>〜</p>が記述されているような場合、<body>は<p>の親要素となるので、<p>のマージン部分には<body>での背景指定が反映されることになるわけです。
１．背景色を指定する background-color: <色指定>; 背景色はRGB値、色名（システムカラー含む）、もしくは「transparent（透明）」で指定することができます。「transparent」を指定すると、その要素を含む親要素で指定された背景があれば、それが透過して表示されることになります。 （スタイルシートで使える色指定について詳しくは「Column 8.スタイルシートと色指定」を参照して下さい。） ex. body { background-color: #0000ff; }
２．背景画像を指定する background-image: url("画像ファイル名"); 背景画像は、そのスタイルシートが記述されているファイルから画像までの相対URL（相対パス）によって指定します。スタイルシートと同じフォルダに画像がある時は画像ファイル名のみで構いません。（「相対パス」について詳しくは「Column 1. 「相対パス」と「絶対パス」を参照して下さい。） ex. background-image: url("../../checker.jpg")
画像ファイル名の変わりに<値>を「none」に指定することも出来ます。これはデフォルトで、このプロパティを記述しなかったり、「none」を指定したりすると画像は表示されません。従って、背景色で「transparent」を指定した時同様、その要素を含む親要素で指定された背景があれば、それが透過して表示されることになります。 なお、背景画像を設定した時、文字をその画像の色調に合わせて見やすいものに指定することがありますが、画像が大きくてダウンロードに時間がかかったり、ユーザーの環境によっては画像が表示されなくなっている場合もあります。そうすると文字が見えないということも起こり得ますので、これを想定して文字色に合った背景色を指定しておくことも必要になるでしょう。
|
2007.1.17.
