HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<area>
イメージマップの領域（Area）を定義する要素です。クリック可能な領域とリンク先を指定します。
info
概要
<area> 要素は、**<map> 要素内でのみ**使用され、イメージマップ（画像上の特定の部分をクリック可能にする機能）におけるクリック可能な領域を定義します。
この要素自体は閉じるタグを持ちません。必須属性の shape と coords で領域の形と座標を、href でリンク先を指定します。
play_circle
デモ (静的表示 - イメージマップの構造)
HTML (Source)
<!-- <img>タグに usemap="#mapname" を指定 -->
<img src="image.png" usemap="#examplemap" alt="領域デモ画像" width="150" height="150">
<map name="examplemap">
<area shape="rect" coords="0,0,75,75" href="link1.html" alt="左上の領域">
<area shape="circle" coords="112,112,38" href="link2.html" alt="右下の円">
</map>
Preview (Result - 表示領域)
info
注: プレビュー領域では
<area> 要素のクリック領域自体は通常不可視のため、デモは視覚的な表現ではなく、その構造を示すコードと表示された画像で構成されます。実際のクリック領域はブラウザ上で画像に重ねて機能します。
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| shape | 領域の形状を指定します。必須属性です。rect: 長方形 (矩形)circle: 円poly: 多角形 (Polygon)default: 画像全体（他の領域に重ならない部分） |
| coords | 領域の座標を指定します。shape の値によって必要な座標数が異なります。必須属性です。rect: x1, y1, x2, y2circle: center_x, center_y, radiuspoly: x1, y1, x2, y2, ..., xn, yn
|
| href | リンク先のURL。省略するとクリックしても何も起こりません。 |
| alt | 領域の代替テキスト。リンク先のコンテンツを説明します。アクセシビリティに必須です。 |
| target | リンクをどこで開くかを指定します (_self, _blank など)。 |
| rel | リンク先ドキュメントとの関係性を示します（noopener, noreferrer など）。 |
code
実用例 (座標の指定)
1. 長方形の領域 (rect)
<!-- 始点(10,10) から 終点(110,60) までの長方形 -->
<area shape="rect" coords="10,10,110,60" href="page1.html" alt="長方形のエリア">
2. 円の領域 (circle)
<!-- 中心(50,50)、半径(40) の円 -->
<area shape="circle" coords="50,50,40" href="page2.html" alt="円形のエリア">
3. 多角形の領域 (poly)
<!-- 3点の座標 (三角形) -->
<area shape="poly" coords="100,50,150,150,50,150" href="page3.html" alt="多角形のエリア">
lightbulb
知っておくべき重要事項
warning
レスポンシブデザインへの対応
<area> 要素の coords はピクセル単位で指定するため、画像がリサイズされるとクリック領域がずれる可能性があります。レスポンシブなイメージマップを実現するには、CSSやJavaScriptでの調整が必要です。現代のWeb開発では、複雑なイメージマップよりも、画像の上に透明な <a> 要素を重ねる手法が推奨されることが多いです。
accessibility_new
アクセシビリティ
**必ず
**必ず
alt 属性を指定してください。** 視覚障碍者がスクリーンリーダーを使用する場合、この alt 属性がリンク先の内容を理解するための唯一の情報源となります。また、キーボード操作で移動できるように、href 属性を省略しないでください。