HTML5タグ虎の巻

areaタグ

areaは、クリッカブルマップのリンクエリアを設定するタグです。

解説

areaタグは、mapタグの子要素として使用します。

コンテンツ・モデル

カテゴリー
(自カテゴリ)
フロー・コンテンツ
フレージング・コンテンツ
コンテキスト
(親カテゴリ)
mapタグ
コンテンツ・モデル
(子カテゴリ)
なし

属性

areaタグには以下の属性が指定できます。

【属性】
属性説明
alt代替テキスト
(例)alt="ねこ"
※href属性を指定する場合は必須です。
shapeリンクエリアの形を指定する
(circle:丸、rect:四角形、poly:多角形)
(例)shape="circle"
coordsリンクエリアの座標を指定する
座標の指定方法はshapeで指定した形により異なります。
circleの場合:x座標, y座標, 半径
rectの場合:左上x座標, 左上y座標, 右下x座標, 右下y座標
polyの場合:1番目のx座標, 1番目のy座標, 2番目のx座標, 2番目のy座標 ...
hrefリンク先を指定する
(例)href="test.html"
targetターゲットを指定する
(例)target="_blank"
title補足情報を指定する
(例)title="テスト"
【主要グローバル属性】
属性説明
classクラスを指定する
(例)class="hoge"
idIDを指定する
(例)id="foo"
styleスタイルを指定する
(例)style="color:red;"
titleツールチップを指定する
(例)title="補足情報です"
tabindexTabキーによる移動の順番を指定する
 正数:指定した数値の順にフォーカス移動される
 負数:フォーカスは可能だが、タブ移動時はフォーカス対象とならない
(例)tabindex="10"

その他のグローバル属性値については、グローバル属性をご覧ください。

サンプル

areaタグのサンプル

<img src="map.png" usemap="#mss" alt="マップ">
<map name="mss">
  <area href="maru.html" shape="circle" title="丸" coords="80,56,38" alt="丸">
  <area href="sankaku.html" shape="poly" title="三角" coords="215,18,170,95,260,95" alt="三角">
  <area href="shikaku.html" shape="rect" title="四角" coords="312,20,392,95" alt="四角">
</map>
マップ 丸 三角 四角

備考

  • mapタグの子要素としてareaタグは複数指定できます。

関連項目

  • img:画像を表示する
  • map:クリッカブルマップを設定する
  • area:クリッカブルマップのリンクエリアを設定する