<area>
HTML の <area>
要素は、イメージマップの中でクリック可能な領域をあらかじめ定義します。イメージマップでは、画像上の幾何学的な領域をハイパーテキストリンクと関連付けすることができます。
この要素は <map>
要素内だけで使用します。
試してみましょう
属性
この要素にはグローバル属性があります。
alt
-
画像を表示しないブラウザーが代わりに表示するテキスト文字列です。テキストの内容は、代替テキストを表示しない場合に画像が提供する選択肢と同じものをユーザーに与えるような表現にすべきです。この属性は
href
属性が使用されている場合のみ必要です。
coords
-
code>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
Experimental-
リソースを読み込む際にどのリファラーを使用するかを示す文字列です:
- "
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="https://via.placeholder.com/350x150" alt="350 x 150 pic">
結果
仕様書
Specification |
---|
HTML Standard # the-area-element |
ブラウザーの互換性
BCD tables only load in the browser