このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

<area>

試してみましょう

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

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

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

属性

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

alt
画像を表示しないブラウザーが代わりに表示するテキスト文字列です。テキストの内容は、代替テキストを表示しない場合に画像が提供する選択肢と同じものをユーザーに与えるような表現にすべきです。この属性は href 属性が使用されている場合のみ必要です。
coords
coords 属性は <area> の寸法、形状、配置における shape 属性の座標を詳述します。
  • 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 です。値は多角形の角の座標を指定します。先頭と末尾の座標が同じではない場合、ブラウザーは最後に座標を追加して多角形を閉じます。
  • default: 領域全体を定義します。
値は CSS ピクセルの数です。
download
この属性がある場合は、作者はハイパーリンクをリソースのダウンロードに使用すると考えていることを示します。download 属性の詳しい説明は <a> をご覧ください。
href
この領域のハイパーリンクの宛先です。この値は有効な URL です。この属性は省略可能です。その場合、その <area> 要素はハイパーリンクを提供しません。
hreflang
リンク先のリソースの言語を示します。許容される値は BCP47 で定めています。この属性は、 href 属性を与える場合にのみ使用してください。
ping
ハイパーリンクがフォローされたときに、ブラウザーから POST リクエストが本文を PING として (バックグラウンドで) 送信する URL を空白で区切ったリストで記述します。ふつうはトラッキング用に使用します。
referrerpolicy
リソースを読み込む際にどのリファラーを使用するかを示す文字列です:
  • "no-referrer" は、Referer: ヘッダーを送信しないことを表します。
  • "no-referrer-when-downgrade" は、TLS (HTTPS) を使用せずに生成元へナビゲートする場合は Referer: ヘッダーを送信しないことを表します。これは他にポリシーが定められていない場合の、ユーザーエージェントの既定の動作です。
  • "origin" は、ページの生成元 (大まかにいえばスキーム、ホスト、ポート) をリファラーとすることを表します。
  • "origin-when-cross-origin" は、異なる生成元へのナビゲートではリファラーをスキーム、ホスト、ポートに制限します。同一生成元へのナビゲートでは、リファラーのパスも含めます。
  • "unsafe-url" は、リファラーに生成元とパスを含めることを表します (ただし、フラグメント、パスワード、ユーザー名は含めません)。これは生成元やパスの情報が TLS で保護されたリソースからセキュアでない生成元へ漏えいしますので、安全ではありません。
rel
href 属性を含むアンカーで、この属性は、対象オブジェクトとリンクオブジェクトの関係を指定します。属性値は、空白で区切られたリンク種別の値のリストです。値とその意味は、文書作成者にとって意味を持つかもしれない何らかの権威によって登録されています。他に何も与えられていない場合の既定の関係は void です。この属性は href 属性が存在する場合にのみ使用してください。
shape
関連づけたホットスポットの形状です。 HTML の仕様書では、長方形の領域を定義する値 rect、円形の領域を定義する値 circle、多角形を定義する値 poly、定義済みの領域以外のすべての領域を示す値 default を定めています。
多くのブラウザー、特に Internet Explorer 4 以降では circ, polygon, rectangle を shape の有効な値として対応していますが、これらの値は標準外です。
target
キーワードまたは作成者が定義した名前で、リンクされたリソースを表示する閲覧コンテキストです。
以下のキーワードは特別な意味を持っています。
  • _self (既定値): 現在の閲覧コンテキストのリソースを表します。
  • _blank: 新しい名前の付けられていない閲覧コンテキストのリソースを表します。
  • _parent: 現在のページがフレーム内にある場合は、現在の親の閲覧コンテキストのリソースを表します。親要素がない場合、 _self と同じ動作をします。
  • _top: 最上位の閲覧コンテキストのリソースを表します (現在の閲覧コンテキストの祖先にあたり、それ以上親のない要素です)。親要素がない場合、 _self と同じ動作をします。
この属性は href 属性が存在する場合にのみ使用してください。

注: 新しいブラウザー (例えば Firefox 79 以降) では、 target="_blank" を <area> 要素に設定すると、暗黙に同じ動作をする rel を rel="noopener" と設定します。

非推奨の属性

name
古いブラウザーでスクリプトから使用できるようにするため、クリッカブル領域に名前を定義します。
nohref
関連づけた領域にハイパーリンクがないことを示します。

注: HTML5 では href 属性を省略すれば十分です。

tabindex
ブラウザーのタブオーダーにおける、定義した領域の位置を示す数値です。この属性は HTML5 のグローバル属性です。
type
この属性は使用しないでください。ブラウザーは無視します (HTML 仕様書の W3C 5.3 では有効なものとして定義していますが、正規の 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="http://placehold.it/350x150" alt="350 x 150 pic">

結果

仕様書

仕様書 状態 備考
Referrer Policy
referrerpolicy attribute の定義		 勧告候補 referrerpolicy 属性を追加。
HTML Living Standard
<area> の定義		 現行の標準
HTML5
<area> の定義		 勧告
HTML 4.01 Specification
<area> の定義		 勧告

ブラウザーの互換性

BCD tables only load in the browser