２．イメージ、画像の活用
（１）イメージを貼り付ける
グラフィックイメージや写真などの画像を使うと、ホームページが華やか になります。標準の画像形式は“ＧＩＦ形式”ですが、最近では“ＪＰＥＧ（ＪＦＩＦ 形式）”のファイルも表示可能です。
・書き方
|
＜ＩＭＧ ＳＲＣ＝“画像ファイル名”＞ |
・ＨＴＭＬ文
|
<H2>イメージを貼り付ける</H2> <P>ＧＩＦ形式のファイル<BR> <IMG SRC="beer.gif"></P> <P>ＪＰＥＧ形式のファイル<BR> <IMG SRC="photo.jpg"></P> |
（２）画像と文字の位置関係
画像もテキストの一部として処理されるので、自動改行されず文字と画像 が同じ行に並びます。このため、画像と文字との位置関係を指定することができます。標準では ｂｏｔｔｏｍを指定した場合と同じになります。
・書き方
＜ＩＭＧ ＳＲＣ＝“画像ファイル名” ＡＬＩＧＮ＝“位置”＞ 位置 ： ｔｏｐ （画像の上部に文字を揃える） ｍｉｄｄｌｅ （ 〃 中心 〃 ） (*1) ｂｏｔｔｏｍ （ 〃 下部 〃 ） |
・ＨＴＭＬ文
|
<H2>画像と文字の位置関係</H2> ビール<IMG SRC="beer.gif">の美味しい季節です。 ビール<IMG SRC="beer.gif" ALIGN="middle">を飲むと一日の疲れがふっとびます。 ただし<IMG SRC="beer.gif" ALIGN="top">飲み過ぎには注意しましょう。 |
（３）文字の回り込み
画像の説明など、画像の側面に複数行のテキストを配置したい時は、回り 込みの機能を使います。・書き方
＜ＩＭＧ ＳＲＣ＝“画像ファイル名” ＡＬＩＧＮ＝“位置”＞〜 テキスト 〜
＜ＢＲ ＣＬＥＡＲ＝“ａｌｌ”＞ …回り込みの中止
位置 ： ｌｅｆｔ （画像が文字の左側）
ｒｉｇｈｔ（ 〃 右側）
|
・ＨＴＭＬ文
|
<H2>文字の回り込み</H2> <IMG SRC="photo.jpg" ALIGN="left">この写真はこの夏に北海道に<BR> 行ったときに写したものです。<BR> なかなか上手くとれてるでしょう。<BR CLEAR="all"> （追伸）お土産を持って週末におじゃましたいと思います。<BR> よろしく。 |
（ポイント）画像表示サイズの指定
大きな画像ファイルのあるページは、画像データの転送中には何も表示さ れず、イライラすることがあります。このため、次のような画像表示サイズの指定をすると、ブラウザ側の画像 レイアウトの処理が素早くなります。
また、画像が表示されない時のために、内容を表すテキストを表示するよ うにすると良いでしょう。
・書き方
|
＜ＩＭＧ ＳＲＣ＝“画像ファイル名” ＷＩＤＴＨ＝“幅” ＨＥＩＧＨＴ＝“高さ” ＡＬＴ＝“テキスト”＞ 幅、高さ：ピクセル数、または％ |
・ＨＴＭＬ文
|
<IMG SRC="../g/kyositu.gif" ALIGN="left" HSPACE="5" WIDTH="399" HEIGHT="360" ALT="パソコン教室"> |
［応 用］
画像ファイル（マーク）を利用したリスト
マーク付きリスト表示では、利用できるマークは味気ないものです。そこで、画像ファイルを利用して、カラフルなリスト表示をしてみましょう。
リスト表示のうち ＜ＤＬ＞を用いると項目の先頭にマークも番号も付かな いことを応用して、先頭にマークの画像ファイルを貼り付けます。
・ＨＴＭＬ文
|
<H3>画像ファイル（マーク）を利用したリスト</H3> <DL> <DT>メダルの種類 <DD><IMG SRC="../g/mark.gif">金メダル <DD><IMG SRC="../g/mark.gif">銀メダル <DD><IMG SRC="../g/mark.gif">銅メダル </DL> |
［参 考］ホームページで扱える画像ファイル形式
（１）ＧＩＦ（ジフ）：Graphic Interchange Format
ＧＩＦ形式は、Ｍｏｓａｉｃ、Ｎｅｔｓｃａｐｅ、Ｉｎｔｅｒｎｅｔ Ｅｘｐｌｏｒｅｒなど、グラフィック対応のブラウザでは、標準的に利用されてい る形式です。もともと、アメリカのパソコン通信であるＣｏｍｐｕＳｅｒｖｅで利用されていた もので、使える色の数は２５６色まで。グラフィックツールで作成した絵、文字 などの画像に適しています。
- インタレースＧＩＦ
通常のＧＩＦでは、画像データを読込中に上の方から少しづつ 表示されますが、インタレースＧＩＦでは、まず全体がおおま かに表示され、徐々にモザイクが細かくなって最後にはっきり と表示されるようになります。
- 透過ＧＩＦ
１色を背景色として指定することにより、背景色の部分を透か して表示します。
- 動画ＧＩＦ
複数の画像データを次々に表示させることで、アニメーション のように表示することができます。その分だけ、ファイル容量 が大きくなりますので、絵の大きさは小さなサイズのものにす ると効果的です。
（２） ＪＰＥＧ（ジェイペグ）：Joint Photographic Experts Group File Interchange Format
ＪＰＥＧは画像圧縮の国際標準方式のことなので、画像ファイル形式としては ＪＦＩＦというので正しい呼び方ですが、ＪＰＥＧと呼ぶのが一般的になって います。Ｎｅｔｓｃａｐｅ、Ｉｎｔｅｒｎｅｔ Ｅｘｐｌｏｒｅｒでは、インライン イメージ（テキスト中に表示）として扱うことができます。圧縮効果が高く １， ６７７万色を扱うことができるため、写真など色数の多い画像データに 適しています。
- プロクレッシブＪＰＥＧ
インタレースＧＩＦのように、はじめは全体がぼんやりと表示 され、しだいに画像が鮮明になっていきます。