HTML - area 要素

概要

名前
area
カテゴリー
  • Flow content
  • Phrasing content
配置できる場所
area 要素の子孫として、Phrasing content が期待される場所。
コンテンツモデル
なし
説明
area 要素は、イメージマップ上のリンクとして反応する領域とそのリンク先などを設定する要素です。この要素は map 要素、または template 要素の内部でしか利用できません。href 属性が指定されている場合 area 要素はリンクになります。その場合、alt 属性 (リンク先を示すテキスト) も必ず指定しなければなりません。href 属性が指定されていない場合は選択できない領域となり、alt 属性も指定できません。
タグの省略
開始タグも終了タグも省略できません。
DOM Interface
HTMLAreaElement
仕様書
仕様書策定状況コメント
LS:現行の標準
REC:勧告
REC:勧告
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
1
○:Support ×:Not Support ?:未定義 n:以降の Version で Support

属性

サポートブラウザ
属性名 ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
accesskey1
alt1
coords1
download
href1
hreflang
name1
media
nohref1
rel
shape1
tabindex1
target1
type1
○:Support ×:Not Support ?:未定義 n:以降の Version で Support
グローバル属性
すべての要素で共通に利用できるグローバル属性を指定できます。
alt
画像を表示しないブラウザが代わりに表示するテキスト文字列です。テキストの内容は、代替テキストを表示しない場合に画像が提供する選択肢と同じものをユーザに与えるような表現にすべきです。HTML4 では、この属性は必須ですが空文字列でもかまいません。HTML5 では、この属性は href 属性を使用する場合にのみ必須です。
coords
ホットスポット領域の座標を指定する値のセットです。値の数と意味は shape 属性で指定した値に依存します。
  • rect: 長方形の場合は、coords の値は 2 つの x,y の組で、左、上、右、下を表します。
  • circle: 円の場合は x,y,r であり x,y は円の中心を指定する組 r は半径の値です。
  • poly: 多角形の場合は、多角形の各頂点の x,y の組のセットです。x1,y1,x2,y2,x3,y3, などのようになります。
HTML4 での値はピクセル数、またはパーセント記号を付加した場合はパーセント値です。HTML5 での値は CSS ピクセル数です。
download
download 属性がある場合は、作者はハイパーリンクをリソースのダウンロードに使用すると考えていることを示します。
href
この領域のハイパーリンクの宛先です。この値は有効な URL です。HTML4 では、この属性か nohref 属性を与えなければなりません。HTML5 では、この属性を省略できます。省略した場合 area 要素はハイパーリンクを提供しません。
hreflang
リンク先のリソースの言語を示します。この属性は href 属性を与える場合にのみ使用してください。
ping
ハイパーリンクがフォローされたときに、ブラウザからバックグラウンドで本文を PING とした POST リクエストが送信される URL を空白で区切ったリストを含めます。
rel
href 属性を含むアンカーで、この属性は対象オブジェクトとリンクオブジェクトの関係を指定します。属性値は、空白で区切られたリンク種別の値のリストです。値とそれらの意味は、ドキュメントの作者に意味づけを示す何らかの権威により登録されます。値が与えられない場合の既定の関係は、空 (void) です。この属性は href 属性を与える場合にのみ使用してください。
shape
関連づけたホットスポットの形状です。HTML5 および HTML4 の仕様では長方形の領域を定義する値 rect、円形の領域を定義する値 circle、多角形を定義する値 poly、定義済みの領域以外すべての領域を示す値 default を定めています。
target
この属性は、リンク先のリソースをどこに表示するかを指定します。これは、HTML4 ではフレームの名前またはキーワードでした。HTML5 では、閲覧コンテキスト の名前またはキーワードです (例えば、タブ、ウィンドウ、インラインフレームなど)。以下のキーワードは特別な意味を持ちます
  • _self: レスポンスを現在のものと同じ HTML4 フレーム (または HTML5 の閲覧コンテキスト) に読み込みます。この値は、属性が指定されていない場合の既定値です。
  • _blank: レスポンスを新しい名前の付けられていない HTML4 ウィンドウまたは HTML5 の閲覧コンテキストに読み込みます。
  • _parent: レスポンスを現在のフレームの HTML4 フレームセットの親要素または HTML5 の現在の親閲覧コンテキストに読み込みます。親要素がない場合、このオプションは _self と同じ振る舞いをします。
  • _top: HTML4 では、レスポンスをすべて元のウィンドウに読み込み、他のフレームをすべてキャンセルします。HTML5 では、レスポンスを最上位の閲覧コンテキストに読み込みます (現在の閲覧コンテキストの祖先にあたり、それ以上親のない要素です)。親要素がない場合、このオプションは _self と同じ振る舞いをします。

非推奨の属性

以下の属性は非推奨、非標準、実験的、または廃止された属性のため、使用しないでください。

accesskey
非推奨。新しいウェブサイトでは使用しないでください。
name
非推奨。新しいウェブサイトでは使用しないでください。
nohref
非推奨。新しいウェブサイトでは使用しないでください。
tabindex
非推奨。新しいウェブサイトでは使用しないでください。
type
非推奨。新しいウェブサイトでは使用しないでください。

サンプルコード

area 要素のサンプルコードは以下のとおりです。

<map name="primary">
  <area shape="circle" coords="75,75,75" href="left.html" alt="Click to go Left">
  <area shape="circle" coords="275,75,75" href="right.html" alt="Click to go Right">
</map>
<img usemap="#primary" src="https://example.com/350x150" alt="350 x 150 pic">
area 要素のサンプルコード

関連記事

HTML の全般的な記事はHTML タグの基本と使い方を参照してください。

Category:
プログラミング
公開日:
更新日:
Pageviews:
14
Shares:
0
Tag:
HTML
hatebu icon
hatebu