画像を読み込むためのimg要素
<img />

 img要素は「Embedded image」の略で、画像を読み込む際に使います。Web標準を遵守するという点で、ラスタ画像にはPNG形式を、ベクタ画像にはSVG形式を使うのが一般的な原則とされています(参考「W3C QA - Buy standards compliant Web sites」)。

 インライン要素として機能するのに、終了タグがないのが特徴です。開始タグと終了タグを「<img src="sample.png" />」というふうに1つにまとめて記述します。

サンプル

<html>
<head>
<title>img要素のサンプル</title>
</head>
<body>

<p><img src="sample.png" width="376" height="50" alt="サンプル" /></p>

</body>
</html>

DOMでの参照方法

[window.]document.getElementById("【ID属性値名】")
[window.]document.images[i]

オプション属性

属性 機能 入力例 DOM参照
src
(必須属性)
URI 画像ファイル
の所在となる
URIを指定
<img src="./imag/sample.png" width="500" height="500"
  alt="イメージ画像" />
[window.]document.images[i].src
[window.]document.getElementById("【ID属性値名】").src
alt
(必須属性)
代替テキスト
(alternative
 textの略)
画像情報の
代替テキスト
を指定。
全角で最大
512文字まで
<img src="sample.gif" width="500" height="500" alt="サンプル画像" /> [window.]document.images[i].alt
[window.]document.getElementById("【ID属性値名】").alt
align "left" "right"
"top" "middle"
"bottom"
画像の
そろえ方
を指定
<img src="sample.png" width="400" height="300"
  alt="サンプル画像" align="left" />
[window.]document.getElementById("【ID属性値名】").align
[window.]document.images[i].align
height 整数(pixels)
、または、
パーセンテージ
値(%)
画像を表示
するときの
高さを指定
<img src="sample.png" width="400" height="100" alt="サンプル画像" /> [window.]document.getElementById("【ID属性値名】").height
[window.]document.images[i].height
width 整数(pixels)
、または、
パーセンテージ
値(%)
画像を表示
するときの
横幅を指定
<img src="sample.png" width="400" height="100" alt="サンプル画像" /> [window.]document.getElementById("【ID属性値名】").width
[window.]document.images[i].width
ismap "ismap"
(XHTMLでは、
ismap="ismap"
と指定)
CGIプログラム
を利用した
サーバサイド
・イメージ
マップに指定。
クリックした
座標が
プログラム
へ送られる
<a href="ismap.cgi">
  <img src="map.png" width="100" height="50" ismap="ismap" />
</a>
[window.]document.getElementById("【ID属性値名】").ismap
[window.]doument.images[i]
longdesc URI alt属性で説明
しきれない
ほどの(※1
代替テキストが
必要なとき、
詳しく説明した
リソースのURI
を指定(※2
<img src="sample.png" width="500" height="500"
  alt="サンプル画像" longdesc="sample.html" />
[window.]document.getElementById("【ID属性値名】").longDesc
[window.]document.images[i].longDes
usemap イメージ
マップ名
map要素で
作成する
クライアント
側イメージ
マップとの
関連付け
を行う際に
指定(※3
<img src= "sample.gif" alt="" usemap="#imgmap" />
<map name="imgmap" id="imgmap">
  <area href="item1.html" shape="circle"
    coords="20, 15, 10" alt="項目1" />
  <area href="item2.html" shape="circle"
    coords="40, 15, 10" alt="項目2" />
  <area href="item3.html" shape="circle"
    coords="60, 15, 10" alt="項目3" />
</map>
[window.]document.getElementById("【ID属性値名】").usemap
[window.]document.images[i].usemap
name 文字列 img要素に
任意の名前
を付けて
スクリプト
(JavaScript
など)から
DOM参照
できるように
する(※4
<img src="sample.png" width="500" height="500" name="sample" /> [window.]document.getElementById("【ID属性値名】").name
[window.]doument.images[i].name
border 整数(pixels) 画像の周り
にボーダー
(境界線)
を描画(※5
<img src="sample.png" width="500" height="500" border="1" /> [window.]document.getElementById("【ID属性値名】").border
[window.]doument.images[i].border
hspace 整数(pixels) 画像の周囲
に水平(左右)
方向
の余白を
指定(※6
<img src="sample" width="500" height="500"
  alt="サンプル画像" hspace="50" />
[window.]document.getElementById("【ID属性値名】").hspace
[window.]doument.images[i].hspace
vspace
(非推奨属性)
整数(pixels) 画像の周囲
に垂直方向
の余白を
指定(※6
入力例:<img src="sample.png" width="500" height="500"
  alt="サンプル画像" vspace="50" />
[window.]document.getElementById("【ID属性値名】").vspace
[window.]doument.images[i].vspace
  • ※1:全角の512文字(半角では、1024文字)を超えるテキスト
  • ※2:主要Webブラウザでは、あまりサポートされていないが、国内の音声ブラウザで利用率の高いIBMの「ホームページ・リーダー」では、こちらのlongdesc属性がサポートされている
  • ※3:XHTML1.0 Transitional、および、XHTML1.0 Framesetでサポートされているが、XHTML1.0 Strictではサポートされない属性
  • ※4:XHTML1.0 Strict、および、XHTML1.1でサポートされないので、代わりにid属性を使う
  • ※5:CSSのborderプロパティで代替することが推奨されている
  • ※6:CSSのmarginプロパティで代替することが推奨されている

追加が可能なイベントハンドラ属性

onclick、ondblclick、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onkeypress、onkeydown、onkeyup

有限会社タグパンダ
喜安 亮介

2/6

 INDEX
Web標準HTMLタグリファレンス(6)
画像や動画をサイトに表示させる正しいXHTMLタグ
画像・動画
img 画像を読み込むためのimg要素
  object 外部アセットを読み込むためのobject要素
  param パラメータを指定するparam要素
  map クライアント側イメージマップを作成するmap要素
  area イメージマップを定義した場所とリンク先を指定するarea要素



HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

注目のテーマ

デザインハック 記事ランキング

本日 月間
ソリューションFLASH