簡単なホームページの作り方第五回目
「画像の表示」

 前回までは、主に文字に関するものばかりでした。
 今回は、いよいよ画像の表示の仕方を扱ってみたいと思います。

使える画像の種類(JPEGとGIF)
 画像を表示させる方法を述べる前に、ブラウザではどのような画像が使えるのか?
 それをまず説明しようと思います。

 基本的に、ブラウザで表示できる画像は、二種類だけになります。
 それが、「JPEG」画像と、「GIF」画像です。
 「JPEG(ジェーペグ)」画像は、主に写真のような画像を扱うのに適した画像フォーマット(基準)です。
 色数が、自然色まで対応できるので、例えば、デジタルカメラで撮った画像を表示させる時などには、この「JPEG」で表示させた方がいいでしょう。
 JPEG画像のファイルの拡張子は、「.jpg」か「jpeg」を使っていることが多いようです。
 「GIF(ジフ)」画像は、主に絵(コンピューターグラフィック:CG)を扱うのに適した画像フォーマット(基準)です。
 色数が、主に256色までで扱われるのがほとんどです。
 個人で書いた色数の少ない絵ならば、この「GIF」で表示させた方がいいでしょう。
 また、この「GIF」では、「アニメーション」や「インターレス」、「透明化」などといった技法も扱えます。(後述します)
 GIF画像のファイルの拡張子は、「.gif」です。

画像表示のさせ方
 使える画像がわかったら、さっそく画像の表示をさせてみましょう。
 新しくHTMLファイルを作り(作り方はわかりますね?)、以下の行を追加してください。
 表示するファイルは、以前に使った水の画像をまた使ってみます。
 ・<IMG SRC="water001.gif">
 さあ、保存して表示させてみてください。
 水の画像が表示されるはずです。

画像表示のオプション
 基本的に、ほとんどのブラウザでは画像が表示できます。
 しかし、一部のブラウザなどでは、画像が表示されません。
 そういったブラウザに対して、何の画像が表示されるのか説明を付けると、親切ですね?
 ・・・と、いうことで、画像の説明を付けることが出来ます。それが、「ALT」オプションです。
 先ほどの画像を表示させたHTMLファイルを少し変更してみましょう。
 ・<IMG SRC="water001.gif">を、<IMG SRC="water001.gif" ALT="水の画像">に変更。保存。
 ブラウザの画像の表示のチェックを外して表示してみてください。
 おそらく、画像が表示されなく、追加した「水の画像」という表示がされるはずです。
 また、たとえ画像が表示されていても、画像の上にマウスを持ってくれば、その説明文が表示されるはずです。
 試してみてください。

 オプションはこれだけではありません。
 画像の大きさを指定するオプションもあります。
 このオプションを使えば、画像が表示されなかった時、画像が表示された場合の本来の文字と画像の位置関係がはっきりとわかりやすくなります。
 高さを指定するオプションは、「HEIGHT="Y"」オプションです。
 "Y"には数字が入ります。
 %(パーセンテージ)で表すことも出来ますし、ピクセルで表すことも出来ます。
 横幅を指定するオプションは、「WIDTH="X"」オプションです。
 "X"には数字が入ります。
 これも、「HEIGHT」オプションと同じく、%、またはピクセルで表します。
 たとえば、先ほどの水の画像は、横×縦の大きさ(ピクセルサイズ)は、278×181です。
 したがって、その大きさをもとにこのオプションを付けてみると、
 ・<IMG SRC="water001.gif" ALT="水の画像" WIDTH="278" HEIGHT="181">
ということになります。
 まだまだいろいろなオプションがありますが、今回はここで終わりにします。
 なにかのときに、また説明します。

番外:GIFの技法
 先に、GIFでは、「アニメーション」等の技法が使えると書きました。
 しかし、その技法をブラウザで指定することは出来ません。
 ブラウザは、そういった技法で保存された画像を表示させることだけは出来ます。
 もし、その技法(アニメーションなど)を使いたい場合は、画像ツールを使って下さい。
 さて、アニメーションとはなんでしょう?
 あちらこちらのホームページを見たのならわかると思いますが、画像が動画として動いているところを見たと思います。
 まさしくそのように、画像を動画のように動かす技術です。
 実際には、パラパラマンガのように、いくつもの画像を用意して、順に表示させていくという技法です。
 インターレスとはなんでしょうか?
 いくつか、ホームページを見に行くとよくあるのですが、最初、大まかな、モザイクのような画像が表示され、それがだんだんとはっきりしていく、そういう画像の事です。
 また、透明化とは?
 画像を表示させる時、画像の背景と、ブラウザの背景が、あわないときなど、画像の背景を消したい時などがあるでしょう。
 そんなとき、画像の背景の色を、ある色に統一し、その色は本来は表示させないで、ブラウザで表示させると後ろの背景(この場合、背景の画像や色)が表示されるようにする技法です。
 じつは、私のホームページでは、これらの技法は一つも使っていません。
 まず、アニメーションを使おうにも、それが出来るほどうまくないですし(まあ、昔は使ったことがありますが・・・)、インターレス化は、使おうにも、そういったものは、JPEG画像の場合が多いために、使えませんし・・・
 透明化にいたっては、最初から、「背景は一色」という方法でページを作っているため、それを考えて作っているために、あまり意味無いんです・・・
 また、これらの技術は、画像サイズを大きくしてしまうため、表示まで時間がかかることもありますし・・・
 そんなわけで、使っていません。
 ためしに、昔使っていた、アニメーション画像へのリンクをはっておきます。
 これは、その昔、更新履歴へのリンク画像のために使っていたものです。
 アニメーション(更新履歴)
 また、インターレス化をした「プレイアイランド〜すなわち遊び島〜」のタイトル画像へのリンクもはっておきます。
 (まあ、小さい画像なので、インターレス化の効果がよくわからないでしょうが・・・)
 インターレス化(タイトル)
 だいたいどういうものかわかっていただけたらさいわいです。

 いかがでしょうか?
 これで、画像の表示も付いて、華やかなページを作ることが出来るようになったはずです。
 次回は、「テーブル」です。


第四回目に戻る  講座トップページに戻る  第六回目に行く