<img>要素(埋め込み画像)。

文書中に埋め込まれる画像である<img>要素についての解説です。

<img>要素(埋め込み画像)・目次。

<img>要素とは。

<img>要素とは、文書中に埋め込まれる画像です。

一般にGIF画像, JPEG画像及びPNG画像が<img>要素として埋め込まれます。

<img>要素を利用出来るHTML文書型。

<img>要素は、以下の文書型で利用出来ます。

<img>要素が含まれるXHTML モジュール。

<img>要素はismap属性以外はイメージ(画像)モジュールに属します。

ismap属性はサーヴァサイド・イメージマップモジュールに属します。

<img>要素の扱い。

<img>要素は置換インライン要素です。

画像を埋め込むだけですので、内容となるものはありません。

従って空要素となります。

<img>要素の属性。

<img>要素には、以下の属性が定められております。

src属性(必須)
埋め込む画像のURIを指定します。
alt属性(必須)
当該画像が表示出来ない場合に代わりとなるテキストを指定します。詳しくはalt属性についてをご覧下さい。
共通属性

<img>要素で使える共通属性には

があります。

longdesc属性

当該画像が表示出来ない場合に代わりとなるテキストコンテンツへのリンク先URIを指定します。

詳しくはlongdesc属性についてをご覧下さい。

name属性

JAVAスクリプトなどが画像オブジェクトを取扱うための名前を指定します。

尚、name属性はid属性に置き換えられるべきものとされており、HTML 4.01及びXHTML 1.0でもname属性とid属性に同じ属性値を与える事とされております。

width属性
height属性

それぞれ画像の横幅・高さをピクセル数またはパーセンテージ「○%」で指定します。

usemap属性

クライアントサイドのクリッカブルマップで利用する画像の場合は、以下の値ををusumap属性値として記述します。

HTML 3.2, HTML 4.01, ISO-HTML及びXHTML 1.0の場合

対応する<area>要素のURI。実際には同一ページ内の対応する<area>要素のname属性値またはid属性値の前に「#」をつけた文字列をusemap属性値に指定します。

  • 同一ページ内のものなので、URLは省略され「#」で始まるフラグメント名のみを記述する事になります。
XHTML 1.1の場合

対応する<area>要素のid属性値そのものをusemap属性値に指定します。

ismap属性

サーヴァサイドのクリッカブルマップで利用する画像の場合は、このismap属性値を指定します。

以下に挙げる<img>要素の属性はHTML 3.2, トランジッショナル文書型及びフレームセット文書型でのみ利用出来る属性で、いずれも排除勧告が出されております。

align属性

align属性は画像の配置を指定します。

値には以下の五つがあります。

left
左に寄せます。後続するテキスト類は、右に廻り込みます。
right
右に寄せます。後続するテキスト類は、左に廻り込みます。
middle
画像の上下方向の中央をテキストのベースラインに合わせます。
top
上端をテキストのベースラインに合わせます。
bottom
下端をテキストのベースラインに合わせます。

尚、align="lift"属性及びalign="right"属性が与えられた<img>要素以降のテキストの廻り込みを解除するには<br>要素のclear属性を用います。

hspace属性
vspace属性
hspace属性は画像の左右、vspace属性は画像の上下の余白をピクセル数(0以上の自然数)で指定します。
border属性
画像につける枠線の太さをピクセル単位(0以上の自然数)で指定します。

オープンウェーヴ社が定めた XHTML モバイル・プロファイルで利用出来る<img>要素の属性。

また、オープンウェーヴ社が定めた XHTML モバイル・プロファイルでも以下の属性が利用出来ます。

これらの属性はlocalsrc属性を除いてトランジッショナル文書型に含まれるものと全く同じですので、詳しくは該当する項目をご覧下さい。

align属性
align属性は画像の配置を指定します。
hspace属性
vspace属性
hspace属性は画像の左右、vspace属性は画像の上下の余白を指定します。
localsrc属性

EZウェブ独自の絵文字を利用する場合、localsrc属性で絵文字番号を指定します。

尚、表示出来ない絵文字番号が指定された場合にはsrc属性で与えられた画像を表示するようにします。

<img>要素に関する注意事項。

画像はインライン要素です。

画像はインライン要素です。

このため、何らかのブロックレヴェル要素に入れなければなりません。

alt属性について。

状況に応じて適切なalt属性値を。

<img>要素でのalt属性は画像が表示出来ない環境で画像と同等の情報を与えるテキストを指定します。

例えば、封筒の画像を埋め込む場合、以下のように状況によって適切な値を入れなければなりません。

「今日は…を出しました」と言う文章に埋め込む場合
内容に応じて、alt="手紙"属性またはalt="メール"属性を与えます。
「<a href="mailto:…">…</a>」と言う、<a>要素に埋め込む場合
内容に応じて、alt="管理人へのご連絡"属性またはalt="管理人へのメール"属性などを与えます。
単なる飾りとして埋め込む場合

alt=""属性を与えます。

アンカーには必ず空でない値を。

<a>要素の内容に<img>要素しか無い場合、そのimg要素のalt属性値が空だと画像表示出来ない環境ではアンカーとして機能出来なくなってしまいます。

<a>要素内の<img>要素には必ず空でないalt属性を与えて画像表示出来ない環境でも適切なアンカーとなるようにして下さい。

ポップアップを期待した使い方はいけません。

インターネットエクスプローラやネットスケープ 4.xなどでは、画像にマウスカーソルを当てるとalt属性の値がポップアップするように実装されております。

このため、代替文字列では無くポップアップさせたい"画像の説明文"をalt属性で指定しているマークアップが稀に見られますが、"画像が見られない環境での代替文字列"と"画像の説明"は全く別の概念でしょう。

"画像の説明"にはalt属性ではなくtitle属性を用います。

くどいようですが、alt属性は画像が見られない場合の代替文字列を記述して下さい。

longdesc属性について。

画像表示出来ない環境向けの代替テキストが長過ぎてalt属性で表せない場合は、テキストだけで作った代替コンテンツをlongdesc属性でリンクします。

この場合、alt属性がアンカー代わりになるので、必ずalt属性には空でない文字列を与えておく必要があります。

例えば、平成18年度の売上グラフの場合は以下のようになります。

<img alt="平成18年度の売上" longdesc="sales2006.html" src="sales2006.GIF" width="320" height="240" />

この記述は、画像表示出来ない環境では、

<a href="sales2006.html">平成18年度の売上</a>

と等価になります。

実際には、longdesc属性に対応している環境は殆ど無いようなので、longdesc属性で代替文書へリンクする代わりに文書中のテキストで画像の内容を説明する方が確実かも知れません。

上記の例なら、以下のようになるでしょう。

<dl>
    <dt><img alt="平成18年度の売上" src="sales2006.GIF" width="320" height="240" /></dt>
    <dd>
        <dl>
            <dt>平成18年 4月<dt>
            <dd>平成18年 4月は…。<dd>
            <dt>平成18年 5月<dt>
            <dd>平成18年 5月は…。<dd>
                …
            <dt>平成19年 3月<dt>
            <dd>平成19年 3月は…。<dd>
            </dl>
        </dd>
    </dl>

width属性及びheight属性について。(平成18年 9月13日)

width属性及びheight属性について、片方のみ指定している場合、仕様には明確な記述は見られませんが、実装としては、<img>要素をレンダリングする殆ど全ての視覚系ウェブブラウザで片方に合わせてもう片方の値も調整されるようになっているようです。

しかしながら、本当に指定された側のみ反映させるウェブブラウザが存在しないとは言い切れないので、width属性及びheight属性の片方を指定するのであれば、もう片方もそれに合わせて指定するのが賢明でしょう。

<img>要素の記述例。

<h1><img alt="しらぎくさいと" src="Marguerite.GIF" width="200" height="40" /></h1>

関連項目。

<object>要素
HTML文書に埋込まれるオブジェクト
<map>要素
クライアントサイドクリッカブルマップ
<area>要素
クライアントサイドクリッカブルマップの領域指定

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com