WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > HTMLタグ・リファレンス > HTMLタグ一覧(ABC順) > <area>「画像内の指定範囲リンク」

<area> 「画像内の指定範囲リンク」[読み方：エリア]

<area>タグは、画像内の一部分でリンクを行いたい場合などに多く利用されます。
<map>～</map>内で利用でき、<map>タグは、<img>タグにusemap属性を指定することで利用可能となります。

HTML規格HTML4.01HTML5
使用可否○○
広告

<area> の仕様

カテゴリー使用できる場所（親要素）コンテンツモデル（子要素）タグ省略
フローコンテンツ
フレージングコンテンツ		<map>内で
フレージングコンテンツを子要素にもてる場所
無終了タグ無

<area> の属性

【構文】
<area href="リンク先URI" shape="形状" alt="テキスト" coords="座標,座標,・・・">
属性意味
値のサンプルなど
href="URI"リンク先のURL、Path
【条件付必須】※下記留意事項参照
サーバ内の相対パス：「../index.html」
URL：「http://www.cman.jp」
メール：「info@example.jp」
target="値" リンク先の表示方法
値意味
_blank新規のウィンドウに表示
_self現在のウィンドウに表示
_parent親ウィンドウに表示
_top現在のウインドウに表示
（フレームは解除される）
任意ウインドウ名任意のウィンドウに表示
alt="テキスト"リンクのテキスト【条件付必須】※下記留意事項参照
-
hreflang="言語"リンク先の言語コード
※HTML5で一旦は追加されましたが、最終的に廃止されたため使用できません。
「ja」「en」
type="値"リンク先のMIMEタイプ
※HTML5で一旦は追加されましたが、最終的に廃止されたため使用できません。
「image/gif」
rel=値"リンク先のタイプ
※HTML5で追加
「help」「search」
shape="形状"リンクを型抜く形状
値意味
rect"四角形"に型抜きしリンク対象となる
circle"円形"に型抜きしリンク対象となる
poly"多角形"に型抜きしリンク対象となる
default画像全体がリンク対象となる。IEは非対応？
coords="座標"リンクを型抜く座標
<map>定義からのピクセル位置を表します。
図形下記サンプル時の値
四角形(rect)coords="20,30,160,70"
円形(circle)coords="210,105,40"
多角形(poly)coords="275,145,275,205,335,175"
download="ファイル名"リンク先のリソースのダウンロード要否指定
ファイル名の指定は、任意。
ping="値"pingを送信するURL
URL
referrerpolicy="値"リファラーポリシーを指定
リファラーポリシー
廃止された属性
  • nohref
-
グローバル属性
  • accesskey
  • autocapitalize
  • autofocus
  • class
  • contenteditable
  • dir
  • draggable
  • enterkeyhint
  • hidden
  • id
  • inert
  • inputmode
  • is
  • itemid
  • itemprop
  • itemref
  • itemscope
  • itemtype
  • lang
  • nonce
  • popover
  • slot
  • spellcheck
  • style
  • tabindex
  • title
  • translate
  • writingsuggestions
イベント属性
ページTOP

<area>タグのサンプル

画像内の範囲指定リンク
<img src="html_area_sample1.gif" usemap="#sample" alt="サンプル" width="350" height="210" border="0">

<map name="sample">
<area href="http://www.cman.jp" shape="rect" alt="四角形" coords="20,30,160,70">
<area href="http://www.cman.jp" shape="circle" alt="円形" coords="210,105,40">
<area href="http://www.cman.jp" shape="poly" alt="多角形" coords="275,145,275,205,335,175">
</map>
サンプル 四角形 円形 多角形
ページTOP

留意事項

  • <area>タグだけでは意味を成しません。<map>タグ内で<area>を指定し、<img>でusemap属性を指定することで<area>タグが有効となります。
  • href属性を指定する場合は、alt属性は必須となります。href属性を指定しない場合は、alt属性は指定できなくなります。
  • href属性を指定しない場合は、target属性、download属性、ping属性、rel属性、referrerpolicy属性は指定できません。
  • itemprop属性を指定する場合は、href属性も指定が必須となります。
  • 領域を重複して指定した場合、先に定義した領域のリンクが有効となります。
ページTOP
関連するHTMLタグ
mapイメージマップ
templateJavaScriptによって文書に挿入するHTMLの断片
関連するCSS(STYLE)
cursorカーソルの種類
displayボックスの種類
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン