mapタグとは?|イメージマップを作成しよう

mapタグとは?|イメージマップを作成しよう
リンゴ
博士、イメージマップって簡単に作れるんですか?
画像の特定の位置にリンクを設置したいんですが…
博士
イメージマップは3種類のタグを使って簡単に作成することができるぞ。
今回はイメージマップの作成に必要なタグの一つ、<map>タグについて解説しよう。
 
 
リンゴ
リンゴ
ブログを書くことが大好きな少年。
世界にたった一つのWordPressテーマを作るため、HTML/CSSについて日々勉強中!
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<map>タグとは

 

<map>

対応ブラウザInternet Explorer / Firefox / Google Chrome / Safari / Opera
分類フロー・コンテンツ / フレージング・コンテンツ / パルパブル・コンテンツ
利用場所フレージング・コンテンツが期待される場所
内容トランスペアレント


 
 
<map>タグは、イメージマップを作成する際に使用します。
イメージマップとは、画像の特定の領域にリンクを設定することができる機能です。
イメージマップを利用することで、四角形・円形・多角形などさまざまな形のリンクを画像の上に設定することができます。

一般的には、一枚の画像に複数のリンクを設定する場合によく利用されます。

イメージマップを作成するには、map要素の中に子要素としてarea要素を配置します。
area要素のshape属性でリンク領域の形を、coords属性でリンク領域の座標を、href属性でリンク先URLを指定します。
 
 

name属性

map要素のname属性でイメージマップに名前を付けます。
map要素のname属性の値と、img要素のusemap属性の値を同じにすることで、画像とイメージマップを関連付けます。
 
 

博士
name属性の値にはスペースを含めないよう注意しよう。
 
 

スポンサーリンク

イメージマップ作成の流れ

イメージマップは、画像を埋め込むimg要素、マップを定義するmap要素、リンク領域を設定するarea要素を使って作成します。
 
 

  1. イメージマップに使用する画像を用意し、img要素で埋め込む。
  2.  
     

  3. map要素にname属性を追加して、任意のマップ名を指定する。
  4.  
    博士
    他のマップ名と重複しないように注意しよう。
     
     

  5. img要素にusemap属性を追加して、手順2で指定したマップ名を#(ハッシュ)に続けて記述する。
  6.  
     

  7. map要素の中にarea要素を配置して、リンク領域の設定をする。

 
 

area要素 coords属性の指定方法

area要素のcoords属性の指定方法は下図を参考にしてください。

イメージマップ area要素coords属性の指定方法

指定方法は、shape属性で指定した形によって下記のように異なりますが、いずれも画像の端からの位置をピクセル単位で指定し、各座標はカンマ(,)で区切ります。
 

  • rectの場合
    左上のX座標,左上のY座標,右下のX座標,右下のY座標
  • circleの場合
    中心のX座標,中心のY座標,半径
  • polyの場合
    すべての角の座標を「X座標,Y座標」のセットで順番に指定する。
    最低でも3組の座標(6つの整数)が必要。

 
 

表示例

イメージマップのサンプル

WordPress 使い方マニュアルYouTube 使い方マニュアルニコニコ動画 使い方マニュアル
 
 

まとめ

<map>タグは、イメージマップを作成する際に使用するタグです。
イメージマップは、<img>タグ、<map>タグ、<area>タグを使って作成します。
 
 

博士
次回は、イメージマップのリンク領域の設定方法を詳しく解説するぞ。
 
 
HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








mapタグとは?|イメージマップを作成しよう