HTML編 25/51
| 目的別 index | タグ別 index | カラーチャート | images | SAMPLE |
画像を表示する
背景に画像を入れる
同じ画像は使い回しする




背景に画像を入れる

●<BODY BACKGROUND="n">
ブラウザ全体に画像を入れたい場合、BODYタグ内にBACKGROUNDオプションを入れることで可能です。パラメータには言わずもがな(笑)相対パスを入れます。ここに入れた画像はブラウザの左上ヘリから表示され、ブラウザのサイズが画像より大きい場合は、タイリング(無限に繰り返して表示)されます。いわゆる「壁紙」と呼ばれているヤツですね。背景に画像を入れた場合、この画像はあくまで背景ですので、上に文字を入れたり、さらに画像を配置したり出来ます。もちろん画像ですから文字に比べて表示に時間がかかるので、軽いデータにするべきです。2色くらいのGIF画像をタイリングして、地紋として使うのが一般的な使い方です。その場合、繰り返された時に、つなぎ目がおかしくならないように画像を作らないとなりません。また、あまりうるさい模様を使うと、肝心の中身が読みづらくなります。例えばこんな画像を背景に敷いてみると、Viewなんだか、気持ち悪いですね(笑)。さりげない柄と配色にとどめて使いましょう。
一つ注意しておきたいのは、背景画像は確かに軽いに越したことはないのですが、軽いからといって極端に小さな画像を敷き詰めてしまうと、小さな画像を広い面積に沢山配置しなければならなくなり、かえって表示が遅くなることがあることです。たまに数ピクセル程度の大きさの画像を敷き詰めているページを見かけますが、あれではかえって表示が遅くなります。ご注意を。
さて、ここでは「タイリングされるのは、ブラウザの大きさより画像が小さい場合」という条件を生かして、大型のモニタより横に長い画像をタイリングしました。「BGtop.gif」という画像です。Viewこの画像を背景に敷くことでブラウザの左ヘリだけに模様を付けることができます。

<BODY BGCOLOR="#ececec" BACKGROUND="img/BGtop.gif">

どうでしょう。これもちょとしたアイデア次第で色々応用がききそうですね。もちろん、縦に長い画像を使えば上ヘリにだけ模様が付けられます。
もう一つ注意しておきたいのは、背景画像を使う場合「どうせその画像の色でブラウザの背景は塗られてしまうのだから、BODYタグにはBGCOLORの指定はいらないのでは?」という問題です。確かにその通りなのですが、仮に背景画像とリンクが切れた場合はもちろん、画像の表示に時間がかかる場合などは、背景画像が表示されるまでの間はBGCOLORの色が表示されます。無駄だと思わないで、BGCOLORの指定も同時にしておいた方が無難だと思います。
View
<HTML>
<HEAD>
<TITLE>ようこそ!Kimura's Roomへ</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS">
</HEAD>
<BODY BGCOLOR="#ececec"
BACKGROUND="img/BGtop.gif">

<CENTER>
<!--★★全体をセンターにするためのテーブル★★-->
<TABLE BORDER="0" ALIGN="center" CELLPADDING="0" CELLSPACING="0" WIDTH="97%" HEIGHT="97%">
<TR>
<TD ALIGN="center" VALIGN="middle">

<!--★★ここから内容★★-->
<H2>ようこそ!</H2>
<HR SIZE="5" WIDTH="321">

<!--★★ロゴ★★-->
<IMG SRC="logo.jpg" WIDTH="321" HEIGHT="42" ALT="Kimura's Room" BORDER="0"><BR>

<!--★★四角のグラデーション部分ここから★★-->
<FONT SIZE="2" COLOR="#0000ff">◆</FONT>
------略-------
<FONT SIZE="2" COLOR="#ff0000">◆</FONT>
<!--★★四角のグラデーション部分ここまで★★-->
<BR><BR>

<!--★★GIFアニメーション画像★★-->
<MG SRC="img/glasses.gif" WIDTH="55" HEIGHT="25" ALT="ぐるぐるメガネ" BORDER="0"><BR>

<!--★★おしながきのテーブル★★-->
<TABLE BGCOLOR="#ffffff" BORDER="3" CELLPADDING="2" CELLSPACING="3">
<TR>
<TH BGCOLOR="#009933" COLSPAN="2"><FONT COLOR="#ffffff">おしながき</FONT></TH>
------略-------
<TD NOWRAP>●Enquete</TD>
<TD><FONT SIZE="2">アンケートにご協力ください。</FONT></TD>
</TR>
</TABLE>
<!--★★ここまで内容★★-->

<!--★★全体をセンターにするためのテーブルを閉じる★★-->
</TD>
</TR>
</TABLE>

</CENTER>
</BODY>
</HTML>




同じ画像は使い回しする

リンクボタンなどたくさんのページに同じ画像を使う場合は、それぞれに画像を用意するのではなく、同じ画像を使用しましょう。ブラウザは一度読み込んだ物をキャッシュに蓄えて、たとえ別ページでも同じ画像なら、いちいちまた読み込みに行かずに再表示してくれます。使い回し出来る物はどんどん使い回ししましょう。

backindexnext