1999.8.10火
入門HTML講座
4. 画像
画像を貼り込む場合には、HTMLファイルとは別に「画像ファイル」を用意します。
Windowsユーザであれば、一般的な画像ファイルは「ビットマップ
（BMP:Bit Map）」形式ということになりますが、残念ながら、ホームページでは
「BMP」形式の画像ファイルを使用することはできません。
ホームページは、通常、ネットワークで閲覧するものです。閲覧する情報はネットワーク内を
データ転送されて、閲覧者の元に届きます。速やかに（そして安価に）転送されるには、
できるだけ小さいデータサイズであることが望まれます。「BMP」形式の画像ファイルは、
あまり小さなサイズにはならないので、ネットワークには不向きなのです。
ホームページでは、「GIF（ジフ；Graphic Interchange Format）」や「JPEG
（ジェイペグ；Joint Photographic Expert Group）」という画像ファイル形式が一般的です。
また、最新のブラウザであれば「PNG（ピング；Portable Network Graphics）」
という新しい形式の画像ファイルを使用することもできます。
これらの形式は、「圧縮」技術によって元の画像データを小さなサイズにしています。
どの形式を使用するかは、画像の種類（特徴や目的）によって選択する必要があります。
4.1 画像の貼り込み
画像の貼り込みには、<IMG>タグを使用します。
このタグは、タグ自体が要素になるので終了タグはありません。
また、画像を指定するのが目的ですから、必ずSRC属性で
画像のURL（ここでは、画像のパス名/ファイル名と考えれば良いです）を記述します。
省略することはできません（当り前です）。
画像は、ホームページを魅力的なものにするためには、極めて有効な表現手段です。
しかし、インターネットに接続しているさまざまなコンピュータの環境の中には、
画像を表示できないブラウザも存在します。また、ネットワークでは通信エラーや時間切れで、
画像ファイルの読み込みに失敗する場合もあります。そのような時のために、
画像ファイルには、画像の代りを果たす文字列情報を付加する必要があります。
画像の代りに表示する文字列を、「代替文字列」といいます。
代替文字列は、ALT属性で記述します。
画像の代りに表示して情報を伝えるのですから、単なる標題より内容の説明の方が妥当です。
すなわち、「写真(1)」よりも「
酔って踊る兼平君の写真」の方が、「タイトルロゴ」よりも
「絶景倶楽部ロゴ」の方が、より適切な代替文字列と言えるでしょう。
代替文字列の指定がなくても画像は表示できますが、情報を発信する側のマナーとして
ALT属性は必ず記述します。省略してはいけません。
|
●画像の貼り込み（image）必須属性 |
| |
| <IMG 属性="..."> |
… 画像を貼り込む。 |
| 属 性 |
SRC="ファイル名" |
〔画像のURI：必須〕 |
|
ALT="文字列" |
〔代替文字列：必須〕 |
|
サンプル「s141img.html」に写真画像の貼り込みの例を示します。
320×224ピクセル（ドット）、13.3KBのJPEG形式ファイルです。
| サンプル 4-1 |
s141img.html（画像の単純な貼り込み） |
<HTML>
<HEAD>
<TITLE>絶景倶楽部【入門HTML講座】</TITLE>
</HEAD>
<BODY>
<H2 ALIGN="Center">入門HTML講座</H2>
<H3>画像（Image）…単純な貼り込み</H3>
<P ALIGN="Center">
SRC属性とALT属性のみ指定して、画像を表示します。
<P ALIGN="Center">
<IMG SRC="img/leo01.jpg" ALT="麗雄の写真">
<P>
我が家の愛犬「麗雄<SUP>（れお）</SUP>」の写真です。
</BODY>
</HTML> |
|
このリストを表示する
（新しいウィンドウを開きます。参照後は、自分で閉じて下さい。）
|
