img要素

Home>HTML>要素リファレンス>img

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

img要素の役割

img要素は、画像を表示する要素です。
最低限使うべき属性は、src、width、height、alt、titleでしょう。

img要素に設定できる属性

属性名 意味
align 画像の外に配置されるテキストとの位置関係。非推奨。
alt 画像の代替テキスト。
border 画像の枠線。非推奨。
class クラス名。CSSを適用するときなどに使用する。
dir 文字表記の方向。左から右(ltr)と、右から左(rtl)を指定する。通常はltrなので、右から左へ表記する言語を使わないのであれば、指定しなくてよい。
height 画像の高さ。
hspace 画像の左右にとられる空白。非推奨。
id ID名。CSSを適用するときに使用する。
ismap サーバーサイドイメージマップの指定。
lang 言語コード。日本語、英語といった言語を指定する。html要素に記述してあれば、明示する必要はない。
longdesc 画像の詳細な情報が書いてあるURL。
name 画像の名前。
src 画像ファイルのURL。
style スタイルシートを直接記述する。
title 補足情報。テキストにカーソルを合わせるとtitle属性に指定した文字列をポップアップで表示する。
usemap クライアントサイドイメージマップの指定。
vspace 画像の上下にとられる空白。非推奨。
width 画像の横幅。

img要素の使い方

<img src="../../../data/img/global/dummy.jpg" alt="ダミー画像" width="100" height="100">

ダミー画像

align属性

画像と同じ行にテキストを配置したときの、画像とテキストの位置関係を指定する属性です。

bottom 画像の下側にテキストを表示する dummyテキストとの位置関係
left 画像を左、テキストを右表示する dummyテキストとの位置関係
middle 画像の高さ、中央にテキストを表示する dummyテキストとの位置関係
right 画像を右、テキストを左に表示する dummyテキストとの位置関係
top 画像の上側にテキストを表示する dummyテキストとの位置関係

ただし、align属性は非推奨なので、CSSのプロパティのtext-alignfloatvertical-alignを使いましょう。

alt属性

画像が何らかの問題により表示されなかった場合、その部分に表示されるテキストを指定します。
例えば、ブラウザが画像の読み込みに失敗したり、ユーザがブラウザに画像を読み込ませない設定をしていた場合、その部分に何が表示されているのかわからないと、理解の妨げとなります。
また、SEO観点からも、クローラがalt属性のテキストを読み込んで、画像が何に関するものなのかがわかるようにすると、効果があがります。

なお、alt属性は、マウスカーソルを合わせるとポップアップでその内容を表示するというものではありません。InternetExplorerなどの一部のブラウザではポップアップする独自仕様になっていますが、基本的には画像が表示されなかったときに表示されるテキストなので、ポップアップしないブラウザもあります(InternetExplorer8ではポップアップしません)。
説明文を表示したいのであれば、title属性を用います。

border属性

画像に枠線を表示します。0を指定すると、枠線は表示されません。1以降は枠線の太さに影響します。
画像をa要素で囲うことでリンクを設定すると、必ず枠線が表示されます。この枠線を消したい場合などにborder="0"を使います。
ただし、border属性は非推奨なので、CSSプロパティのborderで指定しましょう。

longdesc属性

その画像の詳細な説明文があるファイルへのURLを指定します。

widthとheight属性

画像を表示する際にwidth(横幅)とheight(高さ)を指定します。これらを省略した場合、画像は実際のサイズで表示されます。実際のサイズと異なるサイズをこれらの属性で指定すると、そのとおりに拡大・縮小されます。
予め画像のサイズを指定しておくと、ブラウザが画像を出力する際の手助けとなるので、実寸で表示する場合であっても必ず指定しましょう。

<img src="../../../data/img/global/dummy.jpg" alt="dummy" width="200" height="50">

 dummy

上記の例では、widthを200、heightを50に指定しました。

usemapとismap属性

map要素およびarea要素を使ったイメージマップ(クリッカブルマップ)を指定する際に、画像にmap要素のname属性またはid属性で指定した値を指定します。

<img src="../../../data/img/global/dummy.jpg" alt="dummy" width="100" height="100" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="9,38,90,63" href="#" alt="dummy" />
</map>

dummy dummy

上記のサンプルは、クライアントサイドイメージマップを設定しています。「DUMMY」の文字付近をクリックすると、このページの上部にジャンプします。

hspaceとvspace属性

画像の上下左右にマージン(空白)とるための属性です。

<img src="../../../data/img/global/dummy.jpg" alt="dummy" width="100" height="100" hspace="10" vspace="10" />

dummy

hspaceは左右、vspaceは上下に空白をとります。上のサンプルでは、上下左右とも10pxのマージンをとっています。
hspace、vspaceはともに非推奨属性となっているので、CSSのmargin-topmargin-bottommargin-leftmargin-rightで代用しましょう。

関連リンク

よく読まれている記事

UpDate:2010-4-8