構文
説明文
<img>タグは,画像ファイルをWebページ上に表示する。<img>タグの「src」属性に画像ファイルのURLを指定する。また,扱える画像ファイルの形式はWebブラウザによって異なる。一般的にGIF,JPEG,PNGなどの画像を扱えることが多い。
Webブラウザによっては文字情報のみで表示するものや,目の不自由なユーザー向けに読み上げる機能を搭載するものがある。これらのWebブラウザでは,画像が表示できないため,どのような画像が表示されているか判断できない。そこで,<img>タグの「alt」属性に画像の説明文を記載するようにする。例えば,日経Linuxのロゴであれば「alt="日経Linux"」などと指定しておく。
また,画像の表示サイズを「width」と「hight」属性に指定できる。もし,実際の画像とサイズが異なる場合は,属性に指定したサイズに従って大きさ変える。ただし,Webブラウザによっては画像サイズの変更に対応しない場合もあるの。
<img>タグはインライン要素であるため,基本的にブロック要素の中で利用するようにする。
サンプル
HTMLソース
<div><img src="img.jpg" alt="犬の写真"></p>
ブラウザ表示例
対応状況
HTML |
IE |
Firefox |
Opera |
4 strict |
4 Transitional |
5 |
6 |
7 |
2 |
3 |
8 |
9 |
○ |
○ |
○ |
○ |
○ |
○ |
○ |
○ |
○ |
要素,タグ
タグ要素 |
インライン要素 |
包括可能要素 |
無し |
タグ記述条件 |
開始タグ:必須 終了タグ:無し |
属性
よく利用する属性
属性 |
意味 |
対応 |
HTML 4s |
HTML 4t |
その他 |
align=配置位置 |
画像の配置位置を指定する。「left」は左揃え,「right」は右揃え,「top」は上揃え,「bottom」は下揃え,「middle」は縦方向で中央に表示する |
× |
○ |
|
alt=文字列 |
画像の代替文字列を指定する。Webブラウザなどが画像表示に対応していない場合はalt属性に指定した文字列が表示される |
○ |
○ |
|
border=幅 |
画像の回りに表示する枠線の幅を指定する。画像をリンクをすると枠線が表示される。「0」を指定すると枠線を消せる |
× |
○ |
|
height=高さ |
画像の高さを指定する。単位はピクセル。割合で指定したい場合は「%」を付ける |
○ |
○ |
|
src=URL |
表示する画像ファイルのURLを指定する |
○ |
○ |
|
width=幅 |
画像の横幅を指定する。単位はピクセル。割合で指定したい場合は「%」を付ける |
○ |
○ |
|
その他の属性
属性 |
意味 |
対応 |
HTML 4s |
HTML 4t |
その他 |
class=クラス名 |
このタグのクラス名。CSSでスタイルを指定する場合などに利用される |
○ |
○ |
|
dir=方向 |
タグ内の文字の表示方向。「ltr」を指定すると文字を左から右に,rtlを指定すると「右から左」に表示する。しかし,多くのWebブラウザでは,文字コードを自動判別し,自動的に表示方向を決定している。そのため,日本語を「rtl」と指定しても実際には左から右に表示される。強制的に並び替えを行いたい場合は<bdo>タグを利用する |
○ |
○ |
|
hspace=余白幅 |
画像に対して縦余白を指定する。単位はピクセル |
× |
○ |
|
id=ID |
タグのID。ダイナミックHTMLでタグを操作する場合や,Java Scriptでのタグの制御,個別にスタイルを指定する場合などに利用する |
○ |
○ |
|
ismap |
サーバー側でクリカッブルマップを利用する際に指定する |
○ |
○ |
|
lang=言語 |
タグ内に記述した言語。例えば,日本語の場合は「ja」,英語の場合は「en」を指定する |
○ |
○ |
|
lowsrc=UIRL |
ダウンロード中に表示する画像のURLを指定する。画像が大きい場合等に容量が小さい荒い画像を一時的に表示するなどに利用する |
× |
× |
IE,Fox |
longdesc=URL |
画像の説明文など関連する情報が記載されたURLを指定する |
○ |
○ |
|
name=名前 |
この画像の名前を指定する。スクリプト等で画像を操作する場合などにりょうされる |
○ |
○ |
|
style=スタイル |
タグのスタイル。スタイルの指定方法については「CSSの基本 (2) CSSの記述位置」を参照 |
○ |
○ |
|
title=タイトル |
タグのタイトル。一般的にタグの補足情報を記述する。一般的なWebブラウザでは,タグ上にマウス・ポインタを乗せるとツール・チップにtitle属性に指定した内容を表示する |
○ |
○ |
|
usemap=名前 |
画像をクリッカブルマップとする場合に,<map>タグのname属性の値を指定する。詳しくは<map>を参照 |
○ |
○ |
|
vspace=余白幅 |
画像に対し横余白を指定する。単位はピクセル |
× |
○ |
|
マウスやキーボードの状況変化に関わる属性
属性 |
意味 |
対応 |
HTML 4s |
HTML 4t |
その他 |
onclick=スクリプト |
このタグに対応する表示結果にマウスの左ボタンをクリックした場合に,指定したスクリプトを実行する |
○ |
○ |
|
ondblclick=スクリプト |
このタグに対応する表示結果にマウスの左ボタンをダブル・クリックした場合に,指定したスクリプトを実行する |
○ |
○ |
|
onmousedown=スクリプト |
このタグに対応する表示結果にマウスのボタンで押下した場合に,指定したスクリプトを実行する |
○ |
○ |
|
onmouseup=スクリプト |
このタグに対応する表示結果にマウスのボタンを離した場合に,指定したスクリプトを実行する |
○ |
○ |
|
onmouseover=スクリプト |
このタグに対応する表示結果にマウス・ポインタが乗った場合に,指定したスクリプトを実行する |
○ |
○ |
|
onmousemove=スクリプト |
このタグに対応する表示結果上でマウス・ポインタが動いた場合に,指定したスクリプトを実行する |
○ |
○ |
|
onmouseout=スクリプト |
このタグに対応する表示結果にマウス・ポインタが外れた場合に,指定したスクリプトを実行する |
○ |
○ |
|
onkeypress=スクリプト |
このタグに対応する表示結果にフォーカスした状態で,キーボードのキーを押下して離した場合に,指定したスクリプトを実行する |
○ |
○ |
|
onkeydown=スクリプト |
このタグに対応する表示結果にフォーカスした状態で,キーボードのキーを押下した場合に,指定したスクリプトを実行する |
○ |
○ |
|
onkeyup=スクリプト |
このタグに対応する表示結果にフォーカスした状態で,キーボードのキーから離した場合に,指定したスクリプトを実行する |
○ |
○ |
|
関連項目