【HTML Living Standard】image属性値の使い方
image属性値の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
image定数は、HTMLの<input>要素のtype属性に指定することで、画像形式の送信ボタンを生成するために使用される定数です。テキストボタンではなく、グラフィカルな画像をボタンとして表示したい場合に利用されます。
この定数を指定した<input>要素は、src属性を用いて表示する画像のファイルパスを定義する必要があります。また、画像の表示に失敗した場合や、アクセシビリティ向上のために、alt属性で代替テキストを提供することが推奨されます。
ユーザーがこの画像ボタンをクリックすると、フォームデータとともに、クリックされたX座標とY座標もサーバーに送信されます。これにより、画像上の特定の地点がクリックされたかどうかの処理が可能となり、画像マップのような機能を実現する際に役立ちます。
image定数は、フォーム送信をトリガーする機能を持つだけでなく、ウェブページの視覚的な表現力を高める上で重要な役割を果たす要素です。
構文(syntax)
1<input type="image" src="submit-button.png" alt="送信">
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML イメージマップの作成
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>イメージマップのサンプル</title> 7 <style> 8 body { 9 font-family: sans-serif; 10 margin: 20px; 11 } 12 img { 13 border: 1px solid #ccc; 14 max-width: 100%; 15 height: auto; 16 } 17 </style> 18</head> 19<body> 20 21 <h1>イメージマップの例</h1> 22 <p>以下の画像はイメージマップが設定されています。特定の領域をクリックすると、それぞれ異なるリンクへ移動します。</p> 23 24 <!-- 25 <img>要素にusemap属性を指定することで、画像と<map>要素を関連付けます。 26 usemapの値は、参照する<map>要素のname属性と一致させます（#を前置）。 27 alt属性は画像が表示されない場合の代替テキストを提供します。 28 --> 29 <img src="https://via.placeholder.com/600x400/FFDDC1/333333?text=Clickable+Image" 30 alt="クリック可能なサンプル画像" 31 usemap="#sampleMap"> 32 33 <!-- 34 <map>要素は、<img>要素に設定されたイメージマップの定義を格納します。 35 name属性は、<img>要素のusemap属性から参照される識別子です。 36 --> 37 <map name="sampleMap"> 38 <!-- 39 <area>要素はイメージマップ内のクリック可能な領域を定義します。 40 shape属性で領域の形状（rect, circle, poly, default）を指定します。 41 coords属性でその形状に応じた座標を定義します。 42 href属性はクリックした際のリンク先を指定します。 43 alt属性は、この領域の代替テキストを提供します。 44 --> 45 46 <!-- 四角形領域の例 (左上の領域) --> 47 <area shape="rect" 48 coords="50,50,250,200" 49 href="https://www.google.com" 50 alt="Googleへリンク" 51 title="Googleへ移動します"> 52 53 <!-- 円形領域の例 (右下の領域) --> 54 <area shape="circle" 55 coords="450,300,80" 56 href="https://www.bing.com" 57 alt="Bingへリンク" 58 title="Bingへ移動します"> 59 60 <!-- 多角形領域の例 (中央の不定形領域) --> 61 <area shape="poly" 62 coords="300,100,400,50,500,150,450,250,350,200" 63 href="https://www.yahoo.com" 64 alt="Yahoo!へリンク" 65 title="Yahoo!へ移動します"> 66 67 <!-- 68 default領域の例 (上記いずれにも該当しない場合の領域)。 69 通常は他の領域と重複しないように最後に配置します。 70 この例では、便宜上、他の領域と一部重複する可能性はありますが、 71 ブラウザは最初にマッチした<area>を使用します。 72 --> 73 <area shape="default" 74 href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/map" 75 alt="MDN イメージマップ" 76 title="MDNのイメージマップ解説へ移動します"> 77 </map> 78 79 <p> 80 イメージマップは、画像の一部をクリック可能にし、異なるリンク先に飛ばすことができます。<br> 81 `imagemap generator`とは、このようなイメージマップのHTMLコード（特に`coords`属性の値）を自動で生成するツールを指します。 82 通常、画像編集ソフトなどで座標を選択し、その情報を元にコードが出力されます。 83 </p> 84 85</body> 86</html>
このサンプルコードは、HTMLで「イメージマップ」を作成する方法を示しています。イメージマップとは、一枚の画像の中で特定の領域をクリック可能にし、それぞれ異なるリンク先に移動できるようにする機能です。
まず、<img>要素で画像を表示し、そのusemap属性に#を付けて<map>要素のname属性値を指定することで、画像とイメージマップの定義を関連付けます。alt属性は、画像が表示されない場合に代替テキストを提供します。
次に、<map>要素はイメージマップの定義全体を格納し、そのname属性は<img>要素のusemap属性から参照される一意の識別子となります。
<map>要素の内部には、実際にクリック可能な領域を定義する<area>要素を配置します。<area>要素のshape属性で領域の形状（四角形、円形、多角形、またはデフォルトの残りの領域）を指定し、coords属性でその形状に応じた座標を設定します。href属性はその領域をクリックした際のリンク先を指定し、title属性はホバー時に表示されるツールチップを提供します。alt属性は、この領域の代替テキストを提供します。
「imagemap generator」とは、これらのイメージマップのHTMLコード、特にcoords属性の値を手動で計算することなく、グラフィカルなツール上で画像領域を選択するだけで自動的に生成してくれるツールのことを指します。これにより、イメージマップ作成の効率が大幅に向上します。
イメージマップを利用する際は、<img>要素のusemap属性と<map>要素のname属性を、#を付けて同じ名前で正確に関連付ける必要があります。<area>要素でクリック可能な領域の座標を定義するcoords属性は、手動での正確な指定が非常に複雑です。そのため、imagemap generatorのような専用ツールを活用して効率的にコードを生成することをおすすめします。画像が表示されない場合や、スクリーンリーダーを利用するユーザーのために、<img>要素と各<area>要素には、その内容を説明するalt属性を必ず設定し、アクセシビリティを確保してください。また、イメージマップは画像のサイズが変化するとクリック領域がずれる可能性があるため、レスポンシブデザインに対応させる際には、JavaScriptなどで座標を動的に調整する工夫が必要になる場合があります。
HTML imageタグで画像を表示する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML Image タグの基本</title> 7</head> 8<body> 9 <!-- 10 <img>タグは、ウェブページに画像を表示するために使用されます。 11 src属性は表示する画像のURL（パス）を指定します。 12 alt属性は、画像が表示できなかった場合に代わりに表示されるテキストを指定します。 13 これは視覚障がい者向けのスクリーンリーダーや、画像が読み込めなかった際に重要です。 14 alt属性はアクセシビリティのために必須とされています。 15 --> 16 <img src="https://via.placeholder.com/150" alt="この画像はプレースホルダー画像です"> 17</body> 18</html>
HTMLの<img>タグは、ウェブページに画像を表示するために使用される要素です。このタグは、プログラミング言語の関数とは異なり、直接引数を取ったり、特定の値を戻り値として返したりする役割は持っていません。単独で機能する要素として、指定された画像を表示する役割を担います。
サンプルコードでは、この<img>タグを使ってウェブページに画像を挿入しています。特に重要な属性としてsrcとaltがあります。src属性は、表示したい画像のURL（ウェブ上の場所）やファイルパスを指定するために使用されます。例えば、src="https://via.placeholder.com/150"のように記述することで、指定された画像が読み込まれて表示されます。
もう一つのalt属性は、画像が表示できなかった場合に代替として表示されるテキストや、視覚障がい者向けのスクリーンリーダーが画像を読み上げる際に使用するテキストを指定します。これはウェブアクセシビリティにおいて非常に重要であり、画像の内容を簡潔かつ正確に説明するテキストを記述することが推奨されています。alt="この画像はプレースホルダー画像です"のように設定することで、画像がどのような内容であるかをユーザーに伝えることができます。これらの属性を適切に利用することで、ウェブページの表現力と利便性を高めることが可能です。
<img>タグはウェブページに画像を表示するために使用する単独タグです。必須属性のsrcには、表示したい画像のURLやファイルパスを正確に指定してください。パスが誤っていると画像は表示されません。alt属性は、画像が表示されない場合や視覚障がい者向けのスクリーンリーダー利用時に読み上げられる「代替テキスト」として機能します。これはアクセシビリティ上極めて重要であり、画像の内容を簡潔に説明するよう記述することが必須です。画像の表示サイズはwidthやheight属性で設定可能ですが、より柔軟なレイアウト制御のためにはCSSでの指定が推奨されます。画像の読み込みパフォーマンスも考慮し、適切なサイズや形式を選択することが大切です。