- 主な堀北真希うさぎ収録作品
この記事は XHTML 1.0 入門としての<img>要素についてについての記事です。
HTML 5 入門に於ける該当記事は、HTML 5での<img>要素についてをご覧ください。
HTML文書に埋め込まれる画像・<img>要素について解説します。
<img>要素は、HTML文書に埋め込まれる画像です。
画像自体はマークアップされるテキストではないため、<img>要素は内容となるテキストを持たない空要素となります。
また、<img>要素は語句単位と見なされるため、当然インライン要素となります。
この事は、例え本文に埋め込まれる訳ではない飾りや図解などであっても、何らかのブロックレヴェル要素の中に入れなければならないと言う事でもあります。
通常の見出しや段落に埋め込まれた画像であれば特に問題はありませんが、飾りや図解などの場合には、通常の段落とは違うため<p>要素とする訳にも行きません。
そのような場合には幾つかの方法がありますが、画像が通常の段落とはならない場合には取敢えずリストとしてマークアップする事をお勧めします。
<img>要素には、幾つかの属性が定義されておりますが、その中で最も重要なものを挙げておきましょう。
画像が見られない場合の代わりの情報となる代替テキストです。
音声出力や点字出力、或いは視覚系の出力でも画像表示を閲覧者側が制限している場合にはこの属性の値を画像に代わるテキストとして埋め込みます。
従って、非常に重要な属性とされております。
それぞれ画像の横幅と高さをピクセル数で指定します。
インターネットエクスプローラなどのグラフィカルなウェブブラウザは、HTMLを前から順番に読み込みながら上から順次表示して行きます。
画像の大きさが分からないと画像を読み込むまでページのレイアウトが確定しないため、画像以降に書かれたテキストもレイアウトが確定するまで表示出来なくなります。
その結果、閲覧者は画像を読み込むまで延々待たされる事になります。
この属性を与える事に依り、画像の大きさを把握出来るようになり、画像の読込みが完了していなくても取敢えずレイアウトを確定出来るため、後続のテキストもスムーズに表示されて行くようになります。
尚、実際の画像と異なる値にした場合には適宜拡大縮小されますが、大きな画像を小さく表示させるためにこの属性を用いるべきではありません。
alt属性は画像が見られない場合の情報となる代替テキストです。
画像が表示出来ない場合、画像が見られない場合にはalt属性の値を画像代わりに表示する事で内容が理解出来るようになります。
このため、<img>要素ではalt属性が最も重要な属性と見なされる事もあります。
しかし、いい加減なテキストにしてしまうと、却って閲覧者を混乱させる事になり兼ねません。
ここでは、alt属性にどのようなテキストを当てれば良いのかを考えて見ましょう。
の場合。例として、以下の画像を考えて見ましょう。
(幅28ピクセルズ・高さ18ピクセルズ)この画像を埋め込む場合の<img>要素は以下のようになります。
人気女優をモデルにした制作者のオリジナルキャラクタを用いたイラストの一例とアニメーション動画<img alt="？？？？？？" src="Envelope.GIF" width="28" height="18" />さて、alt属性には何を入れるべきでしょうか。
主な例を幾つか挙げてみましょう。
をご用意下さい。」と言う段落の場合この場合、文脈にも依りますが、普通なら封筒をご用意下さいと言う意味に取れますね。
つまり、代替テキストとしては封筒が順当と言えます。
従って
<p>先ず<img alt="封筒" src="Envelope.GIF" width="28" height="18" />をご用意下さい。</p>と記述する事になります。
を出しました。」と言う段落の場合手紙かそれともメールか、文脈を考えてそのいずれかを代替テキストとします。
例えば手紙であるなら、
<p>今日、私は<img alt="手紙" src="Envelope.GIF" width="28" height="18" />を出しました。</p>と記述する事になります。
この場合、<a>要素でメールアドレスかメールフォームへのリンクになっていると思いますが、その場合には管理人へのメールを出すなどの代替テキストとすれば良いでしょう。
すなわち、
<ul><li><a href="mailto:admin@uso800.usotsuki.ne.jp"><img alt="管理人へメールを出す" src="Envelope.GIF" width="28" height="18" /></a></li></ul>
などと記述する事になります。
全く意味の無い飾りの画像であれば、代替テキストは寧ろ無い方が安全です。
しかし、その場合でも必ずalt=""属性を記述する必要はあります。
サイト運営者の方はしばしばアクセスカウンタをトップページに付けます。
アクセスカウンタは技術的な理由から画像を用いたものにする事が多いようです。
その場合、例えば、
<ul class="trafficCounter><li>あなたは、<img alt="アクセスカウンタ" src="http://www.usocgi.com/cgi-bin/usocounter.cgi?id=xxxxxxx" width="60" height="18" />人目のお客様です。</li></ul>
等とマークアップすると、おかしな事になります。
画像の表示出来ない環境だと、この文章は、
と言う間抜け且つ意味不明な内容になります。
かと言って、カウンタは毎回値が変わるので、それをHTMLに反映させる事は不可能です。
このような場合、最も無難なのはアクセスカウンタを文章に組込まず、代替文字列も空文字列にしておく事です。
つまり、
<ul class="trafficCounter><li><img alt="" src="http://www.usocgi.com/cgi-bin/usocounter.cgi?id=xxxxxxx" width="60" height="18" /></li></ul>
としておけば、画像が見られない環境で閲覧した方に意味不明なノイズを与えずに済みます。
<a>要素(アンカー)に画像を埋め込む場合、必ずアンカーには何らかのテキストが入らないとアンカーとして役立たずになってしまいます。
このため、アンカーに画像を埋め込む場合には、その画像の代替テキストを含めてアンカーテキストとなるようにする必要があります。
例えば、
<ul class="tinyNavigation"><li><a href="index.html"><img alt="" src="toIndex.GIF" width="100" height="40" /></a></li></ul>
と言うHTMLでは、画像が表示出来ない環境では空のアンカーになってしまい、選択する事さえ出来なくなってしまいます。
これでは困りますので、必ず代替テキストを与えるようにして下さい。
例えば、以下のようにすれば、画像表示が出来ない環境でもトップページへのリンクと分かる筈です。
<ul class="tinyNavigation"><li><a href="index.html"><img alt="トップページに戻る" src="toIndex.GIF" width="100" height="40" /></a></li></ul>
<img>要素では代替テキストはalt属性とします。
つまり、タグの中に記述されるテキストとなります。
一方、画像に依っては代替テキストが長くなり過ぎてしまう場合があります。
例えば、平成20年度の売上げを表わしたグラフの画像の代替テキストはこんな感じになるでしょう。
<p>平成20年度の売上は以下のようになりました。</p><dl><dt>平成20年 4月</dt><dd>平成20年 4月は…</dd><dt>平成20年 5月</dt><dd>平成20年 5月は…</dd>…<dt>平成21年 3月</dt><dd>平成21年 3月は…</dd></dl>
このように、長いだけでなくインラインと言うよりブロックそれも複数のブロックからなる代替テキストとなってしまう訳です。
当たり前ですが、属性にはマークアップされたテキストを入れる事は出来ません。
このような長過ぎたり、マークアップが必要なテキストが代替テキストとなってしまう場合、<img>要素のalt属性では対応する事が出来ません。
それでは、このような場合にはどうしたら良いでしょうか。
画像の内容をテキストだけで書いたHTML文書にリンクする事で、画像が読めない場合でも適切に情報を得られるようになります。
例えば、このようにします。
<ul class="figure"><li><a href="Sales2008-2009.html"><img alt="平成20年度売上の詳細" src="Sales2008-2009.GIF" width="500" height="350" /></a></li></ul>
ここでは、
Sales2008-2009.html は平成20年度の売上げをテキストだけで表わしたHTML文書Sales2008-2009.GIF は平成20年度の売上げのグラフが描かれているGIF画像としております。
この場合、画像表示が出来ない環境では、平成20年度売上の詳細と言うアンカーとなる筈です。
尚、画像の横に説明などとした小さなリンクを出す事がありますが、このようなリンク(D-リンク)はリンク先の内容が分かりにくいため好ましくないものです。
実は<img>要素にはこのように代替テキストだけで一本のHTML文書が出来てしまうような場合の対策が用意されております。
それがlongdesc属性です。
longdesc属性は、画像の代替テキスト文書のURLで、これに依り当該画像がlongdesc属性で表わされる文書へ関連付けられたリンクとなります。
例えば、このようにします。
<ul class="figure"><li><img longdesc="Sales2008-2009.html" alt="平成20年度売上の詳細" src="Sales2008-2009.GIF" width="500" height="350" /></li></ul>
と書くと、
<ul class="figure"><li><a href="Sales2008-2009.html"><img alt="平成20年度売上の詳細" src="Sales2008-2009.GIF" width="500" height="350" /></a></li></ul>
と同じように扱われる訳です。
実はこれが最も簡単な対策かも知れません。
わざわざ画像とは別に代替テキストを一本のHTML文書にしないで、画像を埋め込んだHTML文書に併せて書いてしまうと言う訳です。
こうすれば、当該画像への代替テキストはもはや空でも良いでしょう。
画像を埋め込んだHTML文書内に代替テキストを書き込むのであれば、もう一つの方法があります。
それは<img>要素の代わりに<object>要素で画像を埋め込む事です。
<object>要素は画像のみならず様々な埋め込みオブジェクトに対応した要素です。
また、<object>要素は空要素ではなく、内容としてオブジェクトに与えるパラメータと代替テキストが入れられるようになっております。そして、代替テキストのマークアップも勿論可能です。
加えて、<object>要素はインライン要素ですが、代替テキストとしてブロックレヴェル要素を入れる事も許されております。
そこで、これを<img>要素の代わりとして利用します。
ただ、残念な事にインターネットエクスプローラ 7.0までにはこの<object>要素の処理に不具合が多数あり、画像もまともに埋め込んでくれないのです。
現状、インターネットエクスプローラの7.0までが市場の過半数を占めている事を考えると、残念ながらこのエレガントな方法はまだ使えないと言った方が良いでしょう。
ですが、このような方法もある事は知っておいて損はない筈です。
実際に画像を<object>要素とする場合、以下のようになります。
<div class="sales"><object type="image/gif" data="Sales2008-2009.GIF" width="500" height="350"><p>平成20年度の売上は以下のようになりました。</p><dl><dt>平成20年 4月</dt><dd>平成20年 4月は…</dd><dt>平成20年 5月</dt><dd>平成20年 5月は…</dd>…<dt>平成21年 3月</dt><dd>平成21年 3月は…</dd></dl></object></div>
ここで、
に注意してください。
<object>要素のtype属性は必須ではありませんが、どのようなオブジェクトかを知らせる事で、ウェブブラウザが対応しているか否か、すなわち読込むか否かを読込前に判断出来るので、書いておいた方が良いでしょう。
<object>要素で画像を埋め込む場合、
type="image/gif" 属性type="image/jpeg" 属性をそれぞれ与えます。
