<area>: AREA 要素
最終更新：2026-10-13
<area>AREA 要素
<map> 内のクリック可能領域（長方形・円・多角形）を定義します。shape・coords・href で領域とリンク先を指定します。
| カテゴリ | リンクとメディア |
|---|---|
| コンテンツモデル | フローコンテンツ |
| 許可される親要素 | フローコンテンツを受け入れる要素 |
| 閉じタグ | 自己完結 — 閉じタグ不要 |
| ステータス | 標準 |
📝 構文
<area shape="rect" coords="0,0,82,126" href="sun.html" alt="Sun">⚙️ 属性
この要素はグローバル属性に加え、以下の属性をサポートします：
| 属性 | 値 | 説明 |
|---|---|---|
shape | Region shape: default, rect, circle or poly. | |
coords | Coordinates for the shape, in pixels, comma-separated. | |
href | Target URL when the region is clicked. | |
alt | Alternative text for the region (required for accessibility). | |
target | Where to open the link, e.g. _blank. |
▶ サンプル
下のコードを編集して、playground でリアルタイム結果を確認：
🌐 ブラウザサポート
| ブラウザ |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <area> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザでサポート | |||||
ヒント： area は空要素（void element）です。<map> 内に置き、<img> の usemap 属性から参照します。
❓ よくある質問
Qarea タグは何に使うものですか？
A
<area> は <map> の中で画像の「クリックできるホットスポット」を定義します。shape（rect/circle/poly）と coords の座標で範囲を囲み、クリックで href のリンクへ飛びます。定番の用途は、地図のエリア別ナビゲーションや計器パネル図のインタラクションです。Qarea の coords 座標はどう計算しますか？
A座標は画像の左上 (0,0) を基準にしたピクセル値です。
rect は左上と右下の2組の x,y を、circle は中心の x,y と半径を、poly は頂点の座標を並べて指定します。デザインカンプで測った値をそのまま入れます。画像を拡大縮小してもホットスポットは自動では追従しません（JS や srcset などの併用が必要です）。Qarea には alt が必須ですか？
A必須です（href がある場合）。
<area> はリンクであり、alt がその「リンクの文字」になります。スクリーンリーダーは alt でホットスポットの用途を読み上げます。alt のない画像ホットスポットは、視覚障害のあるユーザーには完全に使えない領域です。🏷️ 関連タグ
💡 関連ケース
今後さらにケーススタディを追加予定です。
📚 関連チュートリアル
