areaタグとは?|イメージマップのリンク領域を設定する

areaタグとは?|イメージマップのリンク領域を設定する
博士
前回はイメージマップの作り方をざっくりと解説したが、今回はイメージマップのリンク領域の設定について詳しく解説するぞ。
リンゴ
よろしくお願いします!
 
 
リンゴ
リンゴ
ブログを書くことが大好きな少年。
世界にたった一つのWordPressテーマを作るため、HTML/CSSについて日々勉強中!
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<area>タグとは

 

<area>

対応ブラウザInternet Explorer / Firefox / Google Chrome / Safari / Opera
分類フロー・コンテンツ / フレージング・コンテンツ
利用場所map要素内で、フレージング・コンテンツが期待される場所
内容


 
 
<area>タグは、イメージマップ上のリンク領域を設定する際に使用します。

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

shape属性

リンク領域の形は、shape属性で指定します。
指定できる値は以下の通りです。
 

default全体(coords属性は指定不可)
rect四角形
poly多角形(三角形以上)
circle円(正円のみ指定可能、楕円は指定不可)

 
 
この属性が省略されたときは、rectが指定されたものとみなされます。
 
 

スポンサーリンク

coords属性

coords属性でリンク領域の座標を指定します。

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

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

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

 
 
また、shape属性の値にdefaultを指定した場合は、coords属性は指定できません。
この場合、画像全体がリンク領域となります。
 
 

href属性

href属性でリンク先のURLを指定します。
href属性を指定する場合は、alt属性が必須となりますので注意しましょう。

href属性が指定されていないarea要素は、リンクの無効領域を表します。
他のhref属性を指定したarea要素と組み合わせることで、例えば、四角形から円形を切り抜くなど、より複雑な形のリンク領域を指定することができます。
href属性を指定しない場合は、alt属性も省略しなくてはいけません。
 
 

スポンサーリンク

alt属性

リンク領域がどのような領域であるのかを表すテキストを指定します。
img要素のalt属性と同様に、画像を表示できないユーザーにも、画像を想像してリンク領域を選択できるような文章を入れましょう。
 
 

rel属性 / target属性

area要素には、a要素link要素と同様に、rel属性やtarget属性を指定することができます。
 
 

rel属性

関連付けるファイルが、現在の文書から見てどのような関係であるのかを、既定のキーワード「リンクタイプ」で指定します。
rel属性は、link要素、a要素、area要素に指定できますが、要素によっては指定できるリンクタイプが異なります。
また、リンクタイプごとに、href属性で参照できるファイルの性質が決められています。

キーワードは以下の表を参考にしてみてください。

 リンクタイプ link a / area 説明
alternate現在の文書の代替文書
author著者
bookmark×パーマリンク
helpヘルプ
icon×文書のアイコン
license現在の文書の著作権を示した文書
next一連の文書中の次の文書
nofollow×リンク先を保証しない
noreferrer×リファラー禁止
prefetchプリ・フェッチ
prev一連の文書中の前の文書
serch現在の文書やそれに関連する文書を検索するためのページ
stylesheet×スタイルシートの読み込み
tag現在の文書に適用されるタグ

○…ハイパーリンク(移動して閲覧するような別の文書へのリンク)
☆…外部リソース(現在の文書を補強するような文書へのリンク)
×…利用不可
 
 

target属性

target属性を指定すると、リンク先をどのように開くかを指定できます。
指定できる値は以下の通りです。
 

_blank新規のウィンドウ(フレーム)に表示
_self現在のウィンドウ(フレーム)に表示
_parent現在のウィンドウ(フレーム)に親があれば、その親ウィンドウ(フレーム)に表示
_topフレームを解除してウィンドウ全体に表示
ターゲット名任意の名前を付けたウィンドウ(フレーム)で表示

 
 

スポンサーリンク

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

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

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

  3. map要素にname属性を追加して、任意のマップ名を指定する。
  4.  
     

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

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

 
 

表示例

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

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

まとめ

<area>タグは、イメージマップ上のリンク領域を設定する際に使用するタグです。
イメージマップは、<img>タグ、<map>タグ、<area>タグを使って作成します。
 
 

博士
使い方をマスターすれば、さまざまな形のリンクが作れるぞ。
 
 
HTML5 タグ図鑑

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

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








areaタグとは?|イメージマップのリンク領域を設定する