【HTML Living Standard】map要素の使い方
map要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
mapオブジェクトは、イメージマップを表すオブジェクトです。イメージマップとは、ウェブページに表示される一枚の画像において、その画像内の特定の領域をそれぞれ異なるリンク先へ導くことができるように定義する仕組みのことです。これにより、単一の画像から複数のインタラクティブな操作を可能にし、ユーザーエクスペリエンスを向上させることが目的です。
このmapオブジェクトは、通常、画像を配置する<img>要素と組み合わせて使用されます。まず、mapオブジェクトを作成し、そのname属性にユニークな識別子を設定します。次に、画像を埋め込む<img>要素のusemap属性に、#記号の後にmapオブジェクトで設定したname属性の値を記述することで、両者を関連付けます。
mapオブジェクトの内部には、area要素を一つ以上配置します。各area要素は、イメージマップ内でクリック可能な特定の形状（例えば、矩形、円、または複雑な多角形など）と、その形状がクリックされた際のリンク先となるURL、および代替テキスト（alt属性）を定義します。これにより、開発者は一枚の画像の中に複数の異なるリンクを持つホットスポットを柔軟に設定できます。
例えば、ウェブサイト上で会社の組織図を一枚の画像として表示し、mapオブジェクトとarea要素を用いることで、画像内の各部署をクリックすると、その部署の詳細情報ページや担当者一覧ページへ移動させるといった、視覚的で直感的なナビゲーションを構築できます。name属性の値は、HTMLドキュメント内で一意である必要があります。この機能は、複雑なナビゲーションや情報の階層化を視覚的に表現する際に特に有効です。
構文(syntax)
1<map name="mapname"> 2 <area shape="rect" coords="0,0,50,50" href="link1.html" alt="Description 1"> 3 <area shape="circle" coords="100,100,25" href="link2.html" alt="Description 2"> 4</map>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML Map/Areaで画像マップを作成する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML Map/Area サンプル</title> 7 <style> 8 body { 9 font-family: Arial, sans-serif; 10 margin: 20px; 11 text-align: center; 12 } 13 h1 { 14 color: #333; 15 } 16 p { 17 margin-top: 20px; 18 } 19 </style> 20</head> 21<body> 22 <h1>イメージマップのサンプル</h1> 23 <p>以下の画像をクリックすると、クリックした領域によって異なるページに遷移します。</p> 24 25 <!-- 26 img要素のusemap属性は、関連するmap要素のname属性の値を参照します。 27 値は「#」で始まる必要があります。 28 --> 29 <img src="https://via.placeholder.com/600x400/007bff/ffffff?text=Clickable+Image" 30 alt="クリック可能なイメージ" 31 usemap="#samplemap"> 32 33 <!-- 34 map要素は、画像内のクリック可能な領域（イメージマップ）を定義します。 35 name属性は、img要素のusemap属性から参照される一意の名前です。 36 --> 37 <map name="samplemap"> 38 <!-- 39 area要素は、イメージマップ内の個々のクリック可能な領域を定義します。 40 shape属性で領域の形状を指定します（rect:長方形, circle:円, poly:多角形など）。 41 coords属性で、shapeに応じた座標を指定します。 42 href属性で、クリック時に遷移するURLを指定します。 43 alt属性は、アクセシビリティのために必須です。 44 --> 45 46 <!-- 長方形領域の例 --> 47 <area shape="rect" 48 coords="0,0,300,200" 49 href="https://example.com/rectangle" 50 alt="長方形の領域" 51 target="_blank"> <!-- 新しいタブで開く --> 52 53 <!-- 円形領域の例 --> 54 <area shape="circle" 55 coords="450,100,80" 56 href="https://example.com/circle" 57 alt="円形の領域" 58 target="_blank"> 59 60 <!-- 多角形領域の例 --> 61 <area shape="poly" 62 coords="100,250,200,350,50,350" 63 href="https://example.com/polygon" 64 alt="多角形の領域" 65 target="_blank"> 66 67 <!-- デフォルト領域の例（上記以外の部分をクリックした場合） --> 68 <area shape="default" 69 href="https://example.com/default" 70 alt="その他の領域" 71 target="_blank"> 72 </map> 73 74 <p>※クリックするとダミーの外部サイトへ遷移します。</p> 75</body> 76</html>
このサンプルコードは、HTMLのmap要素とarea要素を用いて、画像の一部をインタラクティブなクリック可能領域とする「イメージマップ」を作成する方法を示しています。map要素は、画像内のクリック可能な領域群を定義するために使用されるコンテナ要素です。この要素自体には特定の引数や戻り値はなく、その機能は内部に記述されるarea要素によって実現されます。
イメージマップを画像に適用するには、まず<img>要素のusemap属性で、関連付けたい<map>要素のname属性の値を「#」を付けて参照します。サンプルコードでは<img usemap="#samplemap">と<map name="samplemap">がこの関連付けを行っています。
area要素は、map要素の内部に配置され、イメージマップにおける個々のクリック可能な領域を定義します。この要素のshape属性では領域の形状（例：rectで長方形、circleで円、polyで多角形、defaultで残りの全領域）を指定し、coords属性でその形状に応じた座標を設定します。href属性には、その領域がクリックされた際に遷移するURLを指定します。また、アクセシビリティのためalt属性も必須です。target属性を使用すれば、リンクを新しいタブで開くなどの挙動も制御できます。これにより、一枚の画像上でクリックする場所に応じて異なるコンテンツへ誘導できる、動的なWebページが作成可能です。
map要素は、img要素のusemap属性と連携し、画像内のクリック可能領域を定義します。usemap属性の値は、対応するmap要素のname属性の前に「#」を付けて指定する点を忘れないでください。クリック可能な各領域はmap要素の子要素であるarea要素で定義し、shape属性とcoords属性を正しく組み合わせることが重要です。特にcoordsは指定した形状によって記述方法が異なります。また、area要素には必ずalt属性を含め、アクセシビリティを確保してください。shape="default"を利用すると、定義された領域以外の全ての部分をカバーできます。これらは画像の特定部分にインタラクションを付与する特殊な用途で活用します。
HTML 画像マップでクリック可能な領域を作成する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML map 要素のサンプル</title> 7</head> 8<body> 9 <h1>画像マップの例</h1> 10 <p>以下の画像には、クリックすると異なるリンク先に遷移する領域（ホットスポット）が設定されています。</p> 11 12 <!-- 13 <img>要素の'usemap'属性で、この画像に適用する<map>要素を指定します。 14 値は'#'に続けて<map>要素の'name'属性の値を記述します。 15 --> 16 <img src="https://via.placeholder.com/400x200/ADD8E6/000000?text=Click+Areas" 17 alt="クリック可能な領域を持つサンプル画像" 18 usemap="#shapesmap" 19 width="400" 20 height="200"> 21 22 <!-- 23 <map>要素は、クライアントサイドの画像マップを定義します。 24 'name'属性の値は、対応する<img>要素の'usemap'属性の値（'#'を除く）と一致させる必要があります。 25 --> 26 <map name="shapesmap"> 27 <!-- 28 <area>要素は、画像マップ内のクリック可能な領域（ホットスポット）を定義します。 29 'shape'属性で領域の形状（'rect'、'circle'、'poly'など）を指定し、 30 'coords'属性でその座標を指定します。 31 'href'属性で、クリックした際のリンク先を指定します。 32 'alt'属性は、スクリーンリーダーなどのアクセシビリティツールのために重要です。 33 --> 34 35 <!-- 四角形のホットスポット: 左上(0,0)から右下(100,100) --> 36 <area shape="rect" 37 coords="0,0,100,100" 38 href="https://ja.wikipedia.org/wiki/%E5%9B%9B%E8%A7%92%E5%BD%A2" 39 alt="四角形領域" 40 title="四角形について"> 41 42 <!-- 円形のホットスポット: 中心(200,100)で半径50 --> 43 <area shape="circle" 44 coords="200,100,50" 45 href="https://ja.wikipedia.org/wiki/%E5%86%86_(%E5%9B%B3%E5%BD%A2)" 46 alt="円形領域" 47 title="円について"> 48 49 <!-- 多角形のホットスポット: 頂点(300,0), (350,50), (300,100), (250,50) --> 50 <area shape="poly" 51 coords="300,0,350,50,300,100,250,50" 52 href="https://ja.wikipedia.org/wiki/%E5%A4%9A%E8%A7%92%E5%BD%A2" 53 alt="多角形領域" 54 title="多角形について"> 55 </map> 56 57 <p>各領域にマウスを合わせるとツールチップが表示され、クリックするとWikipediaの関連ページに移動します。</p> 58</body> 59</html>
HTMLの<map>要素は、Webページ上の画像の中に、クリックできる特定の領域（ホットスポット）を定義するために使用されます。この要素自体は直接画面に表示されるものではなく、単独では機能しません。画像と連携することで、一枚の画像に複数のリンク先を設定する「クライアントサイド画像マップ」を実現します。
<map>要素を使用する際には、まず<img>要素のusemap属性で、どの<map>要素をその画像に適用するかを指定します。usemap属性の値は、#に続けて<map>要素のname属性の値を記述することで、画像とマップを関連付けます。
<map>要素の内部には、実際にクリック可能な領域を定義する<area>要素を配置します。<area>要素では、shape属性で領域の形状（四角形、円、多角形など）を、coords属性でその具体的な座標を指定します。そして、href属性でクリックした際のリンク先を設定し、alt属性でその領域の説明を提供します。alt属性は、視覚障がいのあるユーザーがスクリーンリーダーを利用する際に、その領域の目的を理解するために重要です。
<map>要素には引数や戻り値はありません。提供されたサンプルコードでは、<img>要素のusemap="#shapesmap"によって<map name="shapesmap">と紐付けられ、画像内に四角形、円形、多角形のホットスポットが定義されています。これらの領域をクリックすると、それぞれ異なるWikipediaのページへ遷移する仕組みが作られており、ユーザーが画像の特定の箇所から関連情報へアクセスできるインタラクティブな体験を提供します。
HTMLのmap要素は、画像の一部にリンクを設定するクライアントサイド画像マップを定義する際に使われます。最も重要な注意点は、<img>要素のusemap属性と、それに対応する<map>要素のname属性の値を完全に一致させることです。usemapの値は必ず#（ハッシュ）から始める必要がありますので、この記法を誤らないようにしてください。
また、<map>要素内でクリック可能な領域を定義する<area>要素では、shape属性で形状を、coords属性でその座標を正確に指定する必要があります。特に多角形（poly）の座標は記述ミスが起こりやすいため、慎重に確認しましょう。アクセシビリティを確保するため、<area>要素には必ずalt属性を設定し、画像が表示されない環境やスクリーンリーダーの利用者にも、その領域が何を示すのかが伝わるように配慮することが重要です。