img

img (Embedded image)

Functional list
意味	画像を指定します。 <img attributes...>は、srcアトリビュートで指定した画像ファイルをインラインイメージとして表示します。 EMPTYタグです。
親要素	以下のHTML要素で使えます。 `[ブロックレベル要素]` (`pre` 以外) \|`[インライン要素]` \|`body` (`body` はHTML transitional でのみ使用可。)
子要素	スタンドアローン・タグ。閉じタグ、内容（入力する値など）はありません。

Attribute
属性	値	HTMLバリエーション	入力が必要？	意味
`align`	`top` \|`middle` \|`bottom` \|`left` \|`center` \|`right`	transitional, frameset に使用可。	不要	画像の位置を調整します。
`alt`	`#CDATA`	strict、 transitional、 frameset に使用可。	必要	画像が何らかの理由で表示されない場合、代わりに内容を示すテキストを表示します。
`border`	`#CDATA`	transitional, frameset に使用可。	不要	画像の周囲に枠をつけます。枠の太さはピクセルあるいはパーセントで指定します。
`height`	`#CDATA`	strict、 transitional、 frameset に使用可。	不要	画像を表示する位置をピクセルあるいはパーセントで指定します。
`hspace`	`#CDATA`	transitional, frameset に使用可。	不要	画像と流れるテキストの水平方向の間隔をピクセルあるいはパーセントで指定します。
`ismap`	`ismap` (単独使用)	strict、 transitional、 frameset に使用可。	不要
`longdesc`	`#CDATA`	strict、 transitional、 frameset に使用可。	不要
`name`	`#CDATA`	strict、 transitional、 frameset に使用可。	不要	画像の名前を指定します。
`src`	`#CDATA`	strict、 transitional、 frameset に使用可。	必要	画像のソース・ファイルを指定します。
`usemap`	`#CDATA`	strict、 transitional、 frameset に使用可。	不要	`map` 要素のURIあるいはアンカー名を指定します。
`vspace`	`#CDATA`	transitional, frameset に使用可。	不要	画像と流れるテキストの間の横方向の間隔をピクセル数かパーセントで指定します。
`width`	`#CDATA`	strict、 transitional、 frameset に使用可。	不要	画像の表示巾を入力します。
`[共通属性]`

<img>タグとは、ドキュメントの中に画像を挿入するときに使われるタグです。

この<img>タグにはさまざまな属性がありますが、特に注意したいのがalt属性です。

alt属性の値に記述された内容は、画像にマウスポインタをロールオーバーするとポップアップ表示され、また、画像を表示しないブラウザ等でも代替テキストとして表示されるようになります。

SEO対策やユーザビリティーの観点からもalt属性には適切な内容を必ず記述したほうが良いでしょう。

また、size属性は必須ではありませんが、サイズを指定したほうが表示速度が速くなるため、できるだけ指定したほうが得策です。

<img align = "***">とは、<img>タグにalign属性を指定したもので、画像やそのまわりのテキストの配置を定義するものです。

値に"right"や"left"を指定した場合には、画像がページの右もしくは左に配置され、続くテキストは画像に回りこみ、複数行で表示されるようになります。

テキストの回りこみを解除する場合には、<br clear="***">を記述します。

また、値に"top"、"middle"、"bottom"を指定した場合には、画像に対するテキストの垂直方向の位置が指定され、それぞれ、上部、中央、下部に配置されます。

この場合の画像の隣のテキストは一行で表示されます。

<img alt = "***">とは、<img>タグにalt属性を指定したもので、画像の代わりに表示されるテキストを定義します。

画像ファイルの読み込みに失敗した場合や、ユーザーが画像を表示しない設定にしている場合などに、代替テキストが表示されます。

また、障害をもつユーザーにとってもドキュメントの内容を理解する上で重要な手がかりとなるため、必ずalt属性を指定するように心がけたほうが良いでしょう。

<img border = "***">とは、<img>タグにborder属性を指定したもので、画像のまわりの枠線を設定する場合に用いられます。

値には枠線の太さをピクセルで指定し、"0"に指定した場合は枠線は表示されません。

また、このborder属性の使用は推奨されておらず、今後はスタイルシートを利用した方が良いでしょう。

<img height = "***">とは、<img>タグにheight属性を指定したもので、画像の高さを設定するものです。

この属性を記述しない場合、画像は本来のサイズで表示されますが、ドキュメントのレイアウトの読み込み時に、より早く画像の表示スペースを確保するためにも指定しておいたほうが良いでしょう。

また、実際の画像サイズと異なる値を指定し、画像のサイズを変更することも可能ですが、見栄えや効率を考えると、あらかじめ画像ファイルにてサイズ変更をしておくほうが好ましいでしょう。

<img hspace = "***">とは、<img>タグにhspace属性を指定したもので、画像ファイルの左右に余白を設けるために使われます。

値はピクセルで指定します。

画像ファイルの上下に余白を設定する場合にはvspace属性を使います。

<img src = "***">とは、<img>タグにsrc属性を指定したもので、ブラウザに画像を表示させるためには必須の属性です。

値には画像ファイルの絶対URLもしくは相対URLを記述します。

<img usemap = "#***">とは、<img>タグにusemap属性を指定したもので、クライアントサイドイメージマップを利用する場合に使用されます。

この機能により一つの画像に複数のリンクを作成することが可能となります。

値には半角英数字で任意のマップ名を記述します。

クライアントサイドイメージマップの処理はブラウザで行われるため、サーバーサイドイメージマップと異なり、CGIは必要ありません。

具体的な処理内容は<map>タグ、<ａｒｅａ>タグにより定義します。

<img ismap = "ismap">とは、<img>タグにismap属性を指定したもので、<a>タグのハイパーリンク内で使用され、サーバーサイドイメージマップを利用する場合に用いられます。

この機能は対象画像をクリックした時に画像左上隅からの相対x座標とy座標をサーバーに送信し、その座標に基づいてサーバーのプログラムが処理内容を決定する仕組みになっています。

<img vspace = "***">とは、<img>タグにvspace属性を指定したもので、画像ファイルの上下に余白を設けるために使われます。

値はピクセルで指定します。

画像ファイルの左右に余白を設定する場合にはhspace属性を使います。

<img width = "***">とは、<img>タグにwidth属性を指定したもので、画像の幅を設定するためのものです。

解説