クリッカブルマップ（イメージマップ）を作成する<map>タグ、クリッカブルマップにおけるホットスポット領域を指定する<area>タグの使用方法を掲載。
HTML5
対応ブラウザ
カテゴリー・コンテンツモデル
| 要素 | カテゴリー | コンテンツモデル |
|---|---|---|
| map要素 |
|
トランスペアレントコンテンツ |
| area要素 |
|
– |
グローバル属性
グローバル属性は、すべての要素に指定できる共通の属性のことです。
accesskey（アクセスキー）
要素にアクセスキーを割り当てます。いわゆるショートカットキーになります。
autocapitallze
入力／編集されたとき、入力文字列の先頭大文字化が自動的に行われるかどうかなどを指定します
| 値 | 内容 |
|---|---|
| offまたはnone | 自動的な大文字化は指定しない |
| onまたはsentences | 最初の文字を大文字化する |
| words | 各語の最初の文字を大文字化する |
| characters | すべての文字を大文字化する |
class（クラス）
要素に分類上の名前を指定します。CSSのセレクタで、特定の要素を選択できるようになります。
contenteditable（コンテント・エディタブル）
要素の内容が閲覧者による編集可能かどうか指定します。
| 値 | 内容 |
|---|---|
| trueまたは、空 | 閲覧者による編集可能。 |
| false | 閲覧者による編集不可。 |
data-
カスタムデータ属性、JavaScriptで使用するための独自の属性を指定します。「data-*****=””」のような形式で開発者が自由に指定できます。JavaScriptを利用してデータ処理したり、独自のデータを入力したりするために使用します。
dir（ディレクショナリティ）
要素の内容の書字方向（文字を書き進める方向）を指定します。
| 値 | 内容 |
|---|---|
| ltr | テキストを左から右へ書き進める。「Left to Righ」の略 |
| rtl | 要素は編集不可。「Right to Left」の略 |
| auto | ユーザーエージェントによって自動的に書字方向を決める |
draggable
Drag and Drop APIを使用して要素をドラッグすることができるか指定します。
| 値 | 内容 |
|---|---|
| テキストを左から右へ書き進める。「Left to Righ」の略 | |
| auto | ユーザーエージェントによって自動的に書字方向を決める |
hidden（ヒドゥン）
要素がその時点でのページの内容に関連がないことを表し、指定された要素は表示されません。用途としては、ページ内に表示したくないデータの値などをセットしておき、POSTなどで値を送信する場合などに使用したりします。（商品IDやユーザーID）
id（アイディー）
要素にユニークな識別IDを指定します。文章内で一意である必要があり、同じ値を複数のidに設定することはできません。CSSのセレクタで、特定の要素を選択できるようになります。また、リンクのフラグメント識別子としても利用できます。
空白文字は使用できません。
lang（ランゲージ）
要素の内容の言語を指定します。html要素や文書全体に対して指定することができます。また、一部の要素に対しても指定することができます。
例：lang=”ja”
spellcheck（スペルチェック）
要素の内容に対するスペルチェックの可否を指定します。
| true | スペルチェックをします。 |
| false | スペルチェックをしません。 |
style（スタイル）
要素に直接スタイルシートを指定します。
※style属性でスタイルを指定する方法はあまり推奨されていません。
tabindex（タブインデックス）
「TABキー」による移動順序を指定します。正の数値で指定すると、その順序にフォーカスが移動します。負の数値を指定すると選択することができますが、TABキーでの移動順序に含まれません。また、0を指定した要素は最後にフォーカスします。
title（タイトル）
要素に補足情報を加えます
translate（トランスレート）
翻訳対象にするかどうかを指定します。
| 値 | 内容 |
|---|---|
| yes | 翻訳対象とする |
| no | 翻訳非対象とする |
イベントハンドラ属性は、JavaScriptのコードを閲覧者の操作に合わせて実行する属性です。
onclick
要素をクリックしたときにスクリプトを実行します。
oninput
入力コントロールにデータを入力したときにスクリプトを実行します。
onsubmit
入力コントロールからデータを送信するときにスクリプトを実行します。
map要素 書式・概要
<img src="URL" alt="代替テキスト" usemap="#マップ名">
<map name="マップ名">
<area shape="形状" coords="座標" href="URL" alt="代替テキスト"
</map>クリッカブルマップ（イメージマップ）とは、画像の特定の領域がリンクになっているものです。map要素は、その内容がイメージマップの定義であることを示し、その定義部分に名前を付けます。map要素内で、実際にクリックに反応する領域とそのリンク先を設定するのがarea要素です。
area要素には、リンク先を示す代替テキストを必ず指定しておいてください。あとは、img要素のusemap属性で、定義したイメージマップの名前を指定すれば（名前の前には「#」を付けます）、画像がイメージマップとして機能するようになります。
area要素のcoords属性で指定する座標の指定方法は、shapre属性で指定する領域の形状によって異なります。指定方法は次の通りで、各座標はピクセル単位で「,」で区切って指定します。
使用できる属性
name
【必須】
<img>や<object>などのusemap属性の値を一致させることで、関連付けることができます。
area要素 書式・概要
<area 属性="属性値">～</area><area>は、<map>と組み合わせてホットスポット領域を設定できます。ホットスポット領域とは、イメージマップのクリック可能箇所のことです。ホットスポット領域の形状は、shape属性を使うことで、四角形、円形、多角形を指定できます。
href属性でハイパーリンク先のURLを指定します。href属性を指定しない場合は、ホットスポット同士で重なった領域を除くことも可能です。これを組み合わせることで、複雑な形状のホットスポット領域を作成することもできます。
使用できる属性
alt
href属性で関連付けられたURLに関する代替えテキストを指定します。href属性が指定された場合は必須です。ただし、同一のmap要素内に、同じURLが指定されたhref要素をもつ別のarea要素が存在し、そこに適切なalt属性が指定されている場合は省略できます。
shape（シェープ）
画像内でリンクする領域の形状を指定します。
| circle | 円形 |
| default | 全体画像 |
| poly | 多角形 |
| rect | 長方形（初期値） |
coords（コーディネート）
リンクする領域の座標を指定します。座標は１つの点につき、x軸、Y軸の座標のセットで表します。指定すべき座標の数は以下のように、shape属性の値に従います。座標の基点は画像の左上隅です。
| shape属性値 | coords属性に指定する値の数 |
|---|---|
| circle | ３つ（中心点の座標,中心点のY座標,半径） |
| default | 属性値の指定は不可 |
| poly | ６つ以上の偶数個の整数（左隅から）（X1,Y1,X2,Y2,X3,Y3,・・・Xm,Yn） |
| rect | 4つの整数（領域左上の座標,Y座標,領域右下のX座標,Y座標） |
href（ハイパー・リファレンス）
移動先をURLで指定して、area要素の領域をハイパーリンクとします。また、href属性を指定しない場合委は、この要素で指定された領域はクリックできない領域となります。この場合は、alt、target、rel、media、hreflang、typeの各属性も省略する必要があります。
target
リンクアンカーの表示先を指定します。
| _blank | リンクは新しいブラウジングコンテキストに表示 |
| _parent | リンクは現在のブラウジングコンテキストの親のブラウジングコンテキストを対象に表示 |
| _self | リンクは現在のブラウジングコンテキストに表示 |
| _top | リンクは現在のブラウジングコンテキストの最上位のブラウジングコンテキストを対象に展開されます。 |
rel（リレーション）
現在の文書からみた、リンク先となるリソースの位置づけを表します。
| icon | ブックマークしたときなどに表示されるアイコンファイルを指定 |
| canonical | 現在のHTML文書と似た内容のページのURLを正規化できる。 |
| alternate | 現在のHTML文書と似た内容のページが存在するときに使用。PCページとスマホページでURLが異なる場合などURLを一本化する。 |
| author | 著書情報 |
| bookmark | 文書の固定リンク |
| help | ヘルプへのリンク |
| license | ライセンス文書 |
| next | 連続した文章における次の文書 |
| nofollow | 重要ではないリンク |
| noreferrer | ユーザーがリンクを移動する際、リファラーを送信しません。 |
| prefetch | リンク先のリソースをあらかじめキャッシュするように指定 |
| prev | 連続した文書にける前の文書 |
| search | 検索機能 |
| tag | 文書に指定されたタグのページ |
media
リンク先の文書を読み込む外部リソースを、どのメディアに適用するのか指定します。値は妥当なメディアクエリである必要があります。
hreflang
リンク先の文書の記述言語を表します。
日本語ページから英語ページにリンクする場合など、リンク先が英語で掲載されている情報を閲覧者に伝えます。
type
リンク先のMIMEタイプを指定します。
map要素、area要素の使用方法
ここでは、クリッカブルマップを作成しています。三重県、奈良県、大阪府、和歌山県の１枚の画像を準備し、areaタグで座標を指定して、領域を生成しています。大阪、奈良、三重は四角で囲む必要があるため、shape属性はrectを指定します。和歌山は多角形になるため、shape属性は、polyを使用します。座標の開始は、画像の左隅を0px,0pxが基点となり指定していきます。
areaタグで領域とリンク先を指定することで、それぞれの領域ごとに遷移するURLを変化させることができます。地図的な用途で使用することができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>img要素 サンプルページ</title>
<meta charset="uft-8">
</head>
<body>
<figure>
<figcaption>エリアマップ</figcaption>
<map name="infographic">
<area shape="rect" coords="0,0,50,100" href="/oosaka">
<area shape="rect" coords="50,0,100,150" href="/nara" alt="奈良エリアの店舗一覧">
<area shape="rect" coords="100,0,200,200" href="/mie" alt="三重エリアの店舗一覧">
<area shape="poly" coords="0,100,50,100,50,150,100,150,100,200,0,200" href="/wakayama" alt="和歌山エリアの店舗一覧">
</map>
<img usemap="#infographic" src="map.png" alt="MDN infographic" />
</figure>
</body>
</html>chrome 実行サンプル
Firefox 実行サンプル
edge 実行サンプル
opera 実行サンプル
コメント