■ 背景

デフォルト（初期値）の背景の色は、特に指定がない場合はブラウザ依存となります。多くの視覚系ブラウザでは、ユーザ側で好みの背景色を指定することができます。

◆ 背景色の指定

	属性	値	推奨	サンプルページ
HTML	bgcolor	Color code、Color Name	×	bgcolorサンプル
CSS	background-color	Color code、Color Name	○	background-colorサンプル

HTML では、body、table、tr、td、th要素のみに適用できます。一方、スタイルシートでは、ヘッダ部に使用する要素を除いて、すべての要素に適用できます。

◆ 背景画像の指定

	属性	値	推奨	サンプルページ
HTML	background	背景画像の URL	×	backgroundサンプル
CSS	background-img	url("背景画像の URL")	○	background-imageサンプル

サンプルに用いた画像は、あくまでサンプルとして誇張したものです。誤解なきようお願いします。

◆ 背景画像の表示方法（CSS）

スタイルシートでは、背景画像の表示方法にさまざまなバリエーションがあり、工夫次第で面白い効果が表現できます。

水平方向への背景画像の指定

  body { background-image: url("kabe.png"); 
         background-repeat: repeat-x }

背景画像が、左上から水平方向に１列だけ表示されます。

CSS: background-repeat: repeat-x サンプル

垂直方向１列の背景画像の指定

　body { background-image: url("kabe.png"); 
         background-repeat: repeat-y }

背景画像が、左上から垂直方向に１列だけ表示されます。

CSS: background-repeat: repeat-y サンプル

背景画像を１つだけ表示させる

　body { background-image: url("kabe.png"); 
         background-repeart: no-repeat }

背景画像が、左上にひとつだけ表示されます。

CSS: background-repeat: no-repaet サンプル

背景画像の位置を指定する　その１

  body { background-image: url("kabe.png"); 
         background-repeat: repeat-y;
         background-position: 50% }

背景画像をブラウザの左側から50％の位置で、垂直方向に１列表示されます。

なお、％のほかに、ピクセル単位でも指定できます。

その他に、left（左）、right（右）、top（上）、bottom（下）、center（中央）などを使って指定することもできます。

CSS: background-position: 50% サンプル

背景画像を１つだけ固定して表示する

  body { background-image: url("kabe.png"); 
         background-repeat: no-repeat;
         background-attachment: fixed }

背景を固定する background-attachment を指定する場合は、背景画像を繰り返表示をさせない background-repeat: no-repeat を併用して指定しなければなりません。

固定された背景画像は、スクロールさせてもその位置にとどまり、一緒にはスクロールしません。

CSS: background-attachment: fixed サンプル

背景画像の位置を指定する　その２

  body { background-image: url("kabe.png"); 
         background-repeat: no-repeat;
         background-attachment: fixed;
         background-position: 50% 50% }

背景画像をブラウザの左側から50％、上側から50％の位置で、１つだけ表示します。なお、％のほかに、ピクセル単位でも指定できます。

CSS: background-position: 50% 50% サンプル

◆ 背景色と背景画像を同時に指定

あまり使われることはありませんが、背景に用いる画像に透明化が施されている場合に、初めて効果があります。

	属性	推奨	サンプルページ
HTML	bgcolor background 併用	×	HTMLサンプル
CSS	background-color background-img 併用	○	CSSサンプル

背景画像のサンプルを透明化して使用しています。

◆ インラインレベル要素の背景色の指定

スタイルシートはインラインレベル要素にも背景色が指定できる特徴をもっています。表示するテキストなどにポイントとなる部分に背景色を用いると効果的でしょう。

インラインレベル要素の背景色の表示サンプル

初心者のためのホームページ作り 第32号

■ 背景

初心者のためのホームページ作り　第32号