最終更新HTMLの<map>マップタグと<area>エリアタグはイメージマップを作成するときに合わせて使用します。イメージマップとは画像上にクリックできるリンクを設置する手法です。😺「クリッカブルマップ」と呼ばれることもあります。画像サイズとマップサイズは合わせるレスポンシブ対応するためにはJavaScriptを利用するHTMLとCSSだけではレスポンシブにできないHTMLでのイメージマップの作り方イメージマップを作るときに必要なタグは主に次の3つです。👆画像の左上と右下がリンクになっている画像とマップをひもづける上のサンプルコードのように、画像とマップは別に配置します。mapタグにマップ名を明記(name="マップ名"という属性を指定)imgタグで使用するマップ名を指定(usemap="#マップ名"という属性を指定)👆usemapで指定するマップ名の前には#をつける必要があります。--></map>👆さきほどの解説の通り、画像とひもづけるためにname属性は必ず指定します。70"></map>👆必要な数だけ<area>タグを設置できます。<area>はリンクとして機能します。指定する属性は次のようになります。リンクを配置する位置。画像を表示できないときの代替テキスト。href属性を使用する場合は必須。リンク先をどこで開くか。href属性とあわせて使用。nofollowなど。クリックでファイルをダウンロードするときに指定。👆target、rel、downloadは基本的にaタグと同じように指定できます。areaタグのcoords属性の書き方coords属性では、リンク領域の位置や大きさをpxで指定します。指定の仕方は「shape属性でどの値が指定されているか」によって異なります。👆たとえばshape="rect"の場合には、長方形の頂点のxとy座標の組み合わせを並べます。50">👆円形の場合には、円の中心の座標(x,y)と円の半径を指定します。200">👆多角形の場合には、頂点座標(x,y)を必要な数だけ並べます。複数のareaタグを使用し、そのリンク領域が重なった場合には、先に指定されたリンク領域が優先されます。画像サイズとマップサイズは合わせるマップのサイズは画像(<img>)のサイズと対応している必要があります。画像のサイズを250pxにした場合、マップも250pxに収まるサイズにしておくべきです。レスポンシブ対応するためにはJavaScriptを利用する近年ではイメージマップはあまり使われません。その理由の1つは、マップの大きさをレスポンシブに変えるのが難しいためです。レスポンシブにするためには、JavaScriptでareaタグの値を書き換える必要があります(既存のライブラリを利用するのが良いでしょう)。HTMLとCSSだけではレスポンシブにできないマップ上のリンクの座標やサイズは%ではなくpxで指定されます。ccords="~">の値)もあわせて変える必要が出てきます。これをHTMLとCSSだけで実現することはできません。