画像を配置したことで、index.htmlも、だいぶ雰囲気が変わってきました。トップページのレイアウトも、もう一息です。
今まで作ってきたものと、上のSAMPLEを見比べて下さい。リンクや「メール待ってます」は次のページからやりますが、それ以外に何か違うところがありますね？そう、logo画像と「◆」とのスペースや、メガネと「おしながき」のスペースです。今は、ここを<BR>タグなどで改行していますが、ブラウザやプラットフォームによって文字の表示される大きさが違う関係で、改行タグでは自分の思ったとおりのスペースを空けたりすることは出来ません。そこでピクセル単位で正確なスペースが取れるやり方をやってみましょう。
GIF画像には「透明GIF」という文字通り透明な画像を作る機能があります。この透明GIFを<IMG>タグのWIDTHやHEIGHTオプションで好きな大きさに変化させて、スペースを空けたいところに挿入すれば、自在にスペース調節出来るわけです。つまり「つっかえ棒」にしてしまうわけです。画像をオリジナルと違う大きさや比率で表示すると、表示が乱れると前に書きましたが、透明なら関係ありません。しかもタグのパラメータの数字を書き換えるだけで大きくも小さくも出来ますから、空きスペースのバランスを簡単にいくらでも試行錯誤できる優れ物です。
画像の大きさは1ピクセルで充分ですので、画像自体の重さはほとんど考えなくてもいいでしょう。logo画像と「◆」、メガネのアニメーション、おしながきのテーブルの間に透明GIFを入れてスペースを調整してみます。
透明だと本当に解らないので、とりあえず赤い色のGIF画像でつっかえ棒の様子を表示しますが、実際にはここに透明GIFを入れて確認してみて下さい。透明GIFは「spacer.gif」です。
