■画像ファイルの用意
WWWページに画像を表示するには、HTMLファイルとは別に、WWW ページ内に配置する画像のファイルを用意します。この画像ファイ
ルは、GIF（Graphics Interchange Formatの略。ジフと発音）という形式を使います。
Photoshop などのグラフィックソフトでは、連載画像データを保存する際にGIF（CompuserveGIF）形式を選んで保存します。また、フリーウェアやシェアウェアで、BMP（ビットマップ形式）やPICT（Macintosh 用の標準画像形式）などからGIF に変換するソフトも多数存在します。
Netscape などではGIF のほかにJPEG 形式のファイルも利用できます。GIF やJPEG の詳しい説明は次回行うつもりですが、とりあえずグラフィックソフトなどでGIF 形式の画像を作成して、ブラウザーに表示することにします。

■ <IMG> タグ
画像ファイルを用意したら、次にHTML フ
ァイルの中で画像を表示するための指定をしなければなりません（図 1）。
画像を表示したい場所で、<IMG> タグによってファイルを指定します。
<IMG SRC="sample.gif">
IMG はimage、SRC はsource の略です。
SRC オプションで、元となる画像ファイルを指定します。上記の例の場合、これが書かれているHTML ファイルと同じディレクトリ（フォルダ）内にsample.gif というGIF の画像フ川添 歩 （かわぞえあゆむ）
アクセス株式会社

http://www.axes.co.jp/

第3回 ホームページに絵を入れよう
ホームページに絵や写真などの画像を貼り込むと、見た目も華やかで、より個性的なページを作ることができます。
また、画像でしか表現できない情報というものもあります。
今回は、画像を表示するための手順と HTML タグについて解説しましょう。

234 INTERNET magazine 1996/4

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

HTML

図 1 ： clock.html
GIF ファイルと<IMG> タグを使ったHTML を用意し、WWW ブラウザーで表示した状態。
<IMG> タグの次の行にある<BR> に注意。これがないと文字が画像の横にきてしまう<HTML>

異なるディレクトリにある画像ファイルを使用する際の書式は、リンクの仕方を説明するときに詳しく行いたいと思います。まだこのあたりがよくわからない方は、とりあえずHTML ファイルと、そこに表示する画像ファイルは、同じ<HEAD>
clock.gif

ァイルが置かれていることになります。

<TITLE></TITLE>

ディレクトリ内に配置するようにしてください。

</HEAD><BODY><H2>My Favorite Clock</H2>●ALT オプション<IMG SRC="clock.gif" WIDTH=126 HEIGHT=126
ALT="Clock">

図 1 の H T M L で画像は表示されますが、<IMG> タグを使う際のルールとして、「ALT<BR>
とてもシンプルなデザインの目覚まし時計で、気に入っていまオプション」は必ず入れるようにしてください。

す。<BR><IMG SRC="sample.gif" ALT="Sample">

イタリアっぽいのですが、日本製なのです。
</BODY>ALT はalternative（代替）の略です。回線</HTML>が混んでいるなど何らかの原因で、ホストコンピュータから画像ファイルがちゃんと受け取れなかった場合や、画像を表示する機能のないWWW ブラウザーでは、ALT が書かれていると画像がある位置にALT で指定した文字列が表示されます。画像がたとえ表示されなくても、その画像が何の画像であるのかをユーザーは知ることができます（図 2、3）。

図 2 ： ALT 指定のオプションがない場合、画像が何かの理由で読み込めないと、レイアウトイメージがまったく異なってしまうとともに、どんな画像が入っているのかが見る人にはわからない

図 3 ： ALT が入っていれば画像の内容を文字で説明することができる

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1996/4

235

●サイズ指定オプションの画像からグラフィックソフトで縮小したもの<IMG SRC="sample.gif" WIDTH=200を別に作ったほうがよいでしょう。

HEIGHT=128>図 4 ：画像処理ソフトに表示されたピクセル数でサイズを指定する

逆に、このタグでオリジナルの画像を拡大

これは画像のサイズを指定するものです。オ

して表示する場合は、大きさのわりに小さい

リジナルの画像の大きさに関わらず、WWWサイズの画像で済みますから、画像が荒れるブラウザーが画像をこのサイズに合わせて拡大ことを承知の上でならば使っても問題ありままたは縮小して表示してくれます。サイズはせん。

幅（WIDTH）と高さ（HEIGHT）をピクセ

拡大縮小など、そう頻繁に利用することでル数で指定します。これはHTML 3.0 の仕様はありませんから、あまり使わないオプションですが、Netscape などで利用できます。のように思えますが、このオプションはぜひ入

画像カタログのようなページで見本の小されておいてほしいのです。オリジナルのサイズい画像（サムネールといいます）を表示したのまま表示する場合でも、そのオリジナルのい場合に、このタグを使えば小さい画像ファサイズを指定してください。

イルを別に用意しなくとも、オリジナルの画

これには2 つの理由があります。1 つは、何像を縮小表示すればよいので便利なのですが、らかの原因で画像の転送がうまくいかなかっ実際には、縮小する指定はお勧めできません。

た場合でも、サイズの指定があれば画像の大それは、表示自体は小さくなるのですが、実きさの枠だけは表示されるので、レイアウトが際に転送されてくるのは、サイズの大きいオくずれないということ（図 4、5）。もう1 つリジナルの画像になるからです。画像の大きは、WWW ページで表示する際にレイアウトさのわりには表示に時間がかかることになってがすぐに行われて、テキストの表示が速くなしまいます。サムネールが必要な場合は、元るということ。画像を含んだページをブラウザーが表 示 する場 合 、

図 5 ：サイズ指定も入っていれば、画像が得られなくてもその大きさはわかる

画像より後ろにあるテキストは、画像ファイルを読みにいって、そのサイズがわかるまで表示を待たされます。しかしサイズの指定をHTML の中でしてあれば、ブラウザーはそのサイズの大きさを確保し、後ろのテキス
トをすばやく表示することができるのです。画像の転送・表示には時間がかかりますから、読む側にとっては画像が表示される前にテキストが表示されれば、それを読みながら画像表示を待つことができるというわけです。

236 INTERNET magazine 1996/4

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

図 6 ：ホームページの定番（？）
、ペット自慢「嫌い」も自己表現

図 7 ：「マヨネーズ大嫌いクラブ」のページ

個人的なホームページを維持していくのに必要

一般に、嫌いであることの理由は、好きであるなものは、それを作る本人の情熱以外の何もことの理由よりも情報量が多いのではないだろのでもない。

うか。考えてみると、好きであるということの自分はこれが好きだ、好きで好きでしょうがな

表明には、あまり多くの言葉を必要としないのいという対象がある人ほど、内容が濃く、他人だ。

が見ても面白いページを作ることができる。

たとえば、一般的に情熱をかけやすい対象というものがあ「私、ケビン・コスナーって大好き」

るようで、たとえば自分のネコ自慢をホームペと聞けば「ふーん、そうなんだ」、あるいは「あ、ージでしている人はイヌ自慢の数より多いよう俺も好き。いいよねー」「げっ。俺あいつ嫌い」に思うし、世界中にこれほどオタクがいたかとというふうに、好きである理由をことさら説明思えるほど、日本のアニメやコミックについてすることは少ない。一方、語っているページは多い。

「私、ケビン・コスナーって大嫌い」

したがって、自分のお気に入りのものをページと聞いた場合は、「えっ、俺は好きだけど、何で紹介したいと思っても、それよりすごい内容で？」「うんうん、俺も嫌い。あいつってさーのページがほかにあるために、今ひとつ気乗り……」というふうに、どちらにしても嫌いであがしないということはよくある。

る理由を説明することになりがちだ。

だが実は、誰の中にもたいてい「好き」という嫌いなことに対しては、それが論理的であれ、よりもさらに強い感情がある。そう、「嫌い」

感情的であれ、その人なりの説明があるし、他という感情だ。

人もそれを聞きたがる。自分と異なる意見に興何かを、あるいは誰かを好きであるということ味があるからだ。ということは、読み手の反応よりも、嫌いであるということのほうがより持も引き出しやすい。

続性があり、より強い感情であるように思う。

もちろん、根拠のない悪口や、誰かの感情をだから「私の嫌いなもの」をリストアップする

傷つけることだけを目的としたものは作るべきことは、「私のお気に入り」をリストアップすではない。

るのと同様に、あるいはそれ以上に、その人をそういうものではなく、プラス指向の、あなたより鮮明に表現する結果となるだろう。の表現の一手法としての「私の嫌いなもの」ペ

そしてリストアップしたら、きっとその理由をージは、あなたという人間を印象深く他の人へ詳細に書きたくなるはずだ。

伝えることになるだろう。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1996/4237

［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この PDF ファイルは、株式会社インプレス R&D（株式会社インプレスから分割）が 1994 年～2006 年まで発行した月刊誌『インターネットマガジン』の誌面を PDF 化し、「インターネットマガジン バックナンバーアーカイブ」として以下のウェブサイト「All-in-One INTERNET magazine 2.0」で公開しているものです。

http://i.impressRD.jp/bn
このファイルをご利用いただくにあたり、下記の注意事項を必ずお読みください。
z 記載されている内容（技術解説、URL、団体・企業名、商品名、価格、プレゼント募集、アンケートなど）は発行当時のものです。
z 収録されている内容は著作権法上の保護を受けています。著作権はそれぞれの記事の著作者（執筆者、写真の撮影者、イラストの作成者、編集部など）が保持しています。
z 著作者から許諾が得られなかった著作物は収録されていない場合があります。
z このファイルやその内容を改変したり、商用を目的として再利用することはできません。あくまで個人や企業の非商用利用での閲覧、複製、送信に限られます。
z 収録されている内容を何らかの媒体に引用としてご利用する際は、出典として媒体名および月号、該当ページ番号、発行元（株式会社インプレス R&D）、コピーライトなどの情報をご明記ください。
z オリジナルの雑誌の発行時点では、株式会社インプレス R&D（当時は株式会社インプレス）と著作権者は内容が正確なものであるように最大限に努めましたが、すべての情報が完全に正確であることは保証できません。このファイルの内容に起因する直接的および間接的な損害に対して、一切の責任を負いません。お客様個人の責任においてご利用ください。

このファイルに関するお問い合わせ先
All-in-One INTERNET magazine 編集部
im-info@impress.co.jp
Copyright © 1994-2007 Impress R&D, an Impress Group company. All rights reserved.