areaタグ -map内でクリック可能な領域を定義する｜HTML辞典

<area>タグとは？

<area> タグは、<map> タグ内でクリック可能な領域を定義するためのタグです。
<img> の usemap 属性と組み合わせることで、画像内の特定の範囲にリンクを設定できます。

基本情報

コンテンツモデル

フローコンテンツ（Flow Content）。

閉じタグの有無

<area> は 自己終了タグ のため、閉じタグ（</area>）は不要 です。

基本的な記述方法

<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>

使用できる主な属性

<area> タグには、座標やリンク先を設定するための属性があります。

属性名	説明	例
shape	クリック領域の形状（rect、circle、poly）	<area shape="rect">
coords	領域の座標（px 単位）	<area coords="50,50,150,150">
href	クリック時のリンク先	<area href="https://example.com">
alt	代替テキスト（スクリーンリーダー対応）	<area alt="リンク">
target	リンクの開き方（_blank、_self など）	<area target="_blank">

CSSを使ったデザイン変更

<area> タグ自体に CSS を適用することはできませんが、<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">

<area>タグと他のタグの違い

タグ	役割	特徴	適切な用途
<area>	クリック可能な領域を定義	shape と coords で範囲指定	イメージマップのエリア設定
<map>	イメージマップを作成	<area> とセットで使用	画像の特定の領域にリンクを設定
<img>	画像を表示	usemap 属性で <map> と関連付け	イメージマップの画像

使用上の注意点

✅ usemap と name を一致させる

• <map name="exampleMap"> と <img usemap="#exampleMap"> を統一する。

✅ coords の値を適切に設定する

• 画像のサイズに応じて coords を正しく指定する。

✅ alt を設定してアクセシビリティを確保する

• スクリーンリーダー対応のため alt を設定する。

関連タグ

• <map> – 画像のクリッカブルマップを定義
• <img> – 画像を表示
• <a> – 通常のリンクを設定

まとめ

<area> タグは、HTML文書内で <map> 内の特定の領域をクリック可能にするタグ です。
shape と coords を適切に設定し、画像の特定の部分をリンクにすることができます。