img要素 -- 画像

基本データ

img要素
文書型	適用	子要素	開始タグ	終了タグ	分類
Strict	○	空要素	必須	禁止	インライン要素
Transitional	○
Frameset	○

属性

固有属性

src="画像のURI"(必須)

Strict: ○ | Transitional: ○ | Frameset: ○

画像のURIを指定します。この属性は必ず記述しなければいけません。

alt="代替文字列"(必須)

Strict: ○ | Transitional: ○ | Frameset: ○

画像が表示できない環境で、代わりに表示する文字列を指定します。テキストブラウザや画像表示をオフに設定したブラウザならこの属性の内容が画像の代わりに表示され、音声ブラウザならこの属性の内容が読み上げられます。この属性は必ず記述しなければなりません。Internet Explorerはalt属性の内容をポップアップで表示しますが、画像の注釈などはtitle属性に記述するのが正しい方法です。alt属性の詳しい説明はalt属性についてを参照してください。

longdesc="画像の詳細説明ページのURI"

Strict: ○ | Transitional: ○ | Frameset: ○

画像の詳細説明ページのURIを指定します。グラフの画像など、その内容をalt属性で伝えるのが難しい場合に利用します。

width="横幅"

Strict: ○ | Transitional: ○ | Frameset: ○

画像の横幅を指定します。画像本来の横幅以外の値を指定すると、画像が横に拡大・縮小されて表示されます。

height="縦幅"

Strict: ○ | Transitional: ○ | Frameset: ○

画像の縦幅を指定します。画像本来の縦幅以外の値を指定すると、画像が縦に拡大・縮小されて表示されます。

usemap="イメージマップのURI"

Strict: ○ | Transitional: ○ | Frameset: ○

クライアント側・イメージマップを使うときに、対象となるmap要素のname属性の値を「#ID」の形式で指定します。URIの形式を取るので「#」が必要です。

ismap

Strict: ○ | Transitional: ○ | Frameset: ○

サーバ側・イメージマップを使うときに指定します。この属性を指定したときは、img要素を<a href=?>〜</a>で囲まなければいけません。

name="名前"

Strict: ○ | Transitional: ○ | Frameset: ○

スクリプトなどから画像を参照できるように名前をつけます。名前に使える文字は英数字のみです。この属性は後方互換性のために残されており、名前はid属性でつけることが推奨されています。

align="表示位置"(非推奨)

Strict: × | Transitional: △ | Frameset: △

画像の表示位置を指定します。この属性は非推奨です。利用できる値は次のとおりです。

bottom: 下揃え
middle: 中央揃え
top: 上揃え
left: 画像を文章の左に回りこませます
right: 画像を文章の右に回りこませます

CSSを使って代用することができます。

下揃え: img { vertical-align: bottom; }
中央揃え: img { vertical-align: middle; }
上揃え: img { vertical-align: top; }
左に回りこみ: img { float: left; }
右に回りこみ: img { float: right; }

border="枠線の太さ"(非推奨)

Strict: × | Transitional: △ | Frameset: △

画像につける枠線の太さを指定します。この属性は非推奨です。

CSSで代用: img { border-width: 太さ; }

hspace="左右のスペース"(非推奨)

Strict: × | Transitional: △ | Frameset: △

画像の左右に挿入する空白の大きさをピクセル値で指定します。この属性は非推奨です。

CSSで代用: img { margin-left: 左の余白; margin-right: 右の余白; }

vspace="上下のスペース"(非推奨)

Strict: × | Transitional: △ | Frameset: △

画像の上下に挿入する空白の大きさをピクセル値で指定します。この属性は非推奨です。

CSSで代用: img { margin-top: 上の余白; margin-bottom: 下の余白; }

共通属性

解説

HTML中に画像を埋め込むための要素です。この要素は中身のない空要素です。

画像の形式は仕様書で定められていませんが、一般的にはJPEG、GIF、PNGなどがよく利用されます。

src属性に画像のURIを指定し、alt属性に画像の代わりになる文字列を記述します。この2つの属性は必ず記述しなければいけません。alt属性を記述していないページが多いですが、これは文法違反になります。

<p><img src="smplogo.png" alt="HTML 4 + CSS"
  width="388" height="63"></p>

HTML 4 + CSS

object要素を使って画像を埋め込むこともできます。

<object data="画像のURI" type="MIMEタイプ">
  画像の代わり
</object>

例えば、

<img src="cat.jpg" alt="ネコの写真">

は、object要素を使って

<object data="cat.jpg" type="image/jpeg">
  ネコの写真
</object>

と書き換えることができます。

img要素の場合、画像の代わりになるのはalt属性のテキストだけですが、object要素なら中身にブロックレベル要素とインライン要素のどちらも含むことができます。しかし、Internet Explorerはobject要素に対応していません。

以下はobject要素の表示例です。

alt属性

alt属性には画像を表示できない環境のために、代わりのテキストを用意します。普段Internet Explorerなど視覚系のブラウザを使っているとあまりピンとこないかもしれませんが、Lynxなどのテキストブラウザ、音声ブラウザ、画像表示をオフに設定した携帯電話のブラウザなど、画像を表示できない環境はたくさん存在します。

alt属性に記述するのは画像の代わりになるテキストであり、必ずしもalt属性=画像の説明ではありません。

× <img src="logo.png" alt="ロゴ">
○ <img src="logo.png" alt="□□会社">

画像が装飾のための意味のないものなら、alt=""としてください。可能ならば装飾のためのimg要素は使わずに、CSSで見た目を制御したほうがよいです。

× <img src="ball.png" alt="赤い玉">
○ <img src="ball.png" alt="">

longdesc属性

画像の内容をalt属性で表現しきれないときは、画像の内容を詳しく説明したページを別に作り、longdesc属性でそのURIを示す方法があります。

あらかじめ画像の内容を詳しく説明したHTML文書を作成しておきます。

<p>当サイトのアクセス解析を基にしたブラウザのシェアです。1位は
Internet Explorerで72%、2位はMozilla(Firefoxを含む)で15%、
3位はOperaで4%です。</p>

そして、longdesc属性でそのURIを指定します。

<p><img src="graph.png" alt="ブラウザのシェア：1位はInternet Explorer(72%)"
 longdesc="graph-desc.html"></p>

画像をアンカーにする

img要素はインライン要素ですから、a要素でアンカーにすることができます。

<p><a href="index.html"><img src="top.png" alt="TOP"></a></p>

タイトル画像

タイトルや見出しを画像で表現するときは、img要素をh1?h6要素としてマークアップします。

<h1><img src="logo.png" alt="HTML+CSS入門"></h1>

イメージマップ

画像やオブジェクトの特定部分をクリックするなどの操作をしたとき、特定の動作を行わせる仕組みをイメージマップと言います。例えば、日本地図の画像の中で東京の部分をクリックしたら、東京の地図の画像が表示されるといった具合です。イメージマップにはサーバ側・イメージマップとクライアント側・イメージマップの2種類があります。

クライアント側・イメージマップ

クライアント側・イメージマップとは、どの領域をクリックしたときにブラウザがどんな動作をするかを、map要素を使いHTML中で定義する方式です。詳細はmap要素を参照してください。

サーバ側・イメージマップ

サーバ側・イメージマップとは、画像をクリックしたときのマウスポインタの座標をCGIに送信する方式です。次のようにismap属性を設定したimg要素を、CGIプログラムのURIへリンクさせます。

<p><a href="http://www.example.com/program.cgi"><img src="pict.png" alt="" ismap></a></p>

画像をクリックすると、ブラウザは「http://www.example.com/program.cgi?x座標,y座標」というURIを送信します。例えば、x座標=10 y座標=30の箇所をクリックすると、URIは「http://www.example.com/program.cgi?10,30」となります。座標を受け取ったCGIプログラム(program.cgi)は、その処理結果をブラウザ側に送信します。

テキストブラウザや音声ブラウザなど画像の特定部分をクリックすることのできないブラウザは、サーバーサイドイメージマップを利用することができません。その場合は、x座標=0 y座標=0をサーバに送信します。

アクセシビリティの観点から、できるだけクライアント側・イメージマップを使うことがウェブコンテンツ・アクセシビリティ・ガイドライン 1.0で強く推奨されています。

参考サイト

Strict DTDの定義

<!-- To avoid problems with text-only UAs as well as
   to make image content understandable and navigable
   to users of non-visual UAs, you need to provide
   a description with ALT, and avoid server-side image maps -->
<!ELEMENT IMG - O EMPTY                -- Embedded image -->
<!ATTLIST IMG
  %attrs;                              -- %coreattrs, %i18n, %events --
  src         %URI;          #REQUIRED -- URI of image to embed --
  alt         %Text;         #REQUIRED -- short description --
  longdesc    %URI;          #IMPLIED  -- link to long description
                                          (complements alt) --
  name        CDATA          #IMPLIED  -- name of image for scripting --
  height      %Length;       #IMPLIED  -- override height --
  width       %Length;       #IMPLIED  -- override width --
  usemap      %URI;          #IMPLIED  -- use client-side image map --
  ismap       (ismap)        #IMPLIED  -- use server-side image map --
  >

Information

ナビゲーション

現在の位置

著作情報

Copyright © 石川一靖.
メール: elastic965@gmail.com
最終更新日: 2007年4月30日