最終更新日 2021年4月7日

map要素

子要素のarea要素と組み合わせて、クリック可能なイメージマップを定義します。画像自体は、img要素またはobject要素のusemap属性で指定します。

name属性では、イメージマップの名前を定義します。name属性の指定は必須で、値に空の文字列や、スペース文字を含むことはできません。また、同じドキュメント内にある別のmap要素のname属性と重複した名前を付けることもできません。id属性を指定するときは、name属性と同じ値を使用してください。

map要素がPhrasingコンテンツのみを含む場合、Phrasingコンテンツの記述箇所で使用できます。それ以外の場合はFlowコンテンツの記述箇所で使用できます。

HTML5での変更点

特にありません

カテゴリ	タグの省略	親要素	子要素
Flowコンテンツ Phrasingコンテンツ	省略不可	この要素がPhrasingコンテンツのみ含む場合はPhrasingコンテンツを子にできる要素。そうでなければFlowコンテンツを子にできる要素。	Transparent

属性	値	説明
name	文字列	イメージマップの名前を指定します。
グローバル属性	-	-
イベント属性	-	-

サンプルコード

<body>
  <h1>モーニングセット</h1>
  <p>下記の画像をクリックすると、それぞれの商品ページに移動します。</p>
  <p>
    <img src="morning.jpg" usemap="#morningset">
    <map name="morningset">
      <area href="muffin.html" shape="circle" coords="120,140,110" alt="マフィン">
      <area href="potato.html" shape="rect" coords="10,50,70,90" alt="ポテト">
      <area href="coffee.html" shape="rect" coords="70,10,140,40" alt="コーヒー">
    </map>
  </p>
</body>

参考文献：W3C HTML5「4.8.12 The map element」

ザマワンにエントリーしました！

『ザマワン』は「座間ワンミニッツ」の略称であり、座間市の魅力を１分にギュッと詰め込む動画コンテストです。