HTML要素辞書 by Sentaro

<map>

イメージマップ（Image Map）要素。画像の一部をくり抜いて、クリック可能なリンク領域を定義します。

info

概要

<map> 要素は、クライアントサイドのイメージマップを定義するために使用されます。イメージマップとは、一つの画像の中に複数のクリック可能な領域（リンク）を設定する仕組みです。このクリック可能な領域は、<map> 要素の内部に配置する <area> 要素によって定義されます。
<map> 要素の name 属性を、対象とする <img> 要素の usemap 属性と関連付けることで機能します。

play_circle

デモ (静的表示)

HTML (Source)

Preview (Result)

※プレビュー表示ではクリック領域は動作しません。
(イメージマップの概念図を代わりに表示します)

list

属性 (Attributes)

属性名	説明
name	マップの名前を定義します。必須属性です。この値を、関連付ける `<img>` 要素の `usemap` 属性（#を付けた値）と同じにする必要があります。

code

実用例

1. 基本的なイメージマップの定義

<img src="world-map.png" usemap="#country-links" alt="国別リンクマップ">

<map name="country-links">
 <area shape="rect" coords="10,10,100,50" href="/japan" alt="日本">
 <area shape="circle" coords="200,80,30" href="/usa" alt="アメリカ合衆国">
 <area shape="poly" coords="300,10,350,60,300,110" href="/europe" alt="ヨーロッパ">
</map>

2. 座標の計算と指定

<!-- shape="rect": x1, y1, x2, y2 (左上座標, 右下座標) -->
<area shape="rect" coords="50, 50, 150, 150" href="...">

<!-- shape="circle": cx, cy, r (中心座標, 半径) -->
<area shape="circle" coords="200, 100, 40" href="...">

<!-- shape="poly": x1, y1, x2, y2, ..., xN, yN (頂点座標の連続) -->
<area shape="poly" coords="250, 10, 350, 10, 300, 80" href="...">

lightbulb

知っておくべき重要事項

warning

レスポンシブデザインとイメージマップ
イメージマップの座標 (coords) はピクセル値で固定されているため、画像のサイズが変化するレスポンシブなレイアウトでは、領域がずれてしまう問題があります。現代的なWeb開発では、CSSと通常の <a> タグを組み合わせた方法が、より柔軟な解決策として推奨されます。

accessibility_new

アクセシビリティ
イメージマップ内の各 <area> 要素には、必ず alt 属性を指定し、そのリンクがどこへ遷移するのかを明確に伝えるテキストを設定する必要があります。これにより、視覚障碍を持つユーザーや、画像が表示されない環境でもリンクの内容を理解できます。

私について利用規約プライバシーポリシー