<IMG> は画像(image)を表示するHTMLタグです。IMG要素タイプはインライン要素です。

構文

HTML

HTMLでは終了タグを省略できる。タグ名は大文字と小文字を区別しない。

<IMG [attribute=value ...]></IMG>
<IMG [attribute=value ...]>

XHTML

XHTMLではタグ名は小文字である。

<img [attribute=value ...] />

属性

img要素の属性の一覧を次に示します。

src
表示する画像のURIを指定します。
alt
代替文字列を指定します。代替文字列は画像を表示できないブラウザで画像の代わりに表示される文字列です。ブラウザによっては、画像にマウスポインタを合わせると代替文字列がポップアップ表示されることもあります。
longdesc
画像に対する説明が記述されている文書のURI
name
名前を指定します。
height
画像の高さをピクセル単位かパーセンテージで指定します。
width
画像の幅をピクセル単位かパーセンテージで指定します。
align
画像の配置位置を指定します。以下の値の中から選択できます。
align属性
属性値 意味
right 右端に表示
left 左端に表示
border
画像の周りの枠線の幅をピクセル単位で指定する。border属性を省略した場合は、画像の周りに枠線は表示されない。ただし、img要素を <a href=" URI "> </a> で囲んで、画像をクリックすると他のページにジャンプするように設定すると、画像の周りに枠線が表示されるようになる。このとき、画像の周りに枠線を表示させたくない場合は、 border="0" と明示的に指定すれば枠線が表示されなくなる。
hspace
画像の周りの横方向の余白の大きさをピクセル単位で指定します。
vspace
画像の周りの縦方向の余白の大きさをピクセル単位で指定します。
galleryimg
大きな画像の上にマウスポインタを乗せたときに、イメージツールバー(画像の保存や印刷ができるポップアップメニュー)を表示させるか否かを指定します。
galleryimg属性
属性値 意味
true 表示する(規定値)
yes
false 表示しない
no

galleryimg属性はW3C標準仕様ではなく、Internet Explorer 6で独自拡張された属性である。IE6では<meta>タグで一括して指定することもできる。

Internet Explorer 7でgalleryimg属性は廃止された。

language
スクリプト言語を指定します。
lowsrc
大きな画像を表示するのに時間がかかる場合、画像データを読み込んでいる間に表示する代替画像のURIを指定します。
onerror
画像ファイルの読み込みに失敗したときに実行されるスクリプトを指定する。

W3C標準仕様ではない独自拡張属性だが、多くのWebブラウザでサポートされている。

HTMLのバージョンにより、指定できる属性が異なります。HTMLのバージョンごとに指定できる属性の一覧を次の表に示します。

img要素の属性
属性 HTML 4.01
Transitional
HTML 4.01
Strict
XHTML 1.0
Strict
id
class
style
title
lang
dir
galleyimg × × ×
onclick
ondblclick
onerror × × ×
onmousedown
onmouseup
onmouseover
onmousemove
onmouseout
onkeypress
onkeydown
onkeyup
src
alt
longdesc
name ×
height
width
usemap
ismap
align × ×
border × ×
hspace × ×
vspace × ×

◎ …… 指定必須
○ …… 指定可能(省略可)
× …… 指定不可

コンテンツモデルのカテゴリ

フローコンテンツ、フレージングコンテンツ、エンベデッドコンテンツ、インタラクティブコンテンツ

DTD

HTML の各要素は DTD によって定義されています。 IMG 要素が DTD でどのように定義されているかを見るには、次のリンクをクリックしてください。

サンプル

IMGタグのサンプルを示す。

<img src="/img/sleepiece.jpg" alt="sleepieceの缶バッヂ(原寸)">

sleepieceの缶バッヂ(原寸)

高さ又は幅のどちらか片方だけを指定した場合、アスペクト比が維持されたまま拡大又は縮小される。

<img src="/img/sleepiece.jpg" height="100px" alt="sleepieceの缶バッヂ(高さ100)">
<img src="/img/sleepiece.jpg" style="height: 100px;" alt="sleepieceの缶バッヂ(高さ100)">

sleepieceの缶バッヂ(高さ100)

高さと幅の両方を指定した場合、指定した大きさで表示される。このときアスペクト比は維持されない。

<img src="/img/sleepiece.jpg" height="100px" width="180px" alt="sleepieceの缶バッヂ(高さ100、幅180)">
<img src="/img/sleepiece.jpg" style="height: 100px; width: 180px;" alt="sleepieceの缶バッヂ(高さ100、幅180)">

sleepieceの缶バッヂ(高さ100、幅180)

スポンサーリンク