<map>: MAP 要素
最終更新：2026-10-13
<map>MAP 要素
クライアントサイドのイメージマップを定義します。子の <area> 要素がクリック可能領域を表し、<img> の usemap 属性で関連付けます。
| カテゴリ | リンクとメディア |
|---|---|
| コンテンツモデル | フローコンテンツ |
| 許可される親要素 | フローコンテンツを受け入れる要素 |
| 閉じタグ | 必要 </map> タグ |
| ステータス | 標準 |
📝 構文
<map name="planet">
<area shape="circle" coords="..." href="...">
</map>⚙️ 属性
この要素はグローバル属性に加え、以下の属性をサポートします：
| 属性 | 値 | 説明 |
|---|---|---|
name | Map name; an |
▶ サンプル
下のコードを編集して、playground でリアルタイム結果を確認：
🌐 ブラウザサポート
| ブラウザ |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <map> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザでサポート | |||||
ヒント： map 自体は何も表示しません。<img usemap> と子の <area> 要素が必要です。
❓ よくある質問
Qmap はどんな要素と組み合わせて使いますか？
A
<map> はホットスポットの容器で、1枚の <img usemap='#mapid'> と複数の <area> とともに使います。img の usemap が map の name（#付き）を指し、map の中の area が各ホットスポットを定義します。3つの要素がそろって初めて機能します。Qmap の name と id の違いは何ですか？
Ausemap 属性が参照するのは map の
name 値です（互換性のため、同じ id も設定することが仕様で求められています）。両方の属性に同じ値を書くのが最も安全です：<map name='cn' id='cn'>。Q画像のホットスポット方式は今もおすすめですか？
A限定的な用途にはまだ価値があります（イラストのインタラクション、レトロな地図など）。ただし主流は「画像の上に位置指定の要素を重ねる」か、SVG にリンクを内包する方式に移りました。SVG は拡縮に追従し、ホットスポットを独立してスタイルでき、保守コストもずっと低いです。新しいインタラクティブ画像では SVG を優先しましょう。
🏷️ 関連タグ
💡 関連ケース
今後さらにケーススタディを追加予定です。
📚 関連チュートリアル
