ダイナミックＨＴＭＬ勉強会　第３回

バックに画像を表示する

●タグを使用した場合

bg1.gif　はこのような画像です。説明のための背景画像として使用します。

バックに画像を表示するには<body>タグに指定する事によって実現します

＜例１＞ファイル名：bg1.html
<html> <head> <title>bg1</title> </head> <body background="bg1.gif"> スクロールさせた場合バックの画像も一緒にスクロールします ブラウザにスクロ－ルバーが表示されていない場合は、ブラウザのウィンドウを 小さくして表示領域を小さくしてみてください このように表示されます ・ ・ ・ ・ ・ ・ ・ このように表示されます ・ ・ ・ ・ ・ ・ ・ このように表示されます ・ ・ ・ ・ ・ ・ ・ このように表示されます ・ ・ ・ ・ ・ ・ ・ このように表示されます </body> </html>

今度はバックの画像を動かないようにしてみます

＜例２＞ファイル名：bg2.html
<html> <head> <title>bg2</title> </head> <body background="bg1.gif" bgproperties="fixed"> bgproperties="fixed"を追加しただけですがスクロールさせた場合 バックの画像はスクロールせずに固定されたままになります ブラウザにスクロ－ルバーが表示されていない場合は、ブラウザのウィンドウを 小さくして表示領域を小さくしてみてください このように表示されます ・ ・ ・ ・ ・ ・ ・ このように表示されます ・ ・ ・ ・ ・ ・ ・ このように表示されます ・ ・ ・ ・ ・ ・ ・ このように表示されます ・ ・ ・ ・ ・ ・ ・ このように表示されます </body> </html>

●スタイルシートを使用した場合

スタイルシートを使用して＜例２＞と同じような効果を持たせてみます

＜例３＞ファイル名：bg3.html
<html> <head> <title>bg3</title> <style type="text/css"> body { background:url(bg1.gif) fixed} </style> </head> <body> スタイルシートを使用した場合でも同じような効果を簡単に実現できます バックの画像はスクロールせずに固定されたままになります ブラウザにスクロ－ルバーが表示されていない場合は、ブラウザのウィンドウを 小さくして表示領域を小さくしてみてください このように表示されます ・ ・ ・ ・ ・ ・ ・ このように表示されます ・ ・ ・ ・ ・ ・ ・ このように表示されます ・ ・ ・ ・ ・ ・ ・ このように表示されます ・ ・ ・ ・ ・ ・ ・ このように表示されます </body> </html>

画像を画面中央に１つだけ表示させて見ます

＜例４＞ファイル名：bg4.html
<html> <head> <title>bg4</title> <style type="text/css"> body { background:url(bg1.gif) fixed no-repeat center} </style> </head> <body> バックの画像は画面中央に１つだけ表示され スクロールせずに固定されたままになります ブラウザにスクロ－ルバーが表示されていない場合は、ブラウザのウィンドウを 小さくして表示領域を小さくしてみてください このように表示されます ・ ・ ・ ・ ・ ・ ・ このように表示されます ・ ・ ・ ・ ・ ・ ・ このように表示されます ・ ・ ・ ・ ・ ・ ・ このように表示されます ・ ・ ・ ・ ・ ・ ・ このように表示されます </body> </html>

画像を左端に縦に並べて表示してみます

＜例５＞ファイル名：bg5.html
<html> <head> <title>bg5</title> <style type="text/css"> body { background:url(bg1.gif) fixed repeat-y} </style> </head> <body> バックの画像は画面左端にたてに並べられて表示され スクロールせずに固定されたままになります ブラウザにスクロ－ルバーが表示されていない場合は、ブラウザのウィンドウを 小さくして表示領域を小さくしてみてください このように表示されます ・ ・ ・ ・ ・ ・ ・ このように表示されます ・ ・ ・ ・ ・ ・ ・ このように表示されます ・ ・ ・ ・ ・ ・ ・ このように表示されます ・ ・ ・ ・ ・ ・ ・ このように表示されます </body> </html>

テキストを画像に合わせて移動して表示します

＜例６＞ファイル名：bg6.html
<html> <head> <title>bg6</title> <style type="text/css"> body { background:url(bg1.gif) fixed repeat-y} p{margin-left:130px} </style> </head> <body> この文字列はマージン の対象になりません バックの画像は画面左端にたてに並べられて表示され スクロールせずに固定されたままになります また、テキストの表示部の左にマージンを設けました こうする事によってフレームや表を使用せずに 画面を２つの領域に区切って見せる事が出来ます ブラウザにスクロ－ルバーが表示されていない場合は、ブラウザのウィンドウを 小さくして表示領域を小さくしてみてください このように表示されます ・ ・ ・ ・ ・ ・ ・ このように表示されます ・ ・ ・ ・ ・ ・ ・ このように表示されます ・ ・ ・ ・ ・ ・ ・ このように表示されます ・ ・ ・ ・ ・ ・ ・ このように表示されます </body> </html>

今回は、例文ばかりになってしまいましたが、スタイルシートを使用すれば、文字の大きさ等を
気にすることなく指定したい位置にテキストを表示させたりする事ができ、ブラウザやOSごとに
表示のされ方が異なってしまうのを吸収する事が出来ます。もちろん、今回の例文はIEのみで
NNには対応していませんが、NNでもレイヤーを使用すれば同じような事が実現できます。

戻る　第４回へ

ダイナミックＨＴＭＬ勉強会 第３回

ダイナミックＨＴＭＬ勉強会　第３回