Go to information

img要素

  1. img要素
  2. align属性
  3. alt属性
  4. border属性
  5. height属性
  6. hspace属性
  7. ismap属性
  8. longdesc属性
  9. name属性
  10. src属性
  11. usemap属性
  12. vspace属性
  13. width属性
  14. その他の属性

img要素

img要素(image)は指定した部分にイメージ(画像)を埋め込みます。終了タグはなく内容をもたない空要素です。src属性は必須属性で画像ファイルの所在となる URI を指定します。さらに、何らかのトラブルで画像が表示できない場合や音声出力・点字出力などの非視覚環境、画像の表示に対応していない・あるいは表示しない設定にしている環境においても画像の表現する情報を取得できるように必ず alt属性で代替テキスト(altanative text)を記述する必要があります。

画像は文字による説明に加えてユーザーの理解を促すために、または文章で表現するよりも画像で表現した方が分かりやすい情報の場合に使用します。たとえば、グラフや地図など、文章で説明するよりもその情報を画像として提供した方がわかりやすい性質の場合に適しています。ウェブページの見栄えを整えるためなどの装飾目的に使用することは、HTML の本義としては正しい使い方ではありません。なぜなら見栄えの調整のための画像では、それが何を表しているのかを適切な代替テキストの内容に置き換えることができない場合があるためです。環境に依存し、適切な代替方法を行うことができないこともあるため制作者はユーザーの視点に立って、それらは本当に必要なのかどうかをよく考えてから、必要最低限使用するようにしましょう。

バージョン
要素型
インライン要素
開始タグ
必須
終了タグ
なし
非推奨
-
内包可能
-

align属性

バージョン
指定要素
img
必須
-
非推奨
属性値

画像とその後に続くテキストの揃え方を指定します。指定できる値には次の5つのキーワードがあります。キーワードは半角アルファベットの大文字・小文字が区別されません(case-insensitive)。

left
画像は左に配置、その右にテキスト(複数行)が回り込む
right
画像は右に配置、その左にテキスト(複数行)が回り込む
top
画像の上辺に合わせてテキスト(1行)を上揃えに表示
middle
画像の垂直方向の長さの中央にテキスト(1行)を表示
bottom
画像の下辺に合わせてテキスト(1行)を下揃えに表示

align属性は非推奨属性のため、CSSfloatプロパティで左右の配置とその後に続くテキスト(複数行)の揃え方を、vertical-alignプロパティでテキスト(1行)との垂直方向の並びをそれぞれ代替することが推奨されています。また、回り込んだテキストを途中で解除したい場合は br要素に clear属性を指定すれば良いのですが、clear属性も非推奨属性のため、画像の後に続くブロック要素に clearプロパティを指定すると良いでしょう。

alt属性

バージョン
指定要素
img
必須
必須属性
非推奨
-
属性値
代替テキスト(altanative text)

何らかのトラブルで画像が表示できない場合や音声出力・点字出力などの非視覚環境、画像の表示に対応していない・あるいは表示しない設定にしている環境において、その画像の表現する情報の代替となるテキストを記述します。alt属性は必須属性です。代替テキストは画像の内容を説明するのではなく、画像の表現する情報の代わりになるテキスト情報であって、画像の説明については title属性で提供するのが適切です。

border属性

バージョン
指定要素
img
必須
-
非推奨
属性値
整数(pixels)

画像の周りに境界線を表示させます。Macintosh版Internet Explorer 5 や Opera では border属性の初期値は "0" に設定されているため枠線は表示されませんが、UA によっては画像を内容にしたリンクが設定されている場合に枠線を表示するものがあります。その場合に border="0" を指定することで画像を内容にリンクを設定した場合でも枠を表示しないようにできます。ただし、border属性は非推奨属性のため枠の表示指定は、CSS の borderプロパティで代替指定することが推奨されています。

height属性

バージョン
指定要素
img
必須
-
非推奨
-
属性値

画像を表示するときの高さを指定します。実際のサイズよりも大きくして表示することも可能ですが、その画像ファイルがもつ画像解像度は変わらないため、値を大きく指定した分、画像は荒く表示されます。また、画像のサイズをあらかじめ指定しておくとことで、UA は画像の読み込みを待たずに指定された画像サイズ分の領域をあけておいて、先に他の要素を表示するので、ページの全体像を早く表示することができます。レンダリングがスムーズに行えるようにするためにも必須属性ではありませんが、height属性と対の画像の横幅を設定する width属性を指定しておくことが望まれます。

hspace属性

バージョン
指定要素
img
必須
-
非推奨
属性値
整数(pixels)

画像と周りの内容の間に水平(左右)方向の余白を設けます。値は整数(ピクセル数で解釈)で指定します。余白の指定は CSS の marginプロパティで代替することが推奨されています。

ismap属性

バージョン
指定要素
img
必須
-
非推奨
-
属性値

CGIプログラムを利用したサーバサイド・イメージマップの場合に指定します。ユーザーが a要素のリンクに設定された画像をクリックすると画像の中でクリックされた座標値(x座標, y座標)をウェブサーバーを通してプログラムへと送ります。HTML4.01 では ismap、XHTML では属性値を省略できないため ismap="ismap" と記述します。

longdesc属性

バージョン
指定要素
img
必須
-
非推奨
-
属性値
URI

画像に関する詳細な説明がある URI を示します。視覚によらない非視覚環境に対して有効なもので、alt属性や title属性の情報を補うために用います。alt属性は画像の表現する情報の代わりとなるテキスト情報で、title属性はあくまでも端的な説明を行うためのものであって、詳しい説明をするために長々としたテキストを指定するのは現実的ではありません。特にクライアントサイド・イメージマップ(クリッカブルマップ)を重要なナビゲーション部分に用いている場合などはテキスト中心で構成されているサイトマップの URI を longdesc属性で指定しておくのはとても効果的な使い方です。

name属性

バージョン
指定要素
img
必須
-
非推奨
属性値
文字列

画像に名前をつけてスクリプト(JavaScriptなど)から参照できるようにします。name属性の値は半角アルファベットの大文字・小文字が区別されません(case-insensitive)。XHTML1.1 では name属性は完全に廃止されたため、代わりに id属性を使います。

src属性

バージョン
指定要素
img
必須
必須属性
非推奨
-
属性値
URI

画像ファイルの所在となる URI を指定します。src属性は必須属性です。

usemap属性

バージョン
指定要素
img
必須
-
非推奨
-
属性値
イメージマップ名

map要素で作成するクライアントサイド・イメージマップ(クリッカブルマップ)との関連づけをおこなう際に指定します。ハッシュ(#)を前置して usemap="#名前" という形で、map要素の name属性、または id属性の値を指定します。たとえば、map要素の name属性の値が name="map" であれば、img要素の usmap属性の値は usemap="#map" と指定します。

ただし、XHTML1.1 ではハッシュ(#)を前置する必要はありません。そのため、map要素の id属性の値が id="map" であれば、XHTML1.1 における img要素の usmap属性の値は usemap="map" と ID名だけを指定します。

vspace属性

バージョン
指定要素
img
必須
-
非推奨
属性値
整数(pixels)

画像と周りの内容との間に垂直(上下)方向の余白を設けます。値は整数(ピクセル数で解釈)で指定します。余白の指定は、CSS の marginプロパティで代替指定することが推奨されています。

width属性

バージョン
指定要素
img
必須
-
非推奨
-
属性値

画像を表示するときの横幅を指定します。実際のサイズよりも大きくして表示することも可能ですが、その画像ファイルがもつ画像解像度は変わらないため、値を大きく指定した分、画像は荒く表示されます。また、画像のサイズをあらかじめ指定しておくとことで、UA は画像の読み込みを待たずに指定された画像サイズ分の領域をあけておいて、先に他の要素を表示するので、ページの全体像を早く表示することができます。レンダリングがスムーズに行えるようにするためにも必須属性ではありませんが、width属性と対の画像の高さを設定する height属性を指定しておくことが望まれます。

その他の属性

共通属性
イベント属性
現在位置
  1. W3G
  2. XHTML
  3. HTML辞典
  4. img要素
ナビゲーション
ステータス情報
作者
上田 遼
公開
2005-09-26T01:32:46+09:00
更新
2008-12-29T04:27:09+09:00
URI
http://w3g.jp/xhtml/dic/img
検索

実績:大阪学院 入試サイト New! / 三田市民病院 / 神戸女学院大学 入試サイト / 釣りサンデー