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

Web作成支援

今週のおさらいバックナンバーはこちらから
第1号  第2号  第3号  第4号  第5号  第6号  第7号  第8号  第9号  第10号  第11号  第12号  第13号  第14号  第15号  第16号  第17号  第18号  第19号  第20号  第21号  第22号  第23号  第24号  第25号  第26号  第27号  第28号  第29号  第30号  第31号  目次

プレーンテキスト版バックナンバー

今週<第32号>マガジンのおさらい

                  毎週金曜日配信 What's New 2002/12/20
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
 今週の課題 ■ 背景の応用

背景

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

背景色の指定

属性 推奨サンプルページ
HTMLbgcolorColor code、Color Name× bgcolorサンプル
CSSbackground-colorColor code、Color Name background-colorサンプル

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

背景画像の指定

属性 推奨サンプルページ
HTMLbackground背景画像の URL× backgroundサンプル
CSSbackground-imgurl("背景画像の URL") background-imageサンプル

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

背景画像の表示方法(CSS)

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

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

  body { background-image: url("kabe.png"); 
         background-repeat: repeat-x }
背景画像が、左上から水平方向に1列だけ表示されます。

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

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

 body { background-image: url("kabe.png"); 
         background-repeat: repeat-y }
背景画像が、左上から垂直方向に1列だけ表示されます。

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

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

 body { background-image: url("kabe.png"); 
         background-repeart: no-repeat }
背景画像が、左上にひとつだけ表示されます。

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

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

  body { background-image: url("kabe.png"); 
         background-repeat: repeat-y;
         background-position: 50% }
背景画像をブラウザの左側から50%の位置で、垂直方向に1列表示されます。

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

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

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

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

  body { background-image: url("kabe.png"); 
         background-repeat: no-repeat;
         background-attachment: fixed }
背景を固定する background-attachment を指定する場合は、背景画像を繰り返表示をさせない background-repeat: no-repeat を併用して指定しなければなりません。

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

CSS: background-attachment: fixed サンプル

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

  body { background-image: url("kabe.png"); 
         background-repeat: no-repeat;
         background-attachment: fixed;
         background-position: 50% 50% }
背景画像をブラウザの左側から50%、上側から50%の位置で、1つだけ表示します。なお、%のほかに、ピクセル単位でも指定できます。

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

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

あまり使われることはありませんが、背景に用いる画像に透明化が施されている場合に、初めて効果があります。
属性推奨 サンプルページ
HTMLbgcolor background 併用× HTMLサンプル
CSSbackground-color background-img 併用 CSSサンプル

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

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

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

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



Copyright(C) 2002-2003 banban@scollabo.com