<area> 要素
は、イメージマップに対応する領域やテキスト、またはハイパーリンクのいずれかを表します。<map> 要素
や<template> 要素
の中で使用します。href 属性
が指定されている場合はその領域がハイパーリンクになります。この場合、ハイパーリンクのテキストを表すalt
属性が必須となります。href 属性
が指定されていない場合は領域が選択できないことを表します。この場合、alt 属性
は指定できません。
- カテゴリー
- フロー・コンテンツ、フレージング・コンテンツ
- 配置場所
map
やtemplate
の中でフレージング・コンテンツが置ける場所。- 内容
- なし(空要素)
- 属性
-
alt="代替テキスト"
- イメージマップが利用できない場合の代替テキストを指定します。
href 属性
が指定されていない場合は指定できません。 href="URL"
- 領域に対応したリンク先のURLを指定します。
download[="download"]
HTML5で追加href 属性
が指定されている場合、リンク先がリソースをダウンロードするためのものであることを示します。hreflang="言語コード"
href 属性
が指定されている場合、リンク先の言語コードを指定します。rel="リンクタイプ"
href 属性
が指定されている場合、リンク先との関係性(リンクタイプ)をキーワードで指定します。複数指定する場合はスペースで区切って指定します。指定したキーワードがいずれも仕様で定義されていないものであればこの要素は意味を持ちません。以下はよく使用されるキーワードの一部です。alternate
他言語など現在の文書の代替 next
現在の文書がシリーズの一部であるとして次の文書 prev
現在の文書がシリーズの一部であるとして前の文書
参考:http://www.w3.org/TR/2014/REC-html5-20141028/links.html#linkTypes<area href="./plain.html" rel="alternate" alt="簡易版" shape="rect" coords="50,50,100,100">
target="ウィンドウ名|キーワード"
href 属性
が指定されている場合、リンク先を表示させるウィンドウ名、または以下のキーワードを指定します。_blank
新しいウィンドウ _self
現在のウィンドウ _parent
親ウィンドウ、ウィンドウまたは許可が無ければ現在のウィンドウ _top
最上位のウィンドウ、ウィンドウまたは許可が無ければ現在のウィンドウ type="MIMEタイプ"
href 属性
が指定されている場合、リンク先のMIMEタイプを指定します。shape="領域の形状"
- イメージマップに作成する領域の形状を以下のキーワードで指定します。
circle
円 default
画像全体 poly
多角形 rect
四角形(デフォルト) coords="座標"
- イメージマップで作成される図形の座標を指定します。図形の左上を起点(0,0)にして各座標のポイントを整数で指定します。座標は
shape 属性
に応じて指定します。shape 属性
がdefault
の場合は指定できません。circle
中心X, 中心Y, 半径(3つの整数) poly
X, Y, X, Y, X, Y, ...(X, Yのペア。6つ以上の偶数個の整数が必要) rect
左上X, 左上Y, 右下X, 右下Y(4つの整数) - グローバル属性
accesskey
,autocapitalize
,autofocus
,class
,contenteditable
,data-*
,dir
,draggable
,enterkeyhint
,hidden
,id
,inputmode
,is
,itemid
,itemprop
,itemref
,itemscope
,itemtype
,lang
,nonce
,spellcheck
,style
,tabindex
,title
,translate
サンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>HTML5 › area</title>
</head>
<body>
<h1>HTML5 › area</h1>
<p>
Please select a shape:
<img src="https://www.w3.org/TR/2014/REC-html5-20141028/images/sample-usemap.png" usemap="#shapes" alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.">
<map name="shapes">
<area shape="rect" coords="50,50,100,100"> <!-- the hole in the red box -->
<area shape="rect" coords="25,25,125,125" href="https://emwai.jp//reference/html5/about/" alt="Red box.">
<area shape="circle" coords="200,75,50" href="https://emwai.jp//reference/html5/_html/" alt="Green circle.">
<area shape="poly" coords="325,25,262,125,388,125" href="https://emwai.jp//reference/html5/_head/" alt="Blue triangle.">
<area shape="poly" coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60" href="https://emwai.jp//reference/html5/_body/" alt="Yellow star.">
</map>
</p>
</body>
</html>