map 要素クリッカブルマップを表す

map 要素は area 要素と組み合わせてクライアントサイド クリッカブルマップを表します。

name 属性は map 要素においては必須属性です。name 属性はクリッカブルマップに名前を付与し、それを img 要素object 要素に付与した usemap 属性で指定することで、これら要素とクリッカブルマップとを関連付けることができます。

name 属性には空白スペースを含むことはできず、値を空にすることも認められません。また、値の大文字 / 小文字は区別されません。

さらに、その名前は文書内の他の map 要素に付与された名前と同じになってはいけないほか、もし id 属性が同時に指定された場合は、name 属性値と id 属性値は同じものを付与する必要があります。

map 要素の仕様

カテゴリ
コンテンツモデル
この要素を使用できる文脈

フレージング・コンテンツが期待される場所

この要素で使用できる属性

map 要素のサンプルソース

<!-- 地図画像を使用したクリッカブルマップの例 -->
<figure>
 <figcaption>エリア選択マップ</figcaption>
 <img src="map.png" usemap="#map" alt="関東 6県の地図。県を選択するとそのエリアの店舗一覧に移動します。埼玉県は現在営業所がありません。" />
 <map name="map">
  <area shape="rect" coords="50,50,100,100" />
  <area shape="rect" coords="50,100,100,200" href="tokyo.html" alt="東京都" />
  <area shape="rect" coords="0,100,50,200" href="kanagawa.html" alt="神奈川県" />
  …省略…
 </map>
</figure>

主要ブラウザの対応

IE11
Edge(EdgeHTML)
Edge(Chromium)
Chrome
Firefox
Safari
iOS Safari
Android Chrome

仕様書の該当箇所

4.8.13 The map element

用途から目的の要素を探す

用途から HTML5 の要素を逆引きできます。

テキストに対する意味づけを行いたい
テキストの編集を示したい
改行や折り返しを指定したい
上付きや下付きを指定したい
テキストの書字方向を制御したい
テキストにルビをふりたい
箇条書きなどリストを表したい
セクションを定義したい
コンテンツをグループ化したい
画像や映像などを埋め込みたい
スクリプトやスタイルを埋め込みたい
フォーム関連の要素
テーブル関連の要素
ドキュメントにメタデータを付与したい
インタラクティブな要素
その他

このページの上部へ