<area>: イメージマップ領域要素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

<area>HTML の要素で、イメージマップの中でクリック可能な領域をあらかじめ定義します。イメージマップでは、画像上の幾何学的な領域をハイパーテキストリンクと関連付けすることができます。

この要素は <map> 要素内だけで使用します。

試してみましょう

属性

この要素にはグローバル属性があります。

alt

画像を表示しないブラウザーが代わりに表示するテキスト文字列です。 テキストの内容は、代替テキストを表示しない場合に画像が提供する選択肢と同じものをユーザーに与えるような表現にすべきです。 この属性は href 属性が使用されている場合のみ必要です。

coords

coords 属性は、 shape 属性の座標を寸法、形状、<area> の配置について詳述します。 この属性は shapedefault に設定されていた場合は使用してはいけません。

  • rect: 値は x1,y1,x2,y2 です。 値は長方形の左上と右下の座標を指定します。 例: <area shape="rect" coords="0,0,253,27" href="#" target="_blank" alt="Mozilla"> では座標は 0,0253,27 であり、それぞれ長方形の左上と右下の角を示します。
  • circle: 値は x,y,radius です。値は円の中央の座標と半径を指定します。 例: <area shape="circle" coords="130,136,60" href="#" target="_blank" alt="MDN">
  • poly: 値は x1,y1,x2,y2,..,xn,yn です。値は多角形の角の座標を指定します。 先頭と末尾の座標が同じではない場合、ブラウザーは最後に座標を追加して多角形を閉じます。

値は CSS ピクセルの数です。

download

この属性がある場合は、作者はハイパーリンクをリソースのダウンロードに使用すると考えていることを示します。 download 属性の詳しい説明は <a> をご覧ください。

href

この領域のハイパーリンクの宛先です。 この値は有効な URL です。 この属性は省略可能です。その場合、その <area> 要素はハイパーリンクを提供しません。

hreflang

リンク先のリソースの言語を示します。許容される値は RFC 5646: Tags for Identifying Languages (also known as BCP 47) で定められています。 この属性は、 href 属性を指定する場合にのみ使用してください。

ping

ハイパーリンクに進んだとき、ブラウザーから POST リクエストが本文を PING として(バックグラウンドで)送信する URL を空白で区切ったリストで記述します。 ふつうはトラッキング用に使用します。

referrerpolicy Experimental

リソースを読み込む際にどのリファラーを使用するかを示す文字列です。

  • no-referrer: Referer ヘッダーを送信しません。
  • no-referrer-when-downgrade: Referer ヘッダーをオリジンTLS (HTTPS) がない場合は送信しません。
  • origin: 送信されるリファラーは、参照元ページのオリジンのみに限定されます。すなわちスキームホスト名ポート番号です。
  • origin-when-cross-origin: 他のオリジンに送信されるリファラーは、スキーム、ホスト名、ポート番号に限定されます。同一オリジン内での移動の場合はパスが含まれます。
  • same-origin: リファラーは同一オリジンには送られますが、オリジン間リクエストではリファラー情報が含まれません。
  • strict-origin: プロトコルのセキュリティ水準が同じである場合 (HTTPS→HTTPS) は、文書のオリジンのみが送信されますが、安全性が下がる移動先 (HTTPS→HTTP) には送信しません。
  • strict-origin-when-cross-origin (default): 同一オリジンへのリクエストを行う際には URL 全体が送信され、プロトコルのセキュリティ水準が同じである場合 (HTTPS→HTTPS) はオリジンのみが送信されますが、安全性が下がる移動先 (HTTPS→HTTP) には送信されません。
  • unsafe-url: リファラーにはオリジンおよびパスが含まれます(ただしフラグメントパスワードユーザー名は含まれません)。 この値は安全ではありません。オリジンとパスを TLS で保護されたリソースから安全ではないオリジンに漏洩させるからです。
rel

href 属性を含むアンカーで、この属性は、対象オブジェクトとリンクオブジェクトの関係を指定します。 属性値は、空白で区切られたリンク種別のリストです。 値とその意味は、文書作成者にとって意味を持つかもしれない何らかの権威によって登録されています。 他に何も与えられていない場合の既定の関係は void です。この属性は href 属性が存在する場合にのみ使用してください。

shape

関連づけたホットスポットの形状です。HTML の仕様書では、長方形の領域を定義する値 rect、円形の領域を定義する値 circle、多角形を定義する値 poly、定義済みの領域以外のすべての領域を示す値 default を定めています。

target

キーワードまたは作成者が定義した名前で、リンクされたリソースを表示する閲覧コンテキストです。 以下のキーワードは特別な意味を持っています。

  • _self (既定値): 現在の閲覧コンテキストのリソースを表します。
  • _blank: 新しい名前の付けられていない閲覧コンテキストのリソースを表します。
  • _parent: 現在のページがフレーム内にある場合は、現在の親の閲覧コンテキストのリソースを表します。親要素がない場合、 _self と同じ動作をします。
  • _top: 最上位の閲覧コンテキストのリソースを表します (現在の閲覧コンテキストの祖先にあたり、それ以上親のない要素です)。親要素がない場合、 _self と同じ動作をします。

この属性は href 属性が存在する場合にのみ使用してください。

メモ: target="_blank"<area> 要素に設定すると、暗黙に relrel="noopener" を設定し、window.opener が設定されていないのと同じように動作します。対応状況はブラウザーの互換性を参照してください。

非推奨の属性

name 非推奨;

古いブラウザーでスクリプトから使用できるようにするため、クリック可能な領域に名前を定義します。

nohref 非推奨;

関連づけた領域にハイパーリンクがないことを示します。

メモ: nohref 属性は必要ありません。href 属性を省略すれば十分だからです。

type 非推奨;

参照されているリソースの種類のヒントです。ブラウザーからは無視されます。

html
<map name="primary">
  <area
    shape="circle"
    coords="75,75,75"
    href="left.html"
    alt="Click to go Left" />
  <area
    shape="circle"
    coords="275,75,75"
    href="right.html"
    alt="Click to go Right" />
</map>
<img
  usemap="#primary"
  src="https://via.placeholder.com/350x150"
  alt="350 x 150 pic" />

結果

技術的概要

コンテンツカテゴリー フローコンテンツ記述コンテンツ
許可されている内容 なし。これは空要素です。
タグの省略 開始タグは必須。終了タグを記述してはなりません。
許可されている親要素 記述コンテンツを受け入れるすべての要素。 <area> 要素は祖先が <map> でなければなりませんが、直接の親要素である必要はありません。
暗黙の ARIA ロール href 属性がある場合は link、そうでなければ対応するロールなし
許可されている ARIA ロール 許可されている role なし。
DOM インターフェイス HTMLAreaElement

仕様書

Specification
HTML Standard
# the-area-element

ブラウザーの互換性

BCD tables only load in the browser