<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>
の配置について詳述します。 この属性はshape
がdefault
に設定されていた場合は使用してはいけません。rect
: 値はx1,y1,x2,y2
です。 値は長方形の左上と右下の座標を指定します。 例:<area shape="rect" coords="0,0,253,27" href="#" target="_blank" alt="Mozilla">
では座標は0,0
と253,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>
要素に設定すると、暗黙にrel
にrel="noopener"
を設定し、window.opener
が設定されていないのと同じように動作します。対応状況はブラウザーの互換性を参照してください。
非推奨の属性
例
<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