HTML Living Standard/map

map 要素

<map> 要素は、クライアントサイドイメージマップを定義するために使用されます。この要素に関連付けられた <area> 要素を使用して、画像内の特定の領域をリンクやインタラクティブなエリアとして指定できます。

カテゴリ

• フローコンテンツ

使用される文脈

• フローコンテンツ内で使用可能。

コンテンツモデル

• 0 個以上の <area> 要素、オプションでフローコンテンツ。

タグの省略

• 開始タグおよび終了タグは省略できません。

属性

<map> 要素には以下の属性が使用できます：

• グローバル属性 — すべてのHTML要素で共通の属性。
• name — マップの名前。この名前は、画像の usemap 属性で参照されます。

使用例

基本的な使用例

以下は、クライアントサイドイメージマップを使用した例です。

<img src="example.jpg" usemap="#example-map" alt="Example Image">
<map name="example-map">
  <area shape="rect" coords="0,0,100,100" href="https://example.com/section1" alt="Section 1">
  <area shape="circle" coords="150,150,50" href="https://example.com/section2" alt="Section 2">
  <area shape="poly" coords="200,200,250,250,300,200" href="https://example.com/section3" alt="Section 3">
</map>

各属性の説明

1. usemap 属性（<img> 要素）

   画像とイメージマップを関連付けるために使用されます。値は <map> 要素の name 属性に一致する必要があります。

2. shape 属性（<area> 要素）

   形状を指定します（rect、circle、poly、または default）。

3. coords 属性（<area> 要素）

   形状の座標を指定します。

4. href 属性（<area> 要素）

   領域がクリックされたときにリンクされる場所を指定します。

5. alt 属性（<area> 要素）

   領域の代替テキストを指定します。

アクセシビリティの考慮事項

• 代替テキストの提供:

  各 <area> 要素に alt 属性を必ず指定し、リンク先や領域の目的を説明してください。これにより、スクリーンリーダーなどの支援技術を利用するユーザーに対応できます。

• usemap 属性の適切な使用:

  画像に usemap 属性を設定するときは、画像の alt 属性を適切に記述して、画像全体の説明を提供してください。

非推奨の使用法

• <map> 要素と <area> 要素は、クライアントサイドイメージマップ用に設計されていますが、インタラクティブ性が必要な場合は、SVGやCSSを使用する代替方法も検討してください。

関連仕様

• HTML Living Standard - map
• MDN Web Docs - map

参考情報

• イメージマップは、特定の画像領域をクリック可能にする便利な方法です。
• モダンなWebアプリケーションでは、CSSやJavaScript、SVGなどを使用してイメージマップを代替することが増えていますが、単純な用途では <map> 要素が有効です。