<area>

更新日
仕様 HTML Living Standard
分類 フロー・コンテンツ / フレージング・コンテンツ
利用場所 フレージング・コンテンツが置ける場所(ただし、祖先にmap要素を持たなければならない)
内容 無し(空要素)

area要素は、クライアントサイド・イメージマップのリンク領域を設定します。この要素はmap要素内で使用します。


<img src="map.gif" alt="サンプル" usemap="#example">

<map name="example">

<area shape="rect" coords="50,50,150,150" href="map1.html" alt="四角">
<area shape="circle" coords="250,100,50" href="map2.html" alt="">
<area shape="poly" coords="400,50,450,150,350,150" href="map3.html" alt="三角">
<area shape="default" href="map4.html" alt="その他の領域">

</map>

属性
任意属性
shape="" 領域の形状 rect 四角形(既定値)
circle 円形
poly 多角形
default 画像全体
coords="" 領域の座標 座標(x,y)等
  • rect の場合:左上と右下の角の座標(x,y,x,y
  • circle の場合:中心点の座標と半径(x,y,半径
  • poly の場合:すべての角の座標(x,y,x,y,x,y ...
  • default の場合:coords属性は指定できない
href="" リンク先の指定 URL リンク先のURL
alt="" 代替テキスト テキスト 画像が表示できない場合のリンクテキスト
rel="" 現在の文書から見たリンク先の関係 リンクタイプ 半角スペース区切りで複数指定可能
target="" リンク先の表示方法 _blank 新規のブラウジング・コンテキストに表示
_self 現在のブラウジング・コンテキストに表示
_parent 親のブラウジング・コンテキストに表示
_top 最上位のブラウジング・コンテキストに表示
ブラウジング・コンテキスト名 任意のブラウジング・コンテキストに表示
download="" ダウンロード用のリンクを指定 ファイル名 ダウンロード時のファイル名を指定(値は省略可能)
referrerpolicy="" リンクのリファラーポリシー リファラーポリシー 既定値は strict-origin-when-cross-origin
ping="" [+]pingの送信先 URL 半角スペース区切りで複数指定可能
廃止属性(HTML Living Standardでは未定義)
hreflang="" [×]リンク先の記述言語 言語コード jaenzh、等
type="" [×]リンク先のMIMEタイプ MIMEタイプ
  • href属性を持たないarea要素は、alt属性rel属性target属性download属性referrerpolicy属性ping属性を指定してはなりません。
  • area要素にitemprop属性(グローバル属性)が指定されている場合は、href属性も指定する必要があります。
  • その他、area要素の状態によっては、一部の属性が必須になる場合があります。(詳細は以下で)

target属性download属性referrerpolicy属性ping属性については、a要素の下記のページを参考にしてください。

href属性とalt属性について

href属性リンク先のURLを、alt属性画像が表示できない場合のリンクテキストを指定します。

この2つの属性の関係は次のようになります。

area要素にhref属性がある場合

href属性を持つarea要素は、リンクが設定されている領域を表します。この場合はalt属性必須となります。

<area shape="rect" coords="150,0,299,30" href="example.html" alt="リンクテキスト">

ただし、同じマップ内において同一のリンク先が指定された別のarea要素があり、そこに空でないalt属性が指定されている場合には、alt属性のを省略することができます。

<area shape="rect" coords="150,0,299,30" href="example1.html" alt="リンクテキスト">
<area shape="rect" coords="300,0,449,30" href="example1.html" alt="">
area要素にhref属性がない場合

href属性を持たないarea要素は、リンクが設定されていない領域を表します。この場合はalt属性を省略しなければなりません。

<area shape="rect" coords="150,0,299,30">

領域の形状について

領域の形状は、shape属性で指定します。指定できる値は次の4つです。

rect 四角形 (既定値)
四角形(正方形・長方形)の領域を作成します。shape属性を省略した場合は、この値が使用されます。
circle 円形
正円の領域を作成します。(楕円は不可)
poly 多角形
任意の角数を持つ多角形の領域を作成します。(三角形以上)
default 画像全体
画像全体を領域とします。
  • default が指定されたarea要素は、他のarea要素よりも後に配置する必要があります。(領域が重なっている場合は、先に指定した領域が優先されるので)
  • rectcirclepoly を指定している場合は、coords属性必須となります。逆に、default を指定している場合はcoords属性を指定してはなりません。

座標の指定方法

領域の座標は、coords属性で指定します。

500×200pxの画像内に、四角、丸、三角の図形が並んでいます。画像全体の座標は、左上が0,0、右上が0,500、左下が0,200、右下が500,200となります。左上を基点に、右方向にx、下方向にyです。

領域の形状により、座標の指定方法が異なります。例えば、上記の画像を使用した場合は、各領域の指定内容は次のようになります。(座標の数値(ピクセル数)をカンマ( , )で区切って記述していきます)

rect(四角形)の場合
左上の角と右下の角の座標を指定 (x,y,x,y
coords="50,50,150,150"
circle(円形)の場合
中心点の座標と半径を指定 (x,y,半径
coords="250,100,50"
poly(多角形)の場合
すべての角の座標を指定 (x,y,x,y,x,y ...
coords="400,50,450,150,350,150"
default(画像全体)の場合
画像全体が領域となるため、座標の指定は行いません

座標の割り出し方

画像編集ソフトがあれば、座標を簡単に割り出すことができます。Windowsの場合は、付属しているペイントでも座標を調べることが可能です。

  • ペイントの場合: 調べたい位置にカーソルを合わせると、右下(または左下)に座標が表示されます。
旧HTMLからの変更点
  • HTML5:nohref属性が廃止され、hreflang属性、type属性、rel属性、download属性が追加されました。
  • HTML5:alt属性が必須ではなくなりました。(条件付き)
  • HTML5.1:hreflang属性とtype属性が廃止されました。
  • HTML5.2:referrerpolicy属性が追加されました。
  • HTML LS:ping属性が追加されました。
  • HTML LS:要素の利用場所が微妙に変わりました。(祖先にmap要素またはtemplate要素を持たなければならない → 祖先にmap要素を持たなければならない)

使用例

画像全体と各図形にリンクを設定した例

<p><img src="map.gif" alt="サンプル" usemap="#example1" width="500" height="200"></p>

<map name="example1">

<area shape="rect" coords="50,50,150,150" href="map1.html" alt="四角">
<area shape="circle" coords="250,100,50" href="map2.html" alt="">
<area shape="poly" coords="400,50,450,150,350,150" href="map3.html" alt="三角">
<area shape="default" href="map4.html" alt="その他の領域">

</map>

表示例
サンプル
四角 丸 三角 その他の領域
  • 古いブラウザでは、shape="default" で設定されたリンクが機能しない場合があります。
画像全体にリンクを設定し、図形の部分はリンクを設定しない例

<p><img src="map.gif" alt="サンプル" usemap="#example2" width="500" height="200"></p>

<map name="example2">

<area shape="rect" coords="50,50,150,150">
<area shape="circle" coords="250,100,50">
<area shape="poly" coords="400,50,450,150,350,150">
<area shape="default" href="map4.html" alt="その他の領域">

</map>

表示例
サンプル
その他の領域
  • 古いブラウザでは、shape="default" で設定されたリンクが機能しない場合があります。
target属性を指定した例

<p><img src="map.gif" alt="サンプル" usemap="#example3" width="500" height="200"></p>

<map name="example3">

<area shape="rect" coords="50,50,150,150" href="map5.html" alt="四角" target="_blank">

</map>

表示例
サンプル
四角
download属性を指定した例
  • 四角の図形にのみ、ダウンロード用のリンクを設定しています。
  • 対応しているブラウザでは、実際にダウンロードされるのでご注意ください。未対応のブラウザではTAG indexのバナーが画面上に表示されます。

<p><img src="map.gif" alt="サンプル" usemap="#example4" width="500" height="200"></p>

<map name="example4">

<area shape="rect" coords="50,50,150,150" href="image/tagindex.png" alt="TAG index" download>

</map>

表示例
サンプル
TAG index