mapタグ -画像の特定の領域にリンクを設定する｜HTML辞典
<map>タグとは？
<map> タグは、画像の特定の領域にリンクを設定するためのタグです。<area> タグと組み合わせて 画像内のクリック可能なエリア（イメージマップ）を作成できます。
基本情報
コンテンツモデル
フローコンテンツ（Flow Content）。
閉じタグの有無
<map> は 開始タグ（<map>）と閉じタグ（</map>）の両方が必要 です。
基本的な記述方法
<img src="image.jpg" usemap="#exampleMap" width="500" height="300">
<map name="exampleMap">
<area shape="rect" coords="50,50,150,150" href="https://example.com" alt="リンク">
</map>
使用できる主な属性
<map> タグには特別な属性はありませんが、<area> タグとセットで使用 します。
属性名（<area>） | 説明 | 例 |
|---|---|---|
shape | クリック領域の形状（rect、circle、poly） | <area shape="rect"> |
coords | 領域の座標 | <area coords="50,50,150,150"> |
href | リンク先の URL | <area href="https://example.com"> |
alt | 代替テキスト | <area alt="リンク"> |
CSSを使ったデザイン変更
<map> 自体にはスタイルを適用できませんが、<img> に枠線やスタイルを追加できます。
img {
border: 2px solid black;
}
適切な使用例
✅ 長方形の領域にリンクを設定
<img src="image.jpg" usemap="#map1" width="500" height="300">
<map name="map1">
<area shape="rect" coords="50,50,150,150" href="https://example.com" alt="リンク">
</map>
✅ 円形の領域にリンクを設定
<img src="image.jpg" usemap="#map2" width="500" height="300">
<map name="map2">
<area shape="circle" coords="250,150,50" href="https://example.com" alt="リンク">
</map>
✅ 多角形の領域にリンクを設定
<img src="image.jpg" usemap="#map3" width="500" height="300">
<map name="map3">
<area shape="poly" coords="100,50,150,150,50,150" href="https://example.com" alt="リンク">
</map>
適切でない使用例（誤った使い方）
❌ usemap の値が <map> の name と一致しないと機能しない
<!-- NG: usemap の値が一致していない -->
<img src="image.jpg" usemap="#wrongMap" width="500" height="300">
<map name="exampleMap">
<area shape="rect" coords="50,50,150,150" href="https://example.com">
</map>
✅ 正しい書き方（usemap と name を一致させる）
<img src="image.jpg" usemap="#exampleMap" width="500" height="300">
<map name="exampleMap">
<area shape="rect" coords="50,50,150,150" href="https://example.com">
</map>
❌ coords の指定が不適切だとクリック範囲がずれる
<!-- NG: coords が範囲外 -->
<area shape="rect" coords="500,500,600,600" href="https://example.com">
✅ 正しい書き方（適切な座標を指定）
<area shape="rect" coords="50,50,150,150" href="https://example.com">
<map>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<map> | イメージマップを作成 | <area> とセットで使用 | 画像の一部をリンク化 |
<area> | クリック可能なエリアを定義 | shape と coords で範囲指定 | イメージマップの領域設定 |
<img> | 画像を表示 | usemap 属性で <map> と関連付け | イメージマップの画像 |
使用上の注意点
✅ usemap と name の値を一致させる
<map name="exampleMap">と<img usemap="#exampleMap">を統一する。
✅ coords の値を適切に設定する
- 画像のサイズに応じて
coordsを正しく指定する。
✅ <area> の alt を適切に設定する
- スクリーンリーダー対応のため
altを設定する。
関連タグ
まとめ
<map> タグは、HTML文書内で 画像の特定の領域にリンクを設定するためのタグ です。<area> タグと組み合わせてクリック可能なイメージマップを作成できます。
