img要素

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

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要素の使い方

align属性

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

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

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

alt属性

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

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

border属性

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

longdesc属性

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

widthとheight属性

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

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

usemapとismap属性

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

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

hspaceとvspace属性

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

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

よく読まれている記事

UpDate:2010-4-8

お薦めHTML解説書

〔Amazonの書籍紹介ページを開きます〕

実際に一つのウェブサイトをつくる過程を経験しながらHTMLやCSSを理解していくスタイルをとっている本。初心者向けで非常にわかりやすい構成です。

HTML文書をつくる上で辞典の存在は欠かせません。ウェブ上で調べればいいと思う人もいるかもしれませんが、やはり傍らにおいてすぐに調べられるようにしておくと作業は早くなります。中級者向け。

HTMLについてまったくの初心者が読む本。初心者であってもコンピュータ系に理解力がある人には向いていません。本書を読んで大体理解したら上掲の本などで理解を深めましょう。

CSSによる段組レイアウトXHTML／HTMLのテクニックを順を追って解説する良書。実戦的な内容で覚えた知識でウェブサイトをつくりはじめられます。

ウェブデザイン、ウェブサイト作成の初心者～中級者向けの本。丁寧なつくりでHTMLの要素、CSSのプロパティ解説ページにおいても関連ページの表記を細かく行っています。