Part 1. Let's begin CSS : Chapter 3. “要素の整形”

3.8 背景(1)

 背景のうち,背景色に関しては 1.4 で述べた。ここからは,背景色について復習しながら,他の背景に関するプロパティを見ていこう。

背景色:background-color プロパティ

 background-color プロパティ に関しては Chapter 1 で解説した。ここでは,背景色と,ここまで解説したボックスの各部分との関係を復習しておく。

 背景色は,ボックスのを含めた内側に適用される。具体的には,要素の内容の部分,パディング部分,そして枠の部分(ただし,枠のスタイルが dotteddashed または double のときに枠線の間に背景が適用され,枠の色が transparent のときに枠が透過して背景色が見えるという形になる)。マージンの部分には背景色は適用されず,つねに背景色が“透過”に指定されているのと同じになる。

背景画像:background-image プロパティ

 CSS では,あらゆる要素に背景色を適用させることができるが,背景画像も同様にあらゆる要素に適用できる。背景画像を指定するのは,bakground-image プロパティである。

background-image: url(URI);
background-image: none;

 このプロパティは,

  • すべての要素に適用される。
  • 初期値は,キーワード none である。
  • プロパティの値は,継承されない。

 url(...) のかっこ内に与えるのは,背景画像の URI である。URI は,単一引用符「'」または二重引用符「"」でくくってもよい(ただし,URI がかっこを含む場合には引用符でくくらなくればならない。また,URI が引用符を含む場合でも,区別できるように引用符でくくる必要がある)。URI 相対指定する場合は,その宣言が書かれている URI が基準になる(たとえば,その宣言が書かれているファイルが A,その宣言を B というファイルで(LINK 要素などで)呼び出している場合でも,基準となる URI は A となる)。

 URI で指定された画像が読み込めれば,その画像は背景色に重ねられる(背景画像が透過 GIF ならば,透過色の部分は背景色になる)。画像が読み込めなければ,画像を表示せずにそのまま処理を続ける(このような場合も考えられるので,背景画像がない場合でも支障のないように背景色を指定しておく必要があるだろう)。

 キーワード none を指定した場合は,背景画像は指定されない。

 背景画像の例を見てみよう。

H3 { border-bottom: 2px solid #960; padding: 0.3em; }
P { padding: 0.3em; background-image: url(f_bg_blk.gif); background-color: #FFF; /* 画像が読めないときのために,画像に似た色合いを背景色として指定しておく */ }

<H3>DHCP(動的ホスト構成プロトコル)</H3>
<P>DHCP(動的ホスト構成プロトコル)は,クライアントの IP アドレスなどの情報を,DHCP サーバから供給するものである。これによって,“Ethernet のコネクタを差し込むだけで”インターネットへの接続が可能になっている。</P>

DHCP(動的ホスト構成プロトコル)

DHCP(動的ホスト構成プロトコル)は,クライアントの IP アドレスなどの情報を,DHCP サーバから供給するものである。これによって,“Ethernet のコネクタを差し込むだけで”インターネットへの接続が可能になっている。

背景画像の固定/スクロール:background-attachment プロパティ

 background-attachment プロパティは,背景画像を視点(ここではブラウザのウィンドウとみてよい)に対して固定するか,それとも視点にあわせてスクロールさせるかを指定する。

background-attachment: キーワード;

 このプロパティは,

  • すべての要素に適用される。
  • 初期値は,キーワード scroll である。
  • プロパティの値は,継承されない。

 キーワードは,次のいずれかを与える。

scroll
背景画像を,視点の移動に合わせてスクロールさせる(ブラウザのスクロールにあわせてスクロールさせる)。
fixed
背景画像は,視点に対して固定される(ブラウザのウィンドウの内容をスクロールさせても,背景画像は動かない。

 このプロパティは,fixed を指定しても scroll として処理するブラウザもある。また,HTML の HTML および BODY 要素にのみ fixed の指定が有効になるブラウザもある。

 backgropund-image プロパティの例を書き換えて,background-attachment プロパティの挙動をみてみよう。

H3 { border-bottom: 2px solid #960; padding: 0.3em; }
TEXTAREA { padding: 0.3em; background-image: url(f_bg_blk.gif); background-color: #FFF; }
#bg_scroll { background-attachment: scroll; }
#bg_fixed { background-attachment: fixed; }

<H3>DHCP(動的ホスト構成プロトコル)</H3>
<P><TEXTAREA COLS="60" ROWS="2" ID="bg_scroll">DHCP(動的ホスト構成プロトコル)は,クライアントの IP アドレスなどの情報を,DHCP サーバから供給するものである。これによって,“Ethernet のコネクタを差し込むだけで”インターネットへの接続が可能になっている。</TEXTAREA>
<BR>
<TEXTAREA COLS="60" ROWS="2" ID="bg_fixed">DHCP(動的ホスト構成プロトコル)は,クライアントの IP アドレスなどの情報を,DHCP サーバから供給するものである。これによって,“Ethernet のコネクタを差し込むだけで”インターネットへの接続が可能になっている。</TEXTAREA></P>

DHCP(動的ホスト構成プロトコル)


NN6
background-attchment プロパティのキーワード fixed は,(HTML においては)BODYHTML)要素でのみしか有効にならない。