このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

area要素/イメージマップの領域を指定

記事Jun. 23rd,2015
Dec. 14th,2019
クライアントサイドイメージマップにおける領域を指定する要素
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

要素について

概要

カテゴリー フロー・コンテンツフレージング・コンテンツ
利用場所 フレージング・コンテンツが置ける場所(ただし、祖先要素にmap”要素またはtemplate”要素を持たなければならない)
内容
タグの省略 終了タグはありません

area”要素はクライアントサイドイメージマップにおける領域を指定する要素です。

サンプルコード

<img src="sample_map.png" alt="イメージマップのサンプル" usemap="#sample1">

<map name="sample1">
<area href="sample1.html" shape="rect" coords="8,32,72,99" alt="長方形">
<area href="sample2.html" shape="poly" coords="97,103,30,193,163,193" alt="多角形">
<area href="sample3.html" shape="circle" coords="146,59,47" alt="円形">
</map>
イメージマップのサンプル 長方形 多角形 円形

属性と値

属性
属性 説明 説明
任意属性
グローバル属性
alt="" 代替テキスト テキスト イメージマップが表示できない場合のリンクテキスト
coords="" 領域の座標 左上の角のX座標,左上の角のY座標,右下の角のX座標,右下の角のY座標 shape”属性の値が“rect”の場合】左上の角の座標と右下の角の座標
中心点のX座標,中心点のY座標,半径 shape”属性の値が“circle”の場合】中心点の座標と半径
X座標,Y座標,X座標,Y座標,... shape”属性の値が“poly”の場合】すべての角の座標を順番に
shape="" 領域の形状 rect 長方形
circle 円形
poly 多角形
default 画像全体
href="" リンク先の指定 URL リンク先のURL
#ID名 リンクの到達点となる要素のid”属性の値
target="" リンク先の表示方法 _blank 新しいブラウジング・コンテキストに表示
_self 現在のブラウジング・コンテキストに表示
_parent 現在のブラウジング・コンテキストの1つ上位のブラウジング・コンテキストに表示
_top 現在のブラウジング・コンテキストの最上位のブラウジング・コンテキストに表示
ブラウジング・コンテキスト名 任意のブラウジング・コンテキストに表示
ping=""HTML Living Standardで定義 pingの送信先 URL pingの送信先
rel=""HTML5で追加 現在のページから見たリンク先との関係 リンクタイプ 現在のページから見たリンク先との関係
referrerpolicy=""HTML5.2で追加 リファラーポリシーを指定 リファラーポリシー リファラーポリシー
廃止された属性
hreflang=""注意 リンク先の記述言語 言語コード リンク先が記述されている言語
nohref=""注意 リンクしない nohref リンクしない
type=""注意 リンク先のMIMEタイプ MIMEタイプ リンク先のMIMEタイプ
tabindex="" フォーカスの可否とフォーカスの移動順序を指定する 正の整数 順次ナビゲーションに加わり、フォーカスの順番を指定(“tabindex”属性の値が小さい順番にフォーカスする)
0 順次ナビゲーションに加わるがフォーカスの順番は指定しない(文書内に記述された順番でフォーカスする)
負の整数 フォーカス可能だが順次ナビゲーションには加わらない
accesskey="" 要素にアクセスキーを割り当てる 文字 ユニコード1文字によるアクセスキー
onfocus="" フォーカスされた時に実行されるスクリプト スクリプト フォーカスされた時に実行されるスクリプト
onblur="" フォーカスを失った時に実行されるスクリプト スクリプト フォーカスを失った時に実行されるスクリプト

仕様書

area”要素はHTML3.2から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
<area>
定義あり

定義あり

定義あり

定義あり

定義あり
HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
alt=""
定義あり

定義あり

定義あり

定義あり

定義あり
coords=""
定義あり

定義あり

定義あり

定義あり

定義あり
shape=""
定義なし

定義あり

定義あり

定義あり

定義あり
href=""
定義なし

定義なし

定義なし

定義あり

定義あり
target=""
定義あり

定義あり

定義あり

定義あり

定義あり
download=""
定義あり

定義あり

定義あり

定義あり

定義あり
ping=""
定義なし

定義なし

定義なし

定義なし

定義あり
rel=""
定義なし

定義あり

定義あり

定義あり

定義あり
referrerpolicy=""
定義なし

定義なし

定義なし

定義あり

定義あり
HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
hreflang=""
定義あり

定義あり

定義あり

定義あり

削除
nohref=""
定義あり

削除

削除

削除

削除
type=""
定義あり

定義あり

定義あり

定義あり

削除
tabindex=""
定義あり

グローバル属性

グローバル属性

グローバル属性

グローバル属性
accesskey=""
定義あり

グローバル属性

グローバル属性

グローバル属性

グローバル属性
onfocus=""
定義あり

グローバル属性

グローバル属性

グローバル属性

グローバル属性
onblur=""
定義あり

グローバル属性

グローバル属性

グローバル属性

グローバル属性

各属性の詳細

alt”属性

概要

alt”属性はイメージマップが表示できなかった時の代替テキストを指定します。

alt”属性はhref”属性が指定されているときは省略できません。また、href”属性が指定されていないときは“alt”属性は指定できません。

指定できる値

属性値 説明
テキスト イメージマップが表示できない場合のリンクテキスト

サンプルコード

<img src="sample_map.png" alt="イメージマップのサンプル" usemap="#sample2">

<map name="sample2">
<area href="sample1.html" shape="rect" coords="8,32,72,99" alt="長方形">
<area href="sample2.html" shape="poly" coords="97,103,30,193,163,193" alt="多角形">
<area href="sample3.html" shape="circle" coords="146,59,47" alt="円形">
</map>
イメージマップのサンプル 長方形 多角形 円形

coords”属性

概要

coords”属性はイメージマップの領域の座標を指定する属性です。

coords”属性の値として指定する座標は画像の左上の角を原点(“0,0”)として右方向への距離“X座標”、下方向への距離を“Y座標”としてピクセル数で指定します。座標の指定方法はshape”属性の値によって違います。

指定できる値

属性値 説明
左上の角のX座標,左上の角のY座標,右下の角のX座標,右下の角のY座標 shape”属性の値が“rect”の場合】左上の角の座標と右下の角の座標
中心点のX座標,中心点のY座標,半径 shape”属性の値が“circle”の場合】中心点の座標と半径
X座標,Y座標,X座標,Y座標,... shape”属性の値が“poly”の場合】すべての角の座標を順番に

座標の指定方法

shape”属性の値に“rect”を指定する場合

イメージマップの領域は長方形になります。“coords”属性の値はイメージマップの領域の領域の左上の角の座標と右下の角の座標を指定します。

coords="{左上の角のX座標},{左上の角のY座標},{右下の角のX座標},{右下の角のY座標}"
shape”属性の値に“circle”を指定する場合

イメージマップの領域は円形になります。“coords”属性の値はイメージマップの領域の中心点の座標と半径の長さのピクセル数を指定します。

coords="{円の中心のX座標},{円の中心のY座標}"
shape”属性の値に“poly”を指定する場合

イメージマップの領域は多角形になります。“coords”属性の値はすべての角の座標を順番に記述して指定します。

coords="{1つ目の角のX座標},{1つ目の角のY座標},{2つ目の角のX座標},{2つ目の角のY座標},{3つ目の角のX座標},{3つ目の角のY座標},..."
shape”属性の値に“default”を指定する場合

画像全体がイメージマップの領域になります。“coords”属性は指定できません。他に領域を指定している“area”要素がある場合はその領域以外の部分がイメージマップの領域になります。

サンプルコード

<img src="sample_map.png" alt="イメージマップのサンプル" usemap="#sample4">

<map name="sample4">
<area href="sample1.html" shape="rect" coords="8,32,72,99" alt="長方形">
<area href="sample2.html" shape="poly" coords="97,103,30,193,163,193" alt="多角形">
<area href="sample3.html" shape="circle" coords="146,59,47" alt="円形">
<area href="sample4.html" shape="default" alt="全体">
</map>
イメージマップのサンプル 長方形 多角形 円形 全体

shape”属性

概要

shape”属性はイメージマップの領域の形状を指定する属性です。イメージマップの領域の座標はcoords”属性で指定します。

指定できる値

属性値 説明
rect 長方形
circle 円形
poly 多角形
default 画像全体

サンプルコード

<img src="sample_map.png" alt="イメージマップのサンプル" usemap="#sample10">

<map name="sample10">
<area href="sample1.html" shape="rect" coords="8,32,72,99" alt="長方形">
<area href="sample2.html" shape="poly" coords="97,103,30,193,163,193" alt="多角形">
<area href="sample3.html" shape="circle" coords="146,59,47" alt="円形">
</map>
イメージマップのサンプル 長方形 多角形 円形

座標の詳しい指定の仕方はcoords”属性の項を参照してください。

href”属性

概要

href”属性はリンク先のURLを指定します。値となるURLは相対パスと絶対パスのどちらでも指定することができます。

相対パス”は現在位置を基準として目的のファイルとの相対的な位置で指定する方法。“sample.html”や“directory/sample.html”等。
絶対パス”は現在位置とは関係なく絶対的な位置で指定する方法。“http://...”で始まるURL。

指定できる値

属性値 説明
URL リンク先のURL
#ID名 リンクの到達点となる要素のid”属性の値

リンク先の要素に付けられたid”属性の値の先頭に“#”をつけて“href”属性の値に指定することでページ内の特定の箇所へのリンクとすることができます。

また、ブラウザがサポートする“mailto:”や“tel:”などのスキームを付与することでリンクをクリックした時に特定の動作をさせることができます。

値を“mailto:メールアドレス”の形で指定することでリンクのクリックでメールソフトを起動させることができます。あて名欄に指定したメールアドレスが記入された状態でメールソフトが起動します。

ウェブページ上にメールアドレスを記載するとスパムボット等によりメールアドレスを収集され迷惑メールの被害に遭う可能性が格段に高まります。リスクを理解し、また対策をしたうえでメールアドレスを記載するようにしてください。

値を“tel:電話番号”の形で指定することで電話発信用のリンクとすることができます。

スマートフォン用の機能のためパソコン用のブラウザではデバイスに電話発信できるソフトウェアがインストールされている場合以外は正しく動作しません。

サンプルコード

<img src="sample_map.png" alt="イメージマップのサンプル" usemap="#sample6">

<map name="sample6">
<area href="sample.html" shape="rect" coords="8,32,72,99" alt="リンク">
<area href="mailto:emailaddress@example.com" shape="poly" coords="97,103,30,193,163,193" alt="メール">
<area href="tel:0312345678" shape="circle" coords="146,59,47" alt="電話">
</map>
イメージマップのサンプル リンク メール 電話

target”属性

概要

target”属性はリンク先をどのブラウジング・コンテキストに表示するかを指定します。

ブラウジング・コンテキスト”は文書(ウェブページ)が表示される環境のことで、通常はブラウザのウィンドウやタブ、iframe”要素のことを指します。

指定できる値

属性値 説明
_blank 新しいブラウジング・コンテキストに表示
_self 現在のブラウジング・コンテキストに表示
_parent 現在のブラウジング・コンテキストの1つ上位のブラウジング・コンテキストに表示
_top 現在のブラウジング・コンテキストの最上位のブラウジング・コンテキストに表示
ブラウジング・コンテキスト名 任意のブラウジング・コンテキストに表示

_parent”と“_top”は上位のブラウジング・コンテキストがない場合は“_self”と同じになります。

iframe”要素によって入れ子にされたブラウジング・コンテキストは“target”属性にその“name”属性の値を指定することでリンク先を表示するブラウジング・コンテキストとして指定することができます。

入れ子になったブラウジング・コンテキストの中に配置されたリンクから上位のブラウジング・コンテキストにリンク先を表示する場合“_parent”もしくは“_top”を使用します。

サンプルコード

<img src="sample_map.png" alt="イメージマップのサンプル" usemap="#sample11">

<map name="sample11">
<area href="sample.html" target="_self" shape="rect" coords="8,32,72,99" alt="長方形">
<area href="sample.html" target="_blank" shape="poly" coords="97,103,30,193,163,193" alt="多角形">
<area href="sample.html" target="example" shape="circle" coords="146,59,47" alt="円形">
</map>

ブラウジング・コンテキスト“example
<p><iframe src="sample2.html" style=" width: 100%; height: 300px;" name="example"></iframe></p>
イメージマップのサンプル 長方形 多角形 円形

ブラウジング・コンテキスト“example

download”属性HTML5で追加

概要

download”属性はリンク先をダウンロードさせるかを指定し、属性値はダウンロード時のファイル名を指定します。

属性値を指定しない場合は元のファイル名がそのままダウンロード時のファイル名になります。

指定できる値

属性値 説明
ファイル名 ダウンロード時のファイル名

サンプルコード

<img src="sample_map.png" alt="イメージマップのサンプル" usemap="#sample5">

<map name="sample5">
<area href="sample.png" shape="rect" coords="8,32,72,99" alt="長方形" download="サンプルの画像">
<area href="sample.png" shape="poly" coords="97,103,30,193,163,193" alt="多角形" download>
<area href="sample.png" shape="circle" coords="146,59,47" alt="円形" download>
</map>
イメージマップのサンプル 長方形 多角形 円形

ping”属性HTML Living Standardで定義

概要

ping”属性はリンクをクリックしたときに送信するpingの送信先を指定する属性です。リンクがクリックされるとユーザーにはhref”属性で指定されたリンク先が表示されますが、同時にバックグラウンドで指定された送信先に“Ping-From”ヘッダーと“Ping-To”ヘッダーが含まれるPOSTメソッドのHTTPリクエストを送信します。

ping”属性にCGIなどの集計用プログラムを指定することでリンクがクリックされたときにユーザーが閲覧していた文書のURLとリンク先のURLを記録することができます。

href”属性を指定していない“area”要素には指定できません。

指定できる値

属性値 説明
URL pingの送信先

値は半角スペースで区切ることで複数指定することができます。

サンプルコード

<img src="sample_map.png" alt="イメージマップのサンプル" usemap="#sample11">

<map name="sample11">
<area href="sample.html" ping="counting.php" shape="rect" coords="8,32,72,99" alt="長方形">
<area href="sample.html" ping="counting.php" shape="poly" coords="97,103,30,193,163,193" alt="多角形">
<area href="sample.html" ping="counting.php" shape="circle" coords="146,59,47" alt="円形">
</map>

rel”属性HTML5で追加

概要

rel”属性は文書とリンク先との関係を示します。属性値はリンクタイプで指定します。

指定できる値

属性値 説明
リンクタイプ 現在のページから見たリンク先との関係

alternate”とhreflang”属性との併用で翻訳版、media”属性との併用で別のデバイス向けの文書を示すことができます。

サンプルコード

<img src="sample_map.png" alt="イメージマップのサンプル" usemap="#sample9">

<map name="sample9">
<area href="http://www.example.com/" rel="nofollow" shape="rect" coords="8,32,72,99" alt="リンク">
<area href="en/sample.html" hreflang="en" rel="alternate" shape="poly" coords="97,103,30,193,163,193" alt="英語版">
<area href="sample-print.html" media="print" rel="alternate" shape="circle" coords="146,59,47" alt="フランス語版">
</map>

referrerpolicy”属性HTML5.2で追加

概要

referrerpolicy”属性はリンク先を読み込む時のリファラーポリシーを指定します。

リファラーポリシー”はリンク先を読み込む時に“リファラー”を送信するかの決まり事です。“リファラー”はブラウザが通常リンク先を読み込む時のHTTPリクエストに含む参照元の文書のURLのことです。リファラーポリシーによってリファラーを送信するかどうかを制御することができます。

referrerpolicy”属性を指定しない場合や、空の値を指定する場合の規定値は現在の文書から見てリンク先のセキュリティーレベルが低い(HTTPSからHTTPへのリンクなど)場合はリファラーを送信しない“no-referrer-when-downgrade”となります。

HTML5.2で追加された新しい属性のため古いバージョンのブラウザでは動作しない可能性があります。

指定できる値

属性値 説明
リファラーポリシー リファラーポリシー

サンプルコード

<img src="sample_map.png" alt="イメージマップのサンプル" usemap="#sample11">

<map name="sample11">
<area href="sample.html" referrerpolicy="no-referrer" shape="rect" coords="8,32,72,99" alt="長方形">
<area href="sample.html" referrerpolicy="no-referrer" shape="poly" coords="97,103,30,193,163,193" alt="多角形">
<area href="sample.html" referrerpolicy="no-referrer" shape="circle" coords="146,59,47" alt="円形">
</map>

廃止された属性

hreflang”属性注意

概要

hreflang”属性はリンク先の記述言語を示します。属性値は言語コードで指定します。

この属性はHTML5で追加されましたが、現行の仕様“HTML Living Standard”では廃止されています。

代替方法

代替方法はありません。

指定できる値

属性値 説明
言語コード リンク先が記述されている言語

rel="alternate"との併用でリンク先の文書が文書の翻訳版であることを示すことができます。

サンプルコード

<img src="sample_map.png" alt="イメージマップのサンプル" usemap="#sample8">

<map name="sample8">
<area href="index.html" hreflang="ja" shape="rect" coords="8,32,72,99" alt="リンク">
<area href="en/sample.html" hreflang="en" rel="alternate" shape="poly" coords="97,103,30,193,163,193" alt="英語版">
<area href="fr/sample.html" hreflang="fr" rel="alternate" shape="circle" coords="146,59,47" alt="フランス語版">
</map>

nohref”属性注意

概要

nohref”属性はイメージマップがリンクしないことを示します。

HTML5ではこの属性は廃止されていますので使用するべきではありません。

代替方法

href”属性を省略するだけで十分です。

指定できる値

属性値 説明
nohref リンクしない

サンプルコード

<img src="sample_map.png" alt="イメージマップのサンプル" usemap="#sample5">

<map name="sample5">
<area shape="rect" coords="8,32,72,99" alt="長方形" nohref>
<area shape="poly" coords="97,103,30,193,163,193" alt="多角形" nohref>
<area shape="circle" coords="146,59,47" alt="円形" nohref>
</map>

type”属性注意

概要

type”属性はリンク先のデータの種類をMIMEタイプで示します。属性値はMIMEタイプで指定します。

この属性はHTML5で追加されましたが、現行の仕様“HTML Living Standard”では廃止されています。

代替方法

代替方法はありません。

指定できる値

属性値 説明
MIMEタイプ リンク先のMIMEタイプ

サンプルコード

<img src="sample_map.png" alt="イメージマップのサンプル" usemap="#sample12">

<map name="sample12">
<area href="sample.mp3" type="audio/mpeg" shape="rect" coords="8,32,72,99" alt="長方形">
<area href="sample.png" type="image/png" shape="poly" coords="97,103,30,193,163,193" alt="多角形">
<area href="sample.pdf" type="application/pdf" shape="circle" coords="146,59,47" alt="円形">
</map>

tabindex”属性

概要

tabindex”属性はキーボードによる順次ナビゲーションによってフォーカスできるかどうかとフォーカスの移動順序を指定する属性です。

tabindex”属性はHTML5からグローバル属性になりました。“area”要素の属性としては定義されていませんが引き続き使用することが可能です。

tabindex”属性についてはこちらのページを参照。
グローバル属性-HTMLタグ辞書

指定できる値

属性値 説明
正の整数 順次ナビゲーションに加わり、フォーカスの順番を指定(“tabindex”属性の値が小さい順番にフォーカスする)
0 順次ナビゲーションに加わるがフォーカスの順番は指定しない(文書内に記述された順番でフォーカスする)
負の整数 フォーカス可能だが順次ナビゲーションには加わらない

サンプルコード

<img src="sample_map.png" alt="イメージマップのサンプル" usemap="#sample12">

<map name="sample12">
<area href="sample1.html" tabindex="1" shape="rect" coords="8,32,72,99" alt="長方形">
<area href="sample2.html" tabindex="2" shape="poly" coords="97,103,30,193,163,193" alt="多角形">
<area href="sample3.html" tabindex="-1" shape="circle" coords="146,59,47" alt="円形">
</map>

accesskey”属性

概要

accesskey”属性は要素にアクセスキー、もしくはショートカットキーを指定する属性です。“accesskey”属性で指定されたキーボードのキーを押すことで要素にフォーカスしたり操作したりできるようになります。

accesskey”属性はHTML5からグローバル属性になりました。“area”要素の属性としては定義されていませんが引き続き使用することが可能です。

accesskey”属性についてはこちらのページを参照。
グローバル属性-HTMLタグ辞書

指定できる値

属性値 説明
文字 ユニコード1文字によるアクセスキー

サンプルコード

<img src="sample_map.png" alt="イメージマップのサンプル" usemap="#sample12">

<map name="sample12">
<area href="sample1.html" accesskey="1" shape="rect" coords="8,32,72,99" alt="長方形">
<area href="sample2.html" accesskey="A" shape="poly" coords="97,103,30,193,163,193" alt="多角形">
<area href="sample3.html" accesskey="F" shape="circle" coords="146,59,47" alt="円形">
</map>

onfocus”属性

概要

onfocus”属性はフォーカスされたときに実行するスクリプトする属性です。

onfocus”属性はHTML5からグローバル属性になりました。“area”要素の属性としては定義されていませんが引き続き使用することが可能です。

onfocus”属性についてはこちらのページを参照。
イベント属性-HTMLタグ辞書

指定できる値

属性値 説明
スクリプト フォーカスされた時に実行されるスクリプト

サンプルコード

<img src="sample_map.png" alt="イメージマップのサンプル" usemap="#sample12">

<map name="sample12">
<area href="sample1.html" onfocus="alert('Hello')" shape="rect" coords="8,32,72,99" alt="長方形">
<area href="sample2.html" onfocus="alert('Hello')" shape="poly" coords="97,103,30,193,163,193" alt="多角形">
<area href="sample3.html" onfocus="alert('Hello')" shape="circle" coords="146,59,47" alt="円形">
</map>

onblur”属性

概要

onblur”属性はフォーカスを失った時に実行されるスクリプトを指定する属性です。

onblur”属性はHTML5からグローバル属性になりました。“area”要素の属性としては定義されていませんが引き続き使用することが可能です。

onblur”属性についてはこちらのページを参照。
イベント属性-HTMLタグ辞書

指定できる値

属性値 説明
スクリプト フォーカスを失った時に実行されるスクリプト

サンプルコード

<img src="sample_map.png" alt="イメージマップのサンプル" usemap="#sample12">

<map name="sample12">
<area href="sample1.html" onblur="alert('Hello')" shape="rect" coords="8,32,72,99" alt="長方形">
<area href="sample2.html" onblur="alert('Hello')" shape="poly" coords="97,103,30,193,163,193" alt="多角形">
<area href="sample3.html" onblur="alert('Hello')" shape="circle" coords="146,59,47" alt="円形">
</map>
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク