ホーム > HTML > html area「画像にリンク領域指定」

html area「画像にリンク領域指定」

HTML area「画像にリンク領域指定」 | wepicks!
HTML4 HTML5

<area>

書式
<area 属性="属性値">

サンプル
<map name="clickablemap">
<area shape="circle" coords="50,76,38" href="https://wepicks.net/">
</map>

<area>タグ（<area>要素）は <map>タグ と組合わせて使用し、画像（＝イメージマップやクリッカブルマップ）内にリンク情報を指定します。

HTML area タグ（Tag）

<area>

種別インライン要素カテゴリフローコンテンツ、フレージングコンテンツ
開始タグ必須終了タグなし

サポート

ChromeVer1.0～FirefoxVer1.0～
SafariVer1.0～OperaVer6.0～
Internet ExplorerVer2.0～HTMLVer3.0～

内容

<map>タグ（<map>要素） によって、画像をリンク領域が複数指定できるクリッカブルマップ（イメージマップ）として指定できます。そのクリッカブルマップ内のリンク情報を指定するのが、<area>タグ（<area>要素）です。<area>タグ を複数指定すれば、複数のリンク情報を設定することが出来ます。クリッカブルマップ内のリンク領域が重なった場合、先に記述した<area>内容が優先されます。<area>タグ は、常に <map>タグ の内側に記述します。

<area>タグ の shape属性 で circle（丸）、rect（四角）、poly（多角形）などの形状を指定し、coords属性 で形状に則した座標を指定します。

クリッカブルマップとして使用する画像を <img>タグ で指定しますが、<img>タグ の usemap属性 でマップの名前（usermap="#名前"）を指定します。指定した名前は <map>タグ の name属性 で指定（name="名前"）して関連付けます。

クリッカブルマップには、サーバーサイドクリッカブルマップとクライアントサイドクリッカブルマップがあります。<map>タグ では、クライアントサイドクリッカブルマップを実装します。

サンプルコード

– サンプル Click Here ! –

  • html tag
  • ブラウザ表示
  • html code

属性

主要属性

属性タグ（要素）値について
alt<applet> <area> <img> <input>画像代替テキスト
画像の代替テキストを指定します。画像が表示されない場合に表示されます。
書式
<タグ名 alt="値">
値の例
猫の写真
coords<area>領域の座標
クリッカブルマップのリンク領域の形状座標を指定します。
  • shape属性 が rect（四角）：左上の座標 "x1,y1"、右下の座標 "x2,y2" と "x1,y1,x2,y2" のように指定します。
  • shape属性 が circle（丸）：中心の座標 "x,y" 、半径を "r" と "x,y,r" のように指定します。
  • shape属性 が poly（多角形）：各座標を "x1,y1,x2,y2,x3,y3" と指定します。
書式
<タグ名 coords="値">
値の例
circle
default
poly
rect
download<a>
<area>		ダウンロードファイル名
リンク先のデータがファイルのダウンロードであることを指定します。
書式
<タグ名 download="値">
<タグ名 download>
値の例
ファイル名
href<a>
<area>
<base>
<link>		URI（URL・URN）
クリックした先のURLを指定します。mailto:メールアドレス、tel:電話番号などの指定も可能です。
書式
<タグ名 href="値">
値の例
URL
mailto:info@wepicks.net
telto:09012345678
hreflang<a>
<area>
<link>		言語コード
リンク先文書の基本言語を指定します。en（英語）、ja（日本語）、zh（中国語）など
書式
<タグ名 hreflang="値">
値の例
ja
en
media<a>
<area>
<link>
<source>
<style>		メディアやデバイス
リンク先文書のメディア／デバイスを指定します。
  • all（全てのデバイス）
  • aural（音声合成装置）
  • braille（点字出力機器）
  • handheld（スマートフォンや携帯電話など）
  • print（プリンタへの出力
  • 印刷プレビュー画面への出力）
  • projection（プロジェクタ機器）
  • screen（コンピューターのスクリーン）
  • tty（テレタイプ）
  • tv（テレビ）
書式
<タグ名 media="値">
値の例
all
aural
braille
handheld
print
projection
screen
tty
tv
nohref<area>nohref か 空
※HTML5では無効
このリンク領域にはハイパーリンクが無いことを明示します。
書式
<area nohref="nohref">
<area nohref>
値の例
nohref
rel<a>
<area>
<link>		リンクタイプ
現在の文書（リンク元）とリンク先文書（相手）の関係性を指定します。alternate（リンク先→代替文書）、
  • author（リンク先→著作者に関する文書）
  • bookmark（リンク先→著作者に関する文書）
  • help（リンク先→ヘルプ文書）
  • icon（リンク先→アイコン情報）
  • license（リンク先→ライセンスに関する文書）
  • next（リンク先→この文書の次の文書）
  • nofollow（リンク先→関連性の低い文書）
  • noreferrer（リンク先→HTTPリファラを送信しない文書）
  • prefetch（リンク先→事前にキャッシュする文書）
  • prev（リンク先→この文書の前の文書）
  • search（リンク先→検索機能を実装した文書）
  • stylesheet（リンク先→スタイルシート）
  • tag（リンク先→この文書で使用しているタグ）
書式
<タグ名 rel="値">
値の例
alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
shape<a>
<area>		リンク形状
※HTML5では無効
イメージマップ（画像マップ）用のリンク領域の形状を指定します。
  • shape属性 が rect（四角）：左上の座標 "x1,y1"、右下の座標 "x2,y2" と "x1,y1,x2,y2" のように指定します。
  • shape属性 が circle（丸）：中心の座標 "x,y" 、半径を "r" と "x,y,r" のように指定します。
  • shape属性 が poly（多角形）：各座標を "x1,y1,x2,y2,x3,y3" と指定します。
書式
<タグ名 shape="値">
値の例
circle
default
poly
rect
target<a>
<area>
<base>
<form>		フレーム名
リンク先文書を開く場所（ウィンドウ）を指定します。
書式
<タグ名 target="値">
値の例
_blank
_parent
_self
_top
framename
type<a>
<area>
<link>		MIMEタイプ
※HTML5では無効
リンク先文書のMIMEタイプを指定します。
  • text/plain（プレーンテキスト）
  • text/html（HTML文書）
  • text/css（スタイルシート）
  • text/javascript（JavaScript）
  • image/gif（GIF画像）
  • image/png（PNG画像）
  • image/jpeg（JPEG画像）
  • image/bmp（BMP画像）
  • image/webp（WebP画像）
  • audio/midi（midi音声データ）
  • audio/mpeg（mpeg音声データ）
  • audio/webm（webm音声データ）
  • audio/ogg（ogg音声データ）
  • audio/wav（wav音声データ）
  • application/octet-stream（バイナリデータ）
  • application/xml（エクセルファイル）
  • application/pdf（PDFファイル）
  • video/webm（動画データ）
  • video/ogg（動画データ）
書式
<タグ名 type="値">
値の例
text/plain
text/html
text/css
text/javascript
image/gif
image/png
image/jpeg
image/bmp
image/webp
audio/midi
audio/mpeg
audio/webm
audio/ogg
audio/wav
application/octet-stream
application/pkcs12
application/vnd.mspowerpoint
application/xhtml+xml
application/xml
application/pdf
video/webm
video/ogg

グローバル属性

グローバル属性はすべての タグ（要素）で使用可能な属性です。

属性タグ（要素）値について
accesskeyグローバル属性任意の半角英数字1文字
※大文字小文字区別
要素にアクセスキー（ショートカットキー）を割り当て、キーボード操作でアクティベート、または、フォーカスできるようにする。
書式
<タグ名 accesskey="値">
値の例
半角英数字
autocapitalizeグローバル属性入力文字列の先頭大文字化
ユーザーによって入力／編集されたとき、入力文字列が自動的に大文字化されるかどうか、どのように行われるかを制御します。
書式
<タグ名 autocapitalize="値">
値の例
off／none
on／sentences
words
characters
classグローバル属性クラス名
要素にクラス名を指定します。半角スペースで区切ることで複数のクラス名を指定できます。
書式
<タグ名 class="値">
値の例
クラス名
contentEditableグローバル属性編集の 可・不可
要素の内容の編集が 可・不可 であるかを指定します。
書式
<タグ名 contentEditable="値">
値の例
true
false
contextmenuグローバル属性コンテクストメニュー
menu要素のid属性の値
要素のコンテキストメニューを指定します。コンテキストメニューとして機能する menu要素 の ID を指定する属性です。
書式
<タグ名 contextmenu="値">
値の例
data-*グローバル属性カスタムデータ属性
HTML要素にカスタム属性が添付し、要素にオリジナル拡張データを格納するための指定です。
書式
<タグ名 data-*="値">
値の例
dirグローバル属性テキストの方向性
要素内テキストの文字方向を指定します。指定できる値は ltr (Left-To-Right) または rtl (Right-To-Left) です。
書式
<タグ名 dir="値">
値の例
ltr
rtl
auto
draggableグローバル属性ドラックの 可・不可
要素のドラックを 可・不可 であるかを指定します。
書式
<タグ名 draggable="値">
値の例
true
false
dropzoneグローバル属性種類と処理方法
要素をドロップ可能な領域として指定し、ドロップ時に種類としてファイル(file:)、テキスト(string:)、処理としてコピー(copy)、移動(move)、リンク(link)などを指定します。
書式
<タグ名 dropzone="値">
値の例
string:copy
string:move
string:link
file:copy
file:move
file:link
hiddenグローバル属性要素非表示
要素を非表示に指定します。
書式
<タグ名 hidden="hidden">
<タグ名 hidden="">
<タグ名 hidden>
値の例
hidden
""
idグローバル属性id名
要素にid名を指定します。クラス名とは異なりid名の値はドキュメント中で一意の固有名とします。
特定の要素へスタイルを設定するために CSS と共によく使われます。この属性の値は一位でなければなりません。
書式
<タグ名 id="値">
値の例
id名
itemidグローバル属性id名
要素に HTML Microdata（構造化データ）のアイテム（処理項目）の範囲が指定された場合に、itemtype属性 でデータの種類を指定しますが、さらに詳細の識別子がある場合、itemid属性 で指定します。
※HTML文書に構造化データとしての意味を持たせる属性群の1つです。item関連の属性を付与された要素では、Microdata として処理が可能で、他の言語などから抽出などの処理が可能になります。
書式
<タグ名 itemid="値">
値の例
id名
itemrefグローバル属性itemref名
要素に HTML Microdata（構造化データ）のアイテム（処理項目）の範囲が指定された場合に、その範囲外との関連付けを指定します。通常は、itemscope属性 で指定した範囲内が対象となりますが、itemscope属性 で指定した範囲外で関連性のあるデータがある場合、itemref属性 で関連付けます。
※HTML文書に構造化データとしての意味を持たせる属性群の1つです。item関連の属性を付与された要素では、Microdata として処理が可能で、他の言語などから抽出などの処理が可能になります。
書式
<タグ名 itemref="値">
値の例
itemref名
itemscopeグローバル属性itemscope
要素に HTML Microdata（構造化データ）のアイテム（処理項目）の範囲を示します。要素に itemscope属性 が指定されている場合、ここから Microdata を扱うという宣言にもなります。
※HTML文書に構造化データとしての意味を持たせる属性群の1つです。item関連の属性を付与された要素では、Microdata として処理が可能で、他の言語などから抽出などの処理が可能になります。
書式
<タグ名 itemscope="itemscope">
<タグ名 itemscope>
値の例
itemscope
itemtypeグローバル属性itemtypeの種類
要素に HTML Microdata（構造化データ）のアイテム（処理項目）の種類を示します。itemscope属性 で Microdata（構造化データ） の範囲を指定した場合に、データの種類を指定します。
※HTML文書に構造化データとしての意味を持たせる属性群の1つです。item関連の属性を付与された要素では、Microdata として処理が可能で、他の言語などから抽出などの処理が可能になります。
書式
<タグ名 itemtype="値">
値の例
https://schema.org/Person
http://schema.org/WebPage
itempropグローバル属性itemprop名
要素に HTML Microdata（構造化データ）のアイテム（処理項目）のプロパティを指定します。itemscope属性 で Microdata（構造化データ） の範囲を指定した場合に、範囲内のデータのプロパティを指定します。プロパティにより、範囲内の各要素の詳細データ内容が識別できます。プロパティの意味は、 itemscope属性 と同時に指定してある itemtype属性 で指定した内容によって判断されます。
※HTML文書に構造化データとしての意味を持たせる属性群の1つです。item関連の属性を付与された要素では、Microdata として処理が可能で、他の言語などから抽出などの処理が可能になります。
書式
<タグ名 itemprop="値">
値の例
itemprop名
langグローバル属性言語コード
HTMLドキュメントや要素の言語を指定します。en（英語）、ja（日本語）、zh（中国語）など
書式
<タグ名 lang="値">
値の例
en
ja
nonceグローバル属性ワンタイムトークン（base64-value）
HTMLドキュメント内のスクリプトの実行の有無を指定します。コンテンツセキュリティポリシーCSP（Content Security Policy）に則ります。クロスサイトスクリプティング（XSS）などの攻撃からWebサイトを保護する仕組みの一環です。
書式
<タグ名 nonce="値">
値の例
YmFzZTY0LXZhbHVl
slotグローバル属性割り当て名
要素に影のDOMを追加します。通常のDOMの裏に別のDOMを隠すことが出来ます。
書式
<タグ名 slot="値">
値の例
slot割り当て名
spellcheckグローバル属性スペルチェックの有・無
要素の内容のスペルチェックの有無を指定します。
書式
<タグ名 spellcheck="値">
値の例
true
false
styleグローバル属性プロパティと値でスタイルを指定
要素にスタイルを指定します。CSSプロパティとその値を指定します。「 ; （セミコロン）」で区切って複数のスタイルを記述することが出来ます。
書式
<タグ名 style="プロパティ:値;">
値の例
width:100%; margin:10px;
tabindexグローバル属性順序を指定する + - 整数値
Tabキーが押された時、要素がフォーカスさせる優先順位を指定します。ブラウザの設定より優先されます。
書式
<タグ名 tabindex="値">
値の例
+ - 整数値
titleグローバル属性テキストで要素の補足説明
要素の補足情報を指定します。PC ブラウザーでは、マウスオーバー時にツールチップとしてその属性値が表示されます。
書式
<タグ名 title="値">
値の例
補足情報
translateグローバル属性翻訳の有・無
要素の翻訳の有無を指定します。
書式
<タグ名 translate="値">
値の例
yes
no

タグ（＝記事関連ワード）

タグ: ,

日付

投稿日：2018年7月3日
最終更新日：2018年11月09日
このページのトップへ

このカテゴリの他のページ

この記事へのコメント

トラックバックurl

https://wepicks.net/htmltag-area/trackback/
このページのトップへ

page top