【mapタグ】イメージマップでクリック別のリンクを作ろう!「HTML・解説・初心者向け」- ノブレコ

2022年12月11日 2022年10月31日

nobreco

★<map>タグの特徴

・タグのカテゴリ ―― インライン要素。

・コンテンツモデル ―― フローコンテンツ・フレージングコンテンツ・パルパブルコンテンツ。

・タグの省略 ―― 不可。（開始タグと終了タグが必要）

・使用可能な親要素 ―― フレージングコンテンツを許容するすべての親要素。

・グローバル属性を持つ。

・ARIAロール ―― 標準でのARIAロール無し。

<map>の説明

<map>とは

いわゆる地図を思い浮かべると分かりやすいですが、この<map>タグは、その地図を自分で想像して思い描く「イメージマップまたはテクスチャマップ」を示すためのタグです。

この要素は、一つの画像の中に、別々のクリック対象をリンクとして割り当てることができます。

■使用目的

主に画像の中のオブジェクトに、リンクを作成したい場合などに使う。

オブジェクトに四角、三角、丸などの図形の形をした領域を重ねることで、そのオブジェクトがリンク機能を持てるようになります。なお図形以外の背景などにもリンクを割り当てることもできます。

例えば、写真の中のコーヒーカップをクリックしたとしましょう、そのコーヒーカップの画像がイメージマップになっている場合は、そこからリンクで他のリソース情報を直接提示することができるなどがあります。

<map>要素だけでは、イメージマップの領域は作れませんので、<area>要素も併用して使うことが多いです。また画像が必要なときなどは<img>要素も必要なので、覚えておくと良いでしょう。

■使われる属性

・name

使用上の注意点

① 古典的なブラウザでは一部リンクしない場合がある。

ブラウザが古い場合は、四角や三角といった領域以外の、つまり背景のリンクが機能しない場合があります。

② イメージマップの画像がレスポンシブ化されている場合

最適化された画像は、ブラウザの環境に合わせた画像サイズで表示することが可能ですが、反対に、指定したイメージマップのリンク領域は最適化されていないことになります。ここでレスポンシブをした画像と、していないイメージマップとで差異が生じるため、オブジェクトとリンク位置が一致しないことがあります。解決するにはスクリプトを使用しなければなりません。

③ <map>属性に使うid属性について

name属性で指定した値と、id属性の値は一致したものを使わなければならない。

name属性の値は、他にも<img>要素や<object>要素で使うusemap属性の値と一致させることで、イメージマップと画像を紐づけるためにも必要なルールです。

④ a要素にshape属性、coords属性を入れて使用することは廃止されています。

HTML5から、そもそもa要素は必要gあ無くなり、area要素だけで記述することができるようになっています。

内容モデル

<map>要素は「transparent」です。

トランスペアレントは、親要素のコンテンツモデルの引き継ぎをするモデルです。親要素によっては<map>要素を入れることができません。

基本的には、<area>要素と併用して用いることが多いですが、必要であれば他の要素も子要素として入れて使うこともできます。

アクセシビリティでの注意点

<map>要素は、標準でのARIAロールを持っていません。

リンク付きイメージマップはユーザーの視覚情報に大きく頼っているため、ブラウザのスクリーンが見えない、また利用できないなどの状況での使用は難しいことに注意が必要です。

上記のように画像が表示されなければ、リンク内容を把握するのは難しいですよね、もしも画像表示がされない場合などの対処法として、<area>要素にalt属性を指定することで、適切なリンクテキストを記述しておくことができます。これにより、画像が無い場合でもリンク内容が伝わりやすく利用されやすい状態にできます。

こういった問題もあることから、ナビゲーション部分などの重要な部分にリンクを使用する場合には、イメージマップだけでなくa要素も使って記述することを検討してください。