mapタグの使い方と画像内のクリック可能な領域を設定する方法をわかりやすく解説

2024.09.12
スポンサーリンク
スポンサーリンク

mapの概要

画像内にクリック可能な領域を設定する HTMLタグ

<map name=”マップ名”> <area …> </map>

概要 mapタグは、画像内の特定の領域をクリック可能にするために使用されます。areaタグと組み合わせて、異なるリンクを設定できます。
  • mapタグは、areaタグと組み合わせて使用する。
  • usemap属性を画像に指定し、mapタグと関連付ける。
  • 複数の領域に異なるリンクを設定可能。

mapタグの主な属性

属性 説明 使用例
name 画像マップの名前を指定 <map name="exampleMap">
usemap 画像にマップを適用（#付きの名前） <img src="map.jpg" usemap="#exampleMap">

areaタグの主な属性

属性 説明 使用例
shape クリック領域の形状（rect, circle, poly） <area shape="rect" coords="10,10,100,100">
coords 座標を指定 rect: x1,y1,x2,y2 / circle: x,y,r / poly: x1,y1,x2,y2,...
href クリック時のリンク先 <area href="page.html">
alt 代替テキスト（アクセシビリティ向上） <area alt="リンク説明">
target リンクの開き方を指定 <area target="_blank">

mapタグの基本的な使い方

以下の例では、画像内の異なる領域にクリック可能なリンクを設定しています。

<img src="map.jpg" usemap="#exampleMap" width="500" height="300">

<map name="exampleMap">
    <area shape="rect" coords="50,50,150,150" href="https://www.google.com" target="_blank" alt="リンク1">
    <area shape="circle" coords="250,150,50" href="https://www.yahoo.co.jp" target="_blank" alt="リンク2">
</map>

実行例：

リンク1 リンク2

mapタグの応用：ポリゴン（多角形）領域の設定

ポリゴンを使用すると、不規則な形のクリック領域を作成できます。

<area shape="poly" coords="100,100,200,50,300,100,200,150" href="page3.html" alt="ポリゴンリンク">

注意事項

  • 画像のusemap属性とmapタグのname属性を一致させる。
  • 適切なcoordsを設定し、正しい位置にリンク領域を作成する。
  • アクセシビリティ向上のため、alt属性を指定する。
  • クリック領域を視覚的に確認しながら調整すると、精度が向上する。

よくある質問

Q: 画像マップをレスポンシブ対応にするには？
A: JavaScriptの resize イベントを使用して、画像のサイズに合わせて座標を動的に調整できます。
Q: shape属性の違いは？
A: rectは四角形、circleは円、polyは多角形のクリック領域を指定できます。
Q: 複数の画像マップを設定できますか？
A: はい、異なるname属性を持つ複数のmapタグを定義し、それぞれ異なるusemapを指定できます。
Q: areaタグにCSSを適用できますか？
A: いいえ、areaタグには直接CSSを適用できませんが、画像にオーバーレイを追加して視覚的な強調を行うことは可能です。
Q: スクリーンリーダーはmapタグを認識しますか？
A: ほとんどのスクリーンリーダーはalt属性を使用してリンクを識別するため、適切な説明を付けることが重要です。

まとめ

  • mapタグは、画像内の特定領域にクリック可能なリンクを設定する。
  • 画像のusemap属性をmapタグのname属性と一致させる必要がある。
  • areaタグのshape属性で領域の形状（四角形、円、多角形）を指定できる。
  • アクセシビリティ向上のため、alt属性を必ず指定する。
  • レスポンシブ対応にはJavaScriptを活用し、座標を動的に調整する必要がある。
スポンサーリンク