いまさらHTML,CSS入門講座 | HTML5｜img要素 - 埋め込み関連 -

いまさらHTML,CSS講座 > HTML5 > img要素 - 埋め込み関連 -

img要素

img要素は、画像を表します。

src属性

src属性は必須の属性で、リソースを指定します。

指定できるリソースは、PNG、GIF、JPEGなど画像ファイルのほか、単一ページのPDFやSVGファイル、APNG、アニメーションGIFなどです。ただし、スクリプトを伴うSVGファイル、複数ページのPDFファイル、MNGファイル、HTMLドキュメント、プレーンテキストドキュメントなどは指定できません。

alt属性

alt属性は画像の代替として機能するテキストを指定します。

これは、画像の表示を無効化している場合や、音声ソフトウェア、テキスト・ブラウザ、音声・ブラウザなど、img要素の画像を見ることができないの環境下でのアクセス、また、画像を読み込む問題や画像のソースの誤りなどのケースに対して非常に重要なアクセシビリティを持ちます。そのため、alt属性の値は作成者に注意深く考慮することを要求されます。

特に指定されている場合を除き、alt属性を指定する必要があり、その値は空であってはなりません。また、値は画像に対して適切な置換でなければなりません。

適切な代替テキストを決定するためには、画像がページに含まれている理由を考えることが重要です。alt属性の代替テキストで悩んだら、その目的は何か？このように考え、ユーザーにとって何が重要かを考えます。

例a）とある色を選択するよう求めるコンテンツです。色は画像により表示されているため、画像が表示されない場合ユーザーは、alt属性の値のテキストがでしか得ることができません。

<h2>色を選択して下さい。</h2>
<ul>
<li><a href="red.html"><img src="red.jpg" alt="赤" width="88" height="31"></a></li>
<li><a href="blue.html"><img src="blue.jpg" alt="青" width="88" height="31"></a></li>
<li><a href="green.html"><img src="green.jpg" alt="緑" width="88" height="31"></a></li>
</ul>

表示）

上記のHTMLドキュメント

例b）とあるサイトのロゴです。alt属性にサイト名を指定しています。

<img src="eg_com.png" alt="e.g.com" width="88" height="31">

表示）

例b_1）とあるサイトのロゴです。例bと異なるのは、外部サイトへのハイパーリンクが指定してある点です。alt属性へ記述する値の意味が変わります。

<a href="http://example.com"><img src="eg_com.png" alt="e.g.com ウェブサイトへ" width="88" height="31"></a>

表示）

例c）とあるサイトのロゴです。文字列が2つに分かれている点、大文字小文字が混在する点を考慮して記述します。

<img src="html5_embedded_img/aaa_bb.png" alt="AaA bB" width="88" height="31">

表示）

例d）とあるブログやウェブサイトの装飾用のバナーです。画像がユーザーに伝える情報を持たない場合や、ユーザーにとって意味を持たない画像などは、alt属性には空の値を指定します。

<img src="example_banner.jpg" alt="" width="468" height="60">

表示）

なお、img要素は、レイアウトツールとして透明な画像を表示するために使用すべきではないとされています。

その他のalt属性の例は、4.7.1.1.2 General guidelines（英語）以降をご参照下さい。

usemap属性

usemap属性は、map要素の形式のメージマップに関連付ることができます。値は#に続き、任意の文字列（map要素のneme属性の値と同じ文字列）です。

イメージマップの詳細はmap要素をご参照下さい。

例）

<p>
<img src="image_map.jpg" usemap="#shapes"　alt="3つの形：青い円形、赤い四角形、緑の五角形" width="500" height="200">

<map name="shapes">
<area shape=circle coords="100,100,50" href="blue.html" alt="青い円形" target="_blank">
<area shape=rect coords="200,50,300,150" href="red.html" alt="赤い四角形." target="_blank">
<area shape="poly" coords="400,50,450,88,432,150,367,150,350,88" href="green.html" alt="緑の五角形" target="_blank">
</map>
</p>

表示）

上記のHTMLドキュメント

width属性、height属性

width属性は画像の幅、height属性は画像の高さを指定します。値は負以外の整数（ピクセル）ですが、単位の（px）はつけません。なお、HTML5より値の単位にパーセントを使うことができなくなりました。また、元のリソースと異なるアスペクト比で指定し故意に引き延ばすことはできません。