＜area要素＞ - 領域

公開日: 2017/02/09

area要素は、領域を表す要素です。この要素とmap要素を組み合わせて、クリックに反応する領域が限定されたリンクを作ることができます。

概要

名前

area

カテゴリー

Flow content

Phrasing content

配置できる場所

area要素の子孫として、Phrasing contentが期待される場所。

コンテンツモデル

タグの省略

開始タグも終了タグも省略できません。

DOM Interface

HTMLAreaElement

デフォルトのスタイル

area {
	display: inline;
	cursor: pointer;
}

仕様書

https://html.spec.whatwg.org/multipage/embedded-content.html#the-area-element

属性

alt

画像を表示できない場合の代替テキスト。

coords

座標。

shape

図形の種類を表すキーワード。欠損値はrectangle。

circle: 領域は「円」になる。
default: 全体が領域になる。
poly: 領域は「ポリゴン」になる。
rect: 領域は「レクタングル」になる。

href

ハイパーリンクのアドレス。

target

リンクを開く時の挙動。ブラウジングコンテキスト(ブラウザのウィンドウ)の名前、またはキーワードで指定する。

_blank: 新しいウィンドウで開く。
_parent: 1つ親のブラウジングコンテキストで開く。親がない場合は_selfと同じ。
_self: 同じブラウジングコンテキストで開く。初期値。
_top: 最上位の祖先のブラウジングコンテキストで開く。親がない場合は_selfと同じ。

デモを見る

download

この属性を付けると、リンク先に移動するのではなく、リンク先のリソースをローカルにダウンロードするようにユーザーエージェントに促します。値は省略できますが、指定した場合は、その値がダウンロードするファイル名となります。

デモを見る

ping

クリックした時に、Pingを送信するURL。

デモを見る

rel

ドキュメントと、リンク先のリソースとの関係をキーワードで指定する。半角スペース( )で区切って複数指定可。仕様書はLink typesを参考。仕様書以外でも広く使われているキーワードはmicroformats.orgを参照。

referrerpolicy

リソースにアクセスする際のリファラーポリシーをキーワードで指定する。Referrer Policiesを参考。

no-referrer: リファラーを送信しない。
no-referrer-when-downgrade: https接続以外ではリファラーを送信しない。
origin: スキーム、ホスト、ポートのみをリファラーに含める。パスは含めない。
origin-when-cross-origin: 異なるオリジンへのアクセスの場合だけ、リファラーにパスを含めない。
unsafe-url: https接続、http接続ともに、スキーム、ホスト、ポート、パスをリファラーに含める。

グローバル属性

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

説明

area要素は、領域を表す要素です。領域をクリックした時の挙動はa要素と同じように、href属性、target属性などで指定できます。

図形

領域を決めるために利用する図形をshape属性で指定します。それぞれの図形は次の特徴を持っています。

円: 正円の形をした領域を作成できる。
レクタングル: 矩形(長方形)の形をした領域を作成できる。
ポリゴン: 多角形の形をした領域を作成できる。

HTML

<!-- 円 -->
<area shape="circle">

<!-- レクタングル -->
<area shape="rect">

<!-- ポリゴン -->
<area shape="poly">

座標とは？

領域を作成するには、座標という概念を理解しなければいけません。といっても仕組みは単純です。次の画像を例に説明します。横幅が200px、高さが200pxの画像です。

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

円 (Circle state)

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

HTML

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

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

対象のオブジェクト

レクタングル (Rectangle state)

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

HTML

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

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

対象のオブジェクト

ポリゴン (Polygon state)

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

HTML

<!-- (0, 0)、(200, 0)、(0, 200)を結んだ多角形 -->
<area shape="poly" coords="0,0, 200,0, 0,200" href="./other-page.html">

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

対象のオブジェクト

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜area要素＞ - 領域</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/area/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>area要素は、領域を定義するための要素です。map要素の子要素に入れて利用します。</p>

<h2>circle</h2>
<p><img src="/image/author/200.png" usemap="#my-circle"></p>
<map name="my-circle">
	<area shape="circle" coords="100,100, 50" href="./other-page.html">
</map>

<h2>rect</h2>
<p><img src="/image/author/200.png" usemap="#my-rect"></p>
<map name="my-rect">
	<area shape="rect" coords="50,50, 150,150" href="./other-page.html">
</map>

<h2>poly</h2>
<p><img src="/image/author/200.png" usemap="#my-poly"></p>
<map name="my-poly">
	<area shape="poly" coords="0,0, 200,0, 0,200" href="./other-page.html">
</map>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/627/"> <meta charset="utf-8"> <title>【デモ】＜area要素＞ - 領域</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/area/"> </head> <body>

<p>area要素は、領域を定義するための要素です。map要素の子要素に入れて利用します。</p> <h2>circle</h2> <p><img src="/image/author/200.png" usemap="#my-circle"></p> <map name="my-circle"> <area shape="circle" coords="100,100, 50" href="./other-page.html"> </map> <h2>rect</h2> <p><img src="/image/author/200.png" usemap="#my-rect"></p> <map name="my-rect"> <area shape="rect" coords="50,50, 150,150" href="./other-page.html"> </map> <h2>poly</h2> <p><img src="/image/author/200.png" usemap="#my-poly"></p> <map name="my-poly"> <area shape="poly" coords="0,0, 200,0, 0,200" href="./other-page.html"> </map>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

</script>