HTMLのmapタグに関する記事
mapタグの定義と使用方法
HTMLの<map>タグは、イメージマップを定義するために使用されます。イメージマップは1つの画像内で複数のクリッカブルエリアを作成することができ、各エリアに対して異なるリンク先を設定することが可能です。通常、<area>タグとともに使用し、各エリアの形状やリンク先を指定します。
ブラウザのサポートレベル
HTMLの<map>タグは主要なモダンブラウザの全てでサポートされています。以下の表は各ブラウザでのサポート状況を示しています:
| ブラウザ | サポート状況 |
|---|---|
| Google Chrome | サポート済み |
| Mozilla Firefox | サポート済み |
| Safari | サポート済み |
| Microsoft Edge | サポート済み |
| Opera | サポート済み |
mapタグの属性
以下は<map>タグに関連する主要な属性です:
name- イメージマップの名前を定義します。<img>タグのusemap属性とリンクしています。
対応するイベント
<map>タグそのものには特別なイベントはありませんが、<area>タグには以下のようなイベントがあります:
onclick- エリアがクリックされたときに発生します。onmouseover- マウスがエリアの上に乗ったときに発生します。onmouseout- マウスがエリアから外れたときに発生します。
コード例
以下はHTMLの<map>タグの基本的な使用例です:
<img src="example.jpg" usemap="#example-map" alt="Example Map">
<map name="example-map">
<area shape="rect" coords="34,44,270,350" href="https://example1.com" alt="Example1">
<area shape="circle" coords="120,120,60" href="https://example2.com" alt="Example2">
<area shape="poly" coords="290,172,333,250,290,330" href="https://example3.com" alt="Example3">
</map>Q&A
Q1: <map>タグはどのような用途で利用されますか？
A1: <map>タグは、複数のクリッカブルエリアを持つインタラクティブな画像を作成するために使用されます。
Q2: <area>タグのshape属性にはどのような値を設定できますか？
A2: shape属性にはrect（矩形）、circle（円形）、poly（多角形）の3つの値を設定することができます。
Q3: イメージマップはレスポンシブ対応できますか？
A3: はい、JavaScriptやCSSを駆使することで、イメージマップはレスポンシブ対応にすることができます。