area要素 - ハイパーリンクの領域

概要

名前

area (Area)

カテゴリ

Flow content

Phrasing content

配置できる場所

Phrasing contentが期待される場所。map要素の子孫でなければいけない。

コンテンツモデル

子要素を持ちません。

タグの省略

この要素は終了タグを持ちません。

コンテンツ属性

alt - area要素のハイパーリンクのテキスト。

coords - area要素の座標。

shape - area要素の領域の種類。

target - リンクを開くコンテキスト。

download - リンク先のリソースをダウンロードする。

ping - リンクをクリックした時のpingの送信先。

rel - リンク先のリソースとの関係。

referrerpolicy - リンク先にアクセスする時のリファラーポリシー。

DOM Interface

HTMLAreaElement

デフォルトのスタイル

Chrome / Firefox / Safari

:focus {
    outline: -webkit-focus-ring-color auto 5px;
}
area {
    display: inline;
    cursor: pointer;
}

*|*:any-link:not(svg|a) {
    text-decoration: underline;
}
*|*:link {
    color: rgb(0, 0, 238);
}
:any-link {
    cursor: pointer;
}
area {
    display: none !important;
}

:focus {
	outline-color: -webkit-focus-ring-color;
	outline-style: auto;
	outline-width: 5px;
}
area {
	display: none;
}

仕様書

https://html.spec.whatwg.org/multipage/image-maps.html#the-area-element

属性

alt属性

ハイパーリンクのテキスト。href属性がある場合、この属性も必要。

coords属性

shape属性

target属性

ハイパーリンクを開くコンテキスト。a要素のtarget属性と仕組みは同じです。

download属性

この属性を付けると、リンク先に移動するのではなくリンク先のリソースをダウンロードするようユーザーエージェントに促します。値を指定した場合はその値が、値を指定しない場合はリソース本来のファイル名が、ローカルに保存されるファイル名となります。基本的に、JavaScriptなどで作成したBlobや、インラインのData URI、同じオリジンの元にあるリソースに対して有効です。

ping属性

この属性を指定するとarea要素をクリックした時に、値に指定したURLにpingが送信される。このリクエストはPOSTメソッドで、ping-from(リンク元)、ping-to(リンク先)のカスタムヘッダーを持つ。href属性を持っていないと、クリックしてもpingは送信されない。

rel属性

referrerpolicy属性

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

チュートリアル

area要素の基本的な使い方を説明します。さらに詳しい使い方は、各属性の説明をご参考下さい。

map要素

area要素はmap要素の子要素にします。任意の数だけ配置できます。例えば、日本地図の画像で都道府県の数だけクリック領域を作成したい場合は最低でも47個のarea要素が必要になります。

<img src="./image.png" usemap="hoge">

<map name="hoge">
	<area shape="..." coords="...">
	<area shape="..." coords="...">
	<area shape="..." coords="...">
	<area shape="..." coords="...">
</map>

state

領域のstateをshape属性で指定します。それぞれのstateは次の特徴を持っています。

Circle state

正円の形をした領域を作成できる。

Default state

map要素の全体が領域となる。

Polygon state

多角形の形をした領域を作成できる。

Rectangle state

矩形(長方形)の形をした領域を作成できる。

<!-- Circle state -->
<area shape="circle">

<!-- Default state -->
<area shape="default">

<!-- Polygon state -->
<area shape="poly">

<!-- Rectangle state -->
<area shape="rect">

座標とは？

領域を作成するには、座標という概念を理解しなければいけません。といっても仕組みは単純です。次の画像を例に説明します。横幅が200px、高さが200pxの画像です。なお、ここでいうサイズは表示した時のサイズです。本来の画像のサイズではありません。

画像の左上の座標が(0, 0)です。座標の単位はピクセルです。なので例の画像では右下の座標は(200, 200)ということになります。この座標を元に、領域を指定していくというわけです。

円 (Circle state)

shape属性にcircleを指定した時、領域は「円」となります。coords属性には、円のルールに従った方法で座標を指定しなければいけません。具体的には、「円の中心を表すX座標、円の中心を表すY座標、円の半径」の順に3つの数値を指定します。数値の間は半角コンマ(,)で区切ります。

<!-- 中心が(100, 100)、半径が50pxの正円 -->
<area shape="circle" coords="100,100, 50">

実際に領域が反映されているかを確認してみて下さい。クリックすると画像が反応します。

全体 (Default state)

shape属性にcircleを指定した時、領域は「全体」となります。coords属性は省略しなければいけません。

<area shape="default">

実際に領域が反映されているかを確認してみて下さい。クリックすると画像が反応します。

ポリゴン (Polygon state)

shape属性にpolyを指定した時、領域は「ポリゴン」となります。coords属性には、ポリゴンのルールに従った方法で座標を指定しなければいけません。ポリゴンは多角形です。多角形の角となる座標を任意の数だけcoords属性で指定します。X座標、Y座標を1セットとして、最低でも3セット以上、つまり6個以上の偶数個、数値を指定して下さい。各座標が指定した順に結ばれて、それが領域になります。下記の例では3つの座標を指定しています。

<!-- (0, 0)、(200, 0)、(0, 200)を結んだ多角形 -->
<area shape="poly" coords="0,0, 200,0, 0,200">

実際に領域が反映されているかを確認してみて下さい。クリックすると画像が反応します。

レクタングル (Rectangle state)

shape属性にrectを指定した時、領域は「レクタングル」となります。coords属性には、レクタングルのルールに従った方法で座標を指定しなければいけません。レクタングルとは、長方形(矩形)のことです。具体的には、「図形の左上のX座標、図形の左上のY座標、図形の右下のX座標、図形の右下のY座標」の順に4つの数値を指定します。数値の間は半角コンマ(,)で区切ります。

<!-- 左上が(50, 25)、右下が(150, 185)の長方形 -->
<area shape="rect" coords="50,25, 150,185">

実際に領域が反映されているかを確認してみて下さい。クリックすると画像が反応します。

デモ

area要素のデモです。それぞれ、クリックできる領域の形が違います。

<!-- このコードは編集できます。 -->

<h2>circle</h2>
<img src="./image.png" usemap="#my-circle" width="200" height="200">
<map name="my-circle">
	<area shape="circle" coords="100,100, 50" href="https://syncer.jp/" target="_blank">
</map>

<h2>default</h2>
<img src="./image.png" usemap="#my-default" width="200" height="200">
<map name="my-default">
	<area shape="default" href="https://syncer.jp/" target="_blank">
</map>

<h2>poly</h2>
<img src="./image.png" usemap="#my-poly" width="200" height="200">
<map name="my-poly">
	<area shape="poly" coords="0,0, 200,0, 0,200" href="https://syncer.jp/" target="_blank">
</map>

<h2>rect</h2>
<img src="./image.png" usemap="#my-rect" width="200" height="200">
<map name="my-rect">
	<area shape="rect" coords="50,50, 150,150" href="https://syncer.jp/" target="_blank">
</map>

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

関連記事

href属性

a要素やarea要素のhref属性はURLを指定するための属性です。ここで指定したURLが、リンクのジャンプ先やダウンロードの対象になります。

download属性 - 曖昧さ回避

download属性は、複数の要素が同名の属性を持っています。ここは曖昧さ回避のページです。どの要素のdownload属性を調べるのかを選択して下さい。

rel属性

area要素のrel属性は現在のリソースと、リンク先のリソースとの関係をキーワードで指定するための属性です。a要素のrel属性と仕組みは同じですが、サポート状況が違うのでご注意下さい。

target属性

area要素のtarget属性はハイパーリンクを開くコンテキストを指定する属性です。a要素のtarget属性と仕組みは同じです。