areaの使い方についてまとめ

areaの概要

HTMLタグでひとつの画像に複数のリンクを設定することを、クライアントサイドイメージマップと言い、クライアントサイドイメージマップでは、マップ全体をタグで定義し、 ～間にタグでリンク領域とそのリンク先を指定します。 また、タグでマップを適用する画像とその画像が使用するマップ名を指定します。

areaのカテゴリー

コンテンツカテゴリー

    コンテンツモデル

    • コンテンツモデルなし

areaに入れられるタグ一覧

タグ早見表

なし（空要素）

入れられるタグのカテゴリー・モデル

  • コンテンツカテゴリなし
  • コンテンツモデルなし

areaに使える属性

属性とは<area> タグ内に入れることのできるものです。属性をあてはめることにより、CSS・JavaScriptなどで操作する際に識別させることが可能になります。

よく使うグローバル属性

id 概要 要素に対してID固有の識別名を付けることができます。
属性の値 英字から始まる英数字
class 概要 要素に対して分類名を付けることができます。
属性の値 英字から始まる英数字
style 概要 要素に対して直接スタイルを指定することができます。
属性の値 スタイルシートのコード
グローバル属性一覧はこちら

areaで使うその他属性

alt 概要 画像が表示されない際に表示する文字列を指定できます。
属性の値 文字列
coords 概要 リンクの領域の座標を指定できます。
属性の値 auto,high,low
download 概要 リンクにファイルのリソースのダウンロードに使用する際に指定します。
属性の値 ダウンロード先のパス
href 概要 領域をクリックした際のリンク先を指定できます。。
属性の値 URL
hreflang 概要 リンク先の言語を指定できます。。
属性の値 ja、enなど
ping 概要 href属性とは別に、ブラウザが呼び出すURLを指定できます。
属性の値 URL
referrerpolicy 概要 リソースにアクセスした際のリファラー送信ポリシーを指定できます。
属性の値 no-referrer、no-referrer-when-downgrade、same-origin、origin、strict-origin、origin-when-cross-origin、strict-origin-when-cross-origin、unsafe-url
rel 概要 href属性を含む要素で、リンク先との関係を指定できます。
属性の値 next, previous, parentなど
shape 概要 関連付けたホットスポットの形状を指定できます。
属性の値 rect, poly
target 概要 表示ターゲットとするウィンドウを指定できます。
属性の値 _self, _blank, _parent, _top

スポンサードサーチ

<area>の使い方

ブラウザ対応状況

ブラウザの対応（PC)
Chrome あり
Safari あり
Internet Explorer あり
Edge あり
Firefox あり
Opera あり
ブラウザの対応（SP)
Chrome あり
Safari あり
Samsung Internet あり