<area> - クリッカブルマップエリア

• トップ
• HTMLリファレンス
• <area>

• 概要
• 説明
• 属性
  • 共通属性
  • 重要属性
  • その他属性
  • 非推奨
• 使用例
• リンク

概要

形式

<area shape="..." coords="..." href="..." alt="...">

サポート

LS / H3 / e2 / Ch1 / Fx1 / Sa1 / Op1 / N2

カテゴリ

フローコンテンツ
フレージングコンテンツ

親要素

フレージングコンテンツ を子要素に持つもの (ただし、map または template 要素が祖先に必要)

子要素

無し(Empty)

タグの省略

開始タグ:必須 / 終了タグ:無し

属性

グローバル属性

alt

coords

shape

href

target

download

ping

rel

referrerpolicy

説明

<area> は <map> と組み合わせて使用します。詳細は <map> を参照してください。

属性

共通属性

グローバル属性

詳細は グローバル属性 を参照してください。

重要属性

alt=alt

LS/H3/e2/Ch/Fx/Sa/Op/N6

代替テキストを指定します。アクセシビリティ向上のため、HTML4.01 では必須属性として定義されています。

coords=coords

LS/H3/e2/Ch/Fx/Sa/Op/N2

リンク領域の座標を指定します。shape が rect の時は左上、右下の座標を "x1,y1,x2,y2" と指定します。shape が poly の時はそれぞれの座標を "x1,y1,x2,y2,x3,y3" と指定します。shape が circle の時は中心の座標と半径を "x,y,r" と指定します。

shape=shape

LS/H3/e2/Ch/Fx/Sa/Op/N2

クリック領域の形を指定します。

rect

矩形(LS/H3/e2/Ch/Fx/Sa/Op/N2)

poly

多角形(LS/H3/e2/Ch/Fx/Sa/Op/N2)

circle

円形(LS/H3/e2/Ch/Fx/Sa/Op/N2)

default

それ以外の場所(LS/H5/Ch/Fx/Sa/Ch/N2)

ブラウザによっては下記をサポートするものがありますが、非推奨です。

rectangle

矩形(e2/N6)

polygon

多角形(e2)

circ

円形(e2/N6)

href=url

LS/H3/e2/Ch/Fx/Sa/Op/N2
この領域をクリックした時のジャンプ先を指定します。

target=target

LS/H5/H4T/e3/Ch/Fx/Sa/Op/N2

表示ターゲットとするウィンドウ(フレーム)名を指定します。

その他属性

download=filename

LS/H5/Ch14/Fx20

HTML5 で追加されました。リンク先のリソースがダウンロードする目的のファイルであることを示します。値は省略可能で、指定する場合は、ダウンロードの際のファイル名を指定します。この属性を指定することで、画像などのファイルでもクリック時に表示するのではなく、ダウンロードできるようになります。ファイル名に制限はありませんが、OSや環境によって使用不可能文字が変更されることがあります。

ping=url

LS/Ch/Op

ユーザがリンクをクリックした際に、href とは別に、ブラウザが呼び出す URL を指定します。これは主に、ユーザがリンクをクリックしたことをロギングする目的で使用します。

rel=rel

LS/H5/e2

この文書から見たリンク先の文書との関係を記述します。rel には next, previous, parent などを指定します。あまり使用されていません。

referrerpolicy=policy

LS/H5.2/Ch46/Fx50

リソースにアクセスした際のリファラー(Referer)送信ポリシーを指定します。

no-referrer

送信しない。

no-referrer-when-downgrade

https から http にダウングレードする際には送信しない(デフォルト)。

same-origin

同一オリジン間移動の場合のみ送信する。

origin

オリジン情報(プロトコル＋FQDN＋ポート番号)のみを送信する。

strict-origin

オリジン情報(プロトコル＋FQDN＋ポート番号)のみを送信するが、ダウングレード時には送信しない。

origin-when-cross-origin

オリジンをまたがる場合は、オリジン情報のみを送信する。

strict-origin-when-cross-origin

オリジンをまたがる場合は、オリジン情報のみを送信するが、ダウングレード時には送信しない。

unsafe-url

常に送信する。

詳細は下記を参照してください。
　https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Referrer-Policy

非推奨

hreflang=hreflang

[非推奨] H4

リンク先文書の言語(ja など)を指定します。

rev=rev

[非推奨] H2-4

リンク先の文書から見たこの文書との関係を記述します。rev には next, previous, parent などを指定します。HTML5 で廃止されました。

type=type

[非推奨] H4

リンク先文書の MIMEタイプ(text/htmlなど)を指定します。

media=media

[非推奨] H4-4

リンク先のメディアタイプを指定します。

methods=methods

[非推奨] H3-4/e4

リンク先のオブジェクトが持つ機能についての情報を記述しますが、あまり使用されていません。HTML2.0 では定義されていましたが、HTML3.2 では削除されました。

name=name

[非推奨] e2/N2

名前を指定します。

nohref

[非推奨] H3-4/e2/N2

この領域をクリックした時にどこにもジャンプしないようにします。

使用例

<map> を参照してください。

リンク

• https://html.spec.whatwg.org/multipage/image-maps.html#the-area-element
• https://developer.mozilla.org/ja/docs/Web/HTML/Element/area
• https://caniuse.com/mdn-html_elements_area