HTML5における＜map＞タグの使い方

<map>タグはイメージマップ（クリッカブルマップ）と呼ばれる、画像上にリンクの領域を作成する際に使用するタグです。今回は、HTML5における<map>タグの使い方をご紹介します。

HTML5における<map>タグの使い方

イメージマップには、2種類あり、ブラウザに依存する「クライアントサイド・イメージマップ」と、ブラウザに依存しない「サーバーサイド・イメージマップ」があります。ブラウザに依存しないほうが良いのでは？と思うかもしれませんが、クライアントサイド・イメージマップのほうが、昔からあるもので、幅広いブラウザに対応しているため現段階ではこちらを推奨します。

イメージマップを作成するには、<map>タグの他に、<area>タグと、画像やオブジェクトを表示させる<img>タグや<object>タグが必要になります。また、<area>の属性でリンク先やリンクの領域の形状などを指定します。基本的な使い方は以下のようになります。

更に、画像やオブジェクトを使用する場合、以下のようになります。

<map>に名前をつけて、画像やオブジェクトの方で呼び出す形になります。あとはareaの属性で、リンク先やリンクの領域の範囲、形などを指定していきます。基本的な使い方は以上になります。