HTML辞典 map要素、area要素の解説

ギフト・ポイントGet!
HTML辞典 HTML辞典
この記事は約10分で読めます。

クリッカブルマップ(イメージマップ)を作成する<map>タグ、クリッカブルマップにおけるホットスポット領域を指定する<area>タグの使用方法を掲載。

HTML5

スポンサーリンク

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera

カテゴリー・コンテンツモデル

要素 カテゴリー コンテンツモデル
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(コーディネート)

リンクする領域の座標を指定します。座標は1つの点につき、x軸、Y軸の座標のセットで表します。指定すべき座標の数は以下のように、shape属性の値に従います。座標の基点は画像の左上隅です。

shape属性値coords属性に指定する値の数
circle3つ(中心点の座標,中心点のY座標,半径)
default属性値の指定は不可
poly6つ以上の偶数個の整数(左隅から)(X1,Y1,X2,Y2,X3,Y3,・・・Xm,Yn)
rect4つの整数(領域左上の座標,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要素の使用方法

ここでは、クリッカブルマップを作成しています。三重県、奈良県、大阪府、和歌山県の1枚の画像を準備し、areaタグで座標を指定して、領域を生成しています。大阪、奈良、三重は四角で囲む必要があるため、shape属性はrectを指定します。和歌山は多角形になるため、shape属性は、polyを使用します。座標の開始は、画像の左隅を0px,0pxが基点となり指定していきます。

areaタグで領域とリンク先を指定することで、それぞれの領域ごとに遷移するURLを変化させることができます。地図的な用途で使用することができます。

map要素の解説図
<!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 実行サンプル

基本的なサンプル map要素、area要素のchrome実行サンプル

Firefox 実行サンプル

基本的なサンプル map要素、area要素のfirefox実行サンプル

edge 実行サンプル

基本的なサンプル map要素、area要素のedge実行サンプル

opera 実行サンプル

基本的なサンプル map要素、area要素のopera実行サンプル

コメント

タイトルとURLをコピーしました