1999.8.10火 NEW

入門HTML講座

1.HTMLの基本

4.画像

4.2 画像のサイズ

　画像の張り込みでは、画像ファイルに格納されたサイズに関わらず、表示するサイズを指定することができます。横幅のサイズはWIDTH 属性で、縦幅（高さ）のサイズはHEIGHT属性で記述します。値として数値のみを記述すると、「ピクセル（ドット）数」を指定したことになりますが、他に、ウィンドウの幅や高さに対する「比率（％）」を指定することもできます。
　また、WIDTH属性かHEIGHT 属性の一方だけを指定すれば、指定しないもう一方は、画像ファイルの縦横比と同じになるように調整されます。逆に、画像ファイルの縦横比を無視して、WIDTH 属性とHEIGHT属性を指定すると、指定した通りに（縦横比を）変形して表示します。
　サイズを指定しない場合は、画像ファイルに格納された縦横のピクセル数通りに表示されます。したがって、拡大・縮小・変形の意図がなければ、サイズの指定は不要であるように思えます。しかし、実際には、サイズの指定も必須と考えて良いぐらい、積極的に記述するべきなのです。
　一般に、ブラウザは、画像の貼り込み指定があれば、指定された画像ファイルを読みに行きます。しかし、テキスト情報で記述されたHTMLファイルに比べると、いくら通信向けに圧縮してあると言っても、画像ファイルは大きい容量（メモリサイズ）なので、読み込みに時間がかかります。画像ファイルを読み込まないと、ページのレイアウトが決まらないので、後に続くテキスト情報の表示も待たされることになります。ここで、WIDTH属性やHEIGHT 属性が指定されていると、画像ファイルを読み込まなくても、ページのレイアウトを決定して、テキスト情報を先に表示することができます。読者にとっては、テキスト情報を読むことができるので、待ち時間のストレスが軽減されます。実際の表示時間も、多少なりとも速くなります。サイズの指定は、積極的に行いましょう。

●画像の貼り込み（image）サイズ指定

<IMG SRC="..." ALT="..." 属性="..."> … 画像を貼り込む。

属　性 WIDTH="n/c%" 　　〔横幅サイズ：nピクセル／ウィンドウ幅のc％〕

HEIGHT="n/c%" 　　〔縦幅サイズ：nピクセル／ウィンドウ高さのc％〕

　サンプル「s142img.html」は、3通りのサイズ指定を行っています。 1つめは、WIDTH属性で「ウィンドウ横幅の25％」を、 2つめは、HEIGHT属性で「120ピクセル」を指定しています。画像ファイルの縦横比が保持されたまま表示されます。ウィンドウの横幅を変化させると、 1つめの画像の大きさが変化することを確認しましょう。
　3つ目の画像は、WIDTH属性で「80ピクセル」、 HEIGHT属性で「80ピクセル」を指定しているので、画像が正方形に変形して表示されます。

サンプル 4-2 s142img.html（画像サイズの指定）

<HTML> <HEAD> <TITLE>絶景倶楽部【入門HTML講座】</TITLE> </HEAD> <BODY> <H2 ALIGN="Center">入門HTML講座</H2> <H3>画像（Image）…サイズの指定</H3> <P> <IMG SRC="img/leo01.jpg" ALT="麗雄の写真" WIDTH="25%"> 「WIDTH="25%"」と指定しました。 <P> <IMG SRC="img/leo01.jpg" ALT="麗雄の写真" HEIGHT="120"> 「HEIGHT="120"」と指定しました。 <P> <IMG SRC="img/leo01.jpg" ALT="麗雄の写真" WIDTH="80" HEIGHT="80"> 「WIDTH="80" HEIGHT="80"」と指定しました。 </BODY> </HTML>

このリストを表示する（新しいウィンドウを開きます。参照後は、自分で閉じて下さい。）