JA EN

イメージマップ

読み: いめーじまっぷ

1枚の画像内に複数のクリック可能な領域を設定し、それぞれ異なるリンク先を割り当てるHTML技術。

イメージマップとは、1 枚の画像内に複数のクリック可能な領域 (ホットスポット) を定義し、各領域に異なるリンク先を割り当てる HTML の技術である。例えば日本地図の画像で各都道府県をクリックするとその地域のページに遷移する、といったインタラクティブな画像ナビゲーションを実現できる。

HTML では <map> タグと <area> タグを使って実装する。<area>shape 属性で矩形 (rect)、円形 (circle)、多角形 (poly) の領域を座標で指定する。ただし、レスポンシブデザインとの相性が悪く、画像サイズが変わると座標がずれるため、現在は CSS や SVG で代替されることが多い。

イメージマップを使用する場合は、各 <area>代替テキストを設定してアクセシビリティを確保することが必須である。また、画像のサイズが大きい場合は画像圧縮ツールで軽量化し、ページの読み込み速度を維持する。

関連用語

関連記事