img (Image) タグ


img (Image) タグの基本

 imgタグは画像を表示するのに使います。表示できる画像の形式はブラウザによって違うと思いますが、JPEG/PNG/GIF形式画像は特殊なデバイス用のブラウザでない限り表示できます。昔のNTTドコモのMovaという機種のiModeブラウザは当初、GIF画像しか表示できませんでしたね。

 img タグは必ず src 属性が必要です。src 属性により表示する画像のURLを指定するためで、これがないと文法的にはエラーではないはずですが、当然、何も表示されないか「壊れたアイコン」が表示されるはずです。
あと推奨属性として alt 属性があります。これはもし画像の存在しなかった場合などに代わりにalt 属性で指定した文字列を表示します。一般的にimg タグは下のような感じになります。

<img src="画像のURL" alt="srcで指定したURLが正しくなかったとき表示する文字列" />

 具体的な例としてサンプルを下に示します。

<img src="img/chitanda.jpg" alt="千反田える" />
千反田える

 src 属性で指定したURLが間違っていると下のようになります。この画像のファイル名は"chitanda.jpg"ですが、間違えて"chitannda.jpg"とすると、文字列「千反田える」が代わりに表示されます。

<img src="omg/chitanda.jpg" alt="千反田える" />

千反田える <== これがaltで指定した代替文字列です。

 元の画像サイズを変えないで、表示サイズだけ変えることもできます。画像の幅 (width属性) と高さ (height属性) を指定するとそのサイズで表示できます。下の例で幅を162ピクセル、高さを250ピクセルに指定しています。元の画像のサイズは、Explorerでその画像ファイルのプロパティを表示して確認できます。

<img src="img/chitanda.jpg" alt="千反田える" width="162px" height="250px" />
千反田える

 画像サイズがわからないときは、%で指定することもできます。この場合の%の値は画像サイズの%ではなくて、画面サイズの%になります。つまり画面サイズが小さい場合でも画像が大きすぎずに表示できます。

千反田える

<img src="img/chitanda.jpg" alt="千反田える" width="10%" />

 画像の表示位置ですが、画面の中央に表示したいことがよくあります。center タグを併用すると画像を画面の中央に表示できます。

<center><img src="img/chitanda.jpg" alt="千反田える" width="162px" height="250px" /></center>
千反田える


文字列の回り込み

 HTML4まではalign属性というのがあってそれを使うと画像の周りに文字列を表示することができました。HTML5ではalignが廃止になったので、代わりにスタイル vertical-align と float を使います。

 この例はalignを使って文字列のまわり込み表示をしています。画像をページの中央に表示しているので、align="middle"を使っていますが、"top"や"bottom"も指定できます。 tulip また、画像の表示位置を左端または右端にするときは、"left"や"right"を指定します。この場合も、文言は画像の左右に回り込みます。

align属性の使用例 (HTML4まで)
<img src="img/tulip.jpg" alt="tulip" align="middle" />


tulip  この例はvertical-align="text-bottom"とfloat="left"スタイルを
設定して画像を表示しています。

 

tulip  この例はvertical-align="text-top"とfloat="right"スタイルを
設定して画像を表示しています。

 

vertical-alignとfloatスタイルの使用例 (HTML5)
<p><img src="img/tulip.jpg" alt="tulip" style="float: left; vertical-align: text-bottom;" />
 この例はvertical-align="text-bottom"とfloat="left"スタイルを<br />設定して画像を表示しています。
</p>

画像へリンクを埋め込む

 例えば、日本地図の県ごとにリンクを埋め込めると便利なことがあります。これを実現するには map タグを併用します。mapタグは画像の一部の領域を指定して、それにリンクを張ることができます。

 mapタグが内部に領域を指定するareaタグを含む必要があります。areaタグではその領域の形 (shape属性) と座標 (coords属性) 、およびリンク先 (href属性) を指定する必要があります。

 shape属性は、default (画像全体), rect (長方形), circle (円), poly (多角形) のいずれかを指定します。rectやpolyの場合は図形の頂点の座標、circleの場合は、中心の座標と半径になります。defaultはpolyと同じです。座標は、画像の左上隅を(0, 0)としたときのピクセル座標です。これは、MS-Paintで画像をクリックするとステータスバーに表示されます。

penguin
penguin left penguin center penguin right

imgとmapタグの使用例
<img src="img/penguin.jpg" alt="penguin" usemap="#penguin_map" />
<map id="penguin_map">
<area shape="rect" coords="99, 52, 162, 362" href="javascript:alert('penguin left');" alt="penguin left" />
<area shape="circle" coords="265, 206, 50" href="javascript:alert('penguin center');" alt="penguin center" />
<area shape="poly" coords="348, 89, 412, 91, 430, 190, 440, 350, 340, 290" href="javascript:alert('penguin right');" alt="penguin right" />
</map>

img タグの属性

属性説明
alt文字列代替テキストを指定(上の説明参照)
crossoriginanonymous
use-credentials
他サイトからこの画像の使用を許すかどうか。
height数値(単位としてpx、%指定可能)画像の高さを指定する。
ismapismapサーバ側のイメージマップ
srcURL画像のURL
usemap#mapnameクライアント側のイメージマップ
width数値(単位としてpx、%指定可能)画像の幅を指定する。

(注意) HTML 4以下ではこれ以外にも使える属性があります。

 

ページの先頭へ戻る