第6回 背景(壁紙)を貼る

| | コメント(0) | トラックバック(0)

前回までに作ったサンプルページの背景は白のままで、味気ない物でした。
一般のウエブページには壁紙と呼ばれている背景画像が貼ってある物を多く見かけます。
そこで今回はサンプルページにもその壁紙(背景画像)を入れてみます。

この背景画像の設置はスタイルシート(CSS)で行います。
実はHTMLファイルに直接記述して指定しても出来るのですが、デザインに関わる記述はCSSファイルでという原則に基づくのと、HTMLファイルが複数存在する場合(普通存在します。)CSSファイルの記述を一カ所変更するだけですべてのHTMLファイルの背景を変更できるのでやはりCSSファイルに記述した方が都合いと思います。

まずは画像を準備します。

次の5つの画像をダウンロード(ブラウザで画像を右クリックして「名前を付けて画像を保存」等)して、前回まで使用していた「20080808_01.html」や「cssフォルダ」と同じフォルダ(xhtml)内に「image」という名のフォルダを作り、その中に保存してください。

ここからまとめてダウンロードするこ事もできます。「20080819image.zip」となっておりますので、解凍後フォルダ名を「image」にリネームして所定の場所に保存して下さい。

001.jpg

001.jpg


002.gif

002.gif

003.jpg

003.jpg

004.gif


004.gif

 

005.gif

005.gif

では、では、早速「test.css」をエディタで開いて、前回までの記述の後に次の様に記述して保存したら、「20080808_01.html」をブラウザで開いてみて下さい。

--------------------------------------------------------------
body {
 background-image: url(../image/002.gif);
}
--------------------------------------------------------------

どうですか?
いままで真っ白で愛想のなかったページに「002.gif」のクローバーの画像が敷き詰められてウエブページぽくなったのではないでしょうか?

仕組みは全体を表すbody要素のバックグラウンドイメージに画像「002.gif」を指定したからです。
CSSの記述は上のとおり、セレクタをbodyとして、プロパティがbackground-image、値がurl(../image/002.gif)です。
このときに値の記述はurl(〜〜)の様にして画像ファイルを相対パス指定します。
相対パスについては重要ですので別の機会で詳しく説明するつもりですが、今のところはわからなくても問題ありません。

ここで不思議に思われた方がおられるかもしれません。指定した画像「002.gif」はクローバーが4つしか描かれていない小さな画像だったのに、ブラウザで見ると全面に敷き詰められたようになっていますね。
実は、そうなんです。通常壁紙に使う場合は最小限の画像を用意するだけでこのようにCSSに記述すると自動的に縦と横方向に繰り返して表示してくれるのです。

でも、背景に写真を一枚だけ表示したい場合とか横に一列や縦に一列にだけ表示したいなどで繰り返し表示したくない時もありますね。
その時はCSSファイルに次の赤字の一行を追加してみて下さい。

--------------------------------------------------------------
body {
 background-image: url(../image/002.gif);
 background-repeat: repeat-y;
}
--------------------------------------------------------------

これをブラウザで表示するとクローバーの画像が左側一列となり縦方向のみの繰り返しとなりました。

次はこの赤字に部分の最後の"-y"を"-x"に書き換えてブラウザで表示してみて下さい。

--------------------------------------------------------------
body {
 background-image: url(../image/002.gif);
 background-repeat: repeat-x;
}
--------------------------------------------------------------

今度は上一列になり横方向のみの繰り返しになりました。

それではついでに次のように書き換えてみて下さい。どうなるでしょうか?

--------------------------------------------------------------
body {
 background-image: url(../image/002.gif);
 background-repeat: no-repeat;
}
--------------------------------------------------------------

こんどは縦にも横にも繰り返しなし、つまり左上に一つだけの表示となりました。

では早速応用してみましょう。
bodyセレクタにつづく部分を次のように書き換えてブラウザで開いてみて下さい。
(画像の名前が代わっているので注意して下さい。)

--------------------------------------------------------------
body {
 background-image:url(../image/004.gif);
 background-repeat : repeat-x;
 background-attachment : fixed;
 background-position : left top;
 background-color : #ffff44;
}
--------------------------------------------------------------

これなら使えるのではないでしょうか?

background-image:url(../image/004.gif);
で上のクレヨンの画像「004.gif」を指定しています。

background-repeat : repeat-x;
で、横方向のみに繰り返しています。

 background-attachment : fixed;
で、画像を固定しています。
画像を固定とは、このHTMLファイル「20080808_01.html」の内容は短いのでスクロールバーがでませんが、縦長のページでスクロールしたときでも、そのスクロールに付いて画面から消えることなく、常に画面の一番上に画像が固定されます。
ちなみに、スクロールしたい場合はこの値「fixed」を「scroll」に変えてみて下さい。
今度は画面から消えるはずです。

(このHTMLファイル「20080808_01.html」では短くて効果が試せませんので試す場合は「

20080808_02.html」をダウンロードし、「20080808_01.html」と同じ場所に保存してブラウザで開いてみて下さい。)

 background-position : left top;
は画像の開始位置を指定しています。

background-positionプロパティは、背景画像の表示開始位置の指定で、背景画像の表示開始位置をleft,center,rightや、top,center,bottomといった位置を表すキーワードで指定したり、背景画像が表示される領域の左上からの距離を、横方向と縦方向の順で、%で指定したり(%値や数値で指定する場合には、値を横方向・縦方向の順にスペースで区切って指定します。)、数値にpxなどの単位をつけて指定したりできます。
つまり、写真を画面のど真ん中に表示させたい場合は

background-position : 50% 50%;

となります。

background-color : #ffff44;
で画面の背景色を指定しています。
(色の指定方法は第5回を参照して下さい。)

では問題です。
今度は「003.jpg」のクリスマスリースの画像を画面の右下に一つだけ固定で表示してみて下さい。

 

うまくいきましたか?

たぶんCSSは、こんな風になると思います。

--------------------------------------------------------------
body {
 background-image:url(../image/003.jpg);
 background-color : #ffffff;
 background-repeat : no-repeat;
 background-attachment : fixed;
 background-position : right bottom;
}
--------------------------------------------------------------

もう意味はおわかりかと思いますが、画像の位置は右下なので、
background-position : right bottom;
となりますね。

それと、今回は
background-color : #ffffff;
と背景色を白にしたのは、画像「003.jpg」の背景画像が透明でなくて白なので、
別に色にするとクリスマスリースの画像に周りに白い枠が見えてしまうからです。

これでもう壁紙はバッチリです。

ところで、この「background-〜」プロパティは「body」セレクタ以外にも使えます。
今回は少し長くなってしまいますが、ついでに説明します。

たとえば「test.css」にh1の記述があると思いますが、そこに次の赤字2行を追加記述して保存して、ブラウザで表示してみて下さい。

--------------------------------------------------------------
h1 {
 color: red;
 font-size: 250%;
 font-family: Arial,Verdana,"MS Pゴシック",sans-serif;
 background-image:url(../image/001.jpg);
 background-repeat : no-repeat;

}
--------------------------------------------------------------

h1見出しに背景が付いたと思います。

これは、「001.jpg」という画像を繰り返しなしで一つだけ背景画像として表示させてものです。
では、次のようにしてらどうでしょうか?

--------------------------------------------------------------
h1 {
 color: red;
 font-size: 250%;
 font-family: Arial,Verdana,"MS Pゴシック",sans-serif;
 background-image:url(../image/005.gif);
}
--------------------------------------------------------------

画像を入れ替えて(画像は私が適当に用意したためにjpgの物とgifの物が混在しております。記述の際には拡張子にご注意下さい。)縦、横共に繰り返すように記述したので、「005.gif」という小さな画像が繰り返されて帯のようになったかと思います。
勿論、bodyやh1セレクタ以外にも適用できますので、とりあえずはh1の下にあるh2とかでも試してみて下さい。

今回は背景画像について説明しました。
さらに詳しく知りたい場合は、Googleとかで「background- css」などと入力して検索してみて下さい。
いろいろわかると思います。

次回につづく。 

トラックバック(0)

このブログ記事を参照しているブログ一覧: 第6回 背景(壁紙)を貼る

このブログ記事に対するトラックバックURL: http://kumao.net/mt/mt-tb.cgi/42

コメントする

KUMAOの押入TOPへ

カウンタ

アーカイブ

ウェブページ

ブログランキング・にほんブログ村へ

このブログ記事について

このページは、kumaoが2008年8月19日 09:31に書いたブログ記事です。

ひとつ前のブログ記事は「第5回 いよいよCSS」です。

次のブログ記事は「第7回 ../image/002.gif とは?」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

books