ホームページを作ろうヨ!!

まずホームページで一般的によく使用されている画像ファイルの形式は、「GIF」と「JPEG」の２種類です。他にPNGなど、更に表現性の増した形式もありますが、とりあえずはこの２種類を覚えておくくらいで良いでしょう。

GIFは主にイラストなど絵画調の画像に向き、JPEGは写真をアップする場合に向いたファイル形式で、デジカメで撮影した画像などは普通始めからこのJPEG形式で記録されています。

JPEG 18KB

GIF 24KB

JPEG形式で記録した画像が滑らかでキレイなのに比べて、GIFで記録したものは粒子が粗く見づらい写真になってしまっています。これはGIFでは画像に使える色彩が２５６色と少なく、写真のような微妙な色彩で表現された画像を記録するのに適していないためです。翻ってJPEGでは１６７７万色のフルカラー表現が可能で、圧縮率も高いので画像容量も小さくなります。上の例ではGIFで24キロバイトのものがJPEGでは18キロバイトになっていますね。言うまでもないことですが、画像容量が大きいと当然ダウンロードにも時間がかかることになりますので、サイズを変更したり加工した時など、保存する前にファイル形式を確認する習慣をつけるようにしましょう。

また逆にイラストやアイコンなど色数が少なく、色彩の境目がくっきりとしているものはGIFの方がキレイに表現されるようです。それにGIFでは以下の例のように背景の透明化（画像の背景を透明にしてページの背景色を生かす設定をしたGIFで、「透過GIF」と呼ばれます。）が可能ですが、JPEGではそれが出来ないので画像の輪郭を浮かばせる効果を出すことができません。アニメーションもGIFでは作成可能ですが、（アニメーションGIFと呼ばれます。）JPEGでは作成出来ません。但し、グラデーションを使ったイラストなどは、色彩表現の問題からGIFには向かず、JPEGで保存した方が良くなります。

JPEG

くっきりとした色彩の場合、

JPEGでは色によって塗りムラが目立つことがあります。

GIF

この画像も本当は四角ですが、

背景が透明なので浮き上がって見えます。

色もくっきりと出てキレイ。

JPEG

グラデーションの掛かったイラストなどは

JPEGの方がキレイに出ます。

GIF

色彩の微調整が出来ないため、

色むらが起こります。

以上のようにイラストやアイコンにはGIF、写真にはJPEGが一般的ですが、グラデーションなど色彩の微妙な表現を使ったイラストなどは、JPEGでないと色がキレイに出ない場合もあります。対象となる画像によって工夫してみましょう。

さて、今度は画像を作成画面上でサイズ変更した場合についてお話ししましょう。

ホームページを作成している時に画像を選択すると6箇所に黒点が表示されますが、この点の上にマウスをポイントすると矢印が変化して黒い両端矢印になります。この黒い矢印が出ている時にその上でマウスの左ボタンを押さえたままスライドすると、画像を拡大、もしくは縮小することが可能です。しかし画面上で画像が小さくなったり大きくなったりしても、そこに挿入された画像の元サイズが変化するわけではありません。

これが何故問題になるかと言うと、例えば100キロバイトの画像を挿入して、「画面に対して大きいから」と画面上でスライドして縮小した場合、見た目は小さくなりますが、その画像は100キロバイトのままなのです。つまり見た目がどんなに小さくなってもダウンロードする時には100キロバイト分の時間が掛かっているということです。

皆さんも、よく小さい画像をクリックすると大きい画像を表示することが出来るページを見かけることがあると思いますが、この小さい画像を「サムネール画像」と言って、全ての画像を元サイズのままダウンロードさせると時間を食いすぎる場合、ヴィジターが見たいものだけを選択して見ることが出来るようにする目的で設定されています。つまりこの「サムネール画像」は小さい分それだけ容量も小さく、何枚もの画像を、より早くダウンロードできるように作られているということです。この目的で画面上の画像を縮小するためには、画像そのものも加工ツールで小さくしておかないと、結局大きい画像を何枚もダウンロードするのと同じ時間がかかってしまい、画像を縮小してサムネールにした意味が全くなくなってしまうのです。

数字で説明すると、例えば一枚が１００キロバイトの写真を２０枚１ページに並べ、サムネール化してヴィジターが好きなものだけ拡大して見ることができるように設定した場合、画面上の縮小だけでは１００キロバイトX20枚分、つまり２０００キロバイトをダウンロードすることになってしまうのです。これでは画像を縮小した意味がありません。しかしサムネール画像自体を加工ツールなどで一枚20キロバイト（モトの５分の１）に縮小しておけば、２０キロバイトX２０枚分で４００キロバイトのダウンロード時間で済むわけです。

画像が小さいのに、やたらダウンロードに時間を食うページは、まずこのことを知らずに画面上でのみ画像を縮小している場合が多いと思います。あやぼーもそれをやってブーイングを買い、あとからせっせと画像を小さくした前科がありますが、皆さんはそのような失敗を是非とも繰り返さないで下さいね。

画像を配置する時、テキストの回りこみを指定したい場合が出てくるのではないかと思います。回り込みとは....

この画像には回りこみが指定されていないので、この上の空白部分には文字を書くことができません。

しかしこちらの画像には左の回りこみが指定されているので、画像の上端からテキストを書いてゆくことが出来ます。フロントページではツールバーのボタンをクリックすれば一発で画像を端に寄せてテキストを回り込ませることが出来ますが、これだとIEでの表示は良くてもNetscapeで表示するとちゃんと回り込まない場合があります。

そこで、そのような齟齬を解消するためにはHTMLを少し触ってやる必要が生じます。HTMLを編集するためには、それぞれの作成ソフト上で、スクリプトを出す画面に切り替えて下さい。

さて、HTMLで画像の表示を指定しているのは前章でもお話した通り、

<img src="画像のファイル名" width="画像の幅" height="画像の高さ">という一行ですが、例えば「ayabo.gif」という名前の、幅50ピクセル、高さ１００ピクセルの画像を挿入した場合だと

<img src="ayabo.gif" width="50" height="100">という表示がHTMLコードとして記入されることになります。HP作成ソフトは画面上で画像を挿入すると、このようなコードを自動的に書いてくれているわけです。特に画像を拡大縮小しなければ、幅や高さが記入されていない場合もあります。

さてそこで、画像にテキストを回り込ませたい場合、この< >というカッコ内に ALIGN="left" という文字を書き込めば向かって左に、ALIGN="right" という文字を書き込めば向かって右に画像が寄って、その横に文字を書くことが出来るようになります。

つまり上の画像の場合<img src="ayabo.gif" width="50" height="100" ALIGN="left">というように書き込まれているわけです。これを書き込むときは必ず前の文字から半角スペースを空けて半角アルファベットで書き込むようにして下さい。

なお、レイアウトの都合上、画像の横に空白がまだあっても、その下にテキストを降ろしたい場合があります。そういう場合は、スクリプト上で<br clear="left (right, all)">と記述すると、そこからのテキストは画像の下に降ろされます。ALIGN="left"で指定した場合は<br clear="left">で、ALIGN="right"の場合は、<br clear="right">で解除します。<br clear="all">なら、どちらでも解除されます。このサンプルはこちらでどうぞ。

ところで上の画像、テキストが回りこんだのはいいんですが、ちょっと文字が画像に近より過ぎていると思いませんか?

これは画像のすぐ端っこからテキストが始まっているためで、なんだかせせこましい感じになってしまいます。そこでこの画像のまわりに空白スペースを空けてあげるHTMLを追加してみましょう。

それにはさっき追加した文字の後にまた半角スペースを空けて、HSPACE="数値"　VSPACE="数値" と追加します。つまり、

<img src="ayabo.gif" width="50" height="100" ALIGN="left" HSPACE="50"　VSPACE="50" >

と追加するわけですね。数値は整数値で余白を空けたいピクセル数を記入します。もちろん半角で入力して下さい。そうすると今度は横の画像のように回りに適当な空白が入り、テキストとの間隔が開いて見た目もスマートになります。

左右にスペースを空けたい場合はHSPACEで指定し、上下にスペースを開けたい場合はVSPECEで指定するようにして下さい。変数部分は必ずこの " " というカッコで囲み、スペルなど間違いのないようにしましょう。もしHTMLに書き込んでも画面上で動作しない場合は、スペルが違っているとか、カッコが抜けているとか、項目ごとにスペースを入れていないとか、必ず何か原因があります。

これで画像の回り込み指定が出来るようになりました。これを利用して画面のレイアウトを工夫してみましょう。

以上で画像の基礎知識篇はおしまいです。大雑把に並べてみたテキストや画像を、より見やすくレイアウトし直せるようになりましたね。次の章からは、HTMLを使って更にいろいろな要素を画面上に追加する方法についてお話してゆきましょう。