WEB技術の辞書・解説・使用例

TOP > HTML >  HTMLタグ辞典 >  <img>
<img>  画像  メディア  定番 

画像を表示するタグ。

HTML4.0からは<IMG>のalt属性は必須。


WEBに使用できる画像形式はGIF・JPEG・PNGの3形式があります。


重要パラメーター

src="URI"
 画像のURIを相対パス・絶対パスのいずれかで指定。

width="n" height="n"
 画像の表示サイズを幅(width)と高さ(height)を指定。可能な限り設定することが推奨されています。
 
title="xxx"
 画像に関する説明を記述。マウスオーバーさせた場合に表示されます。

alt="xxx"
 その画像が表示されない場合に置き換わるような情報を記載。

align="right/left"
 表示位置を指定します。align="right" や align="left" を使用するとテキストが画像の周りを回りこんで表示されます。

border="n"
 画像の周りの枠線をピクセルで指定。
 画像に <a href="...">~</a>でリンクを設定すると枠線が表示されますが、border="0"で枠線を非表示にできます。

そのほかのパラメーター

galleryimg="bool"
 IEなどで画像にマウスを乗せた時に表示されるツールバー(印刷、保存機能など)を表示しないようにします。
<meta> で一括指定することも可能。
hspace="n"
 画像の左右の余白をピクセル単位で指定。
vspace="n"
 画像の上下の余白をピクセル単位で指定。
lowsrc="url"
 src属性で指定した画像が表示されるまで、指定したサイズの小さい画像を表示。
longdesc="url"
 長文の説明の場合に、説明ページの URLを指定(title属性の代わり)。

サンプルコード

<img src="../../img/enoki5.jpg" width="200" height="126" title="犬の写真1" alt="散歩に行きたい" />
散歩に行きたい

<a href="/http://web.shikaku-zukan.com/img/enoki3.jpg" target="_blank">
<img src="http://web.shikaku-zukan.com/img/enoki3.jpg" title="犬の写真2" alt="港の見える丘公園に散歩" />
</a>

<a href="/img/enoki4.gif" target="_blank">
<img border="0" src="/img/enoki4.gif" width="200" height="194" title="犬の写真3" alt="散歩につかれてお休み" align="right" />
</a>



HTMLの一般属性

属性説明
class="~"クラス名を指定。使用例
id="~"IDを指定します。使用例
style="~"スタイルシートを直接記述。使用例
title="~"タイトルを指定します。
dir="ltr|rtl"文字の表示方向を指定。 ltr(左から右)、rtl(右から左)
lang="~"言語を指定。日本語の場合は"ja"