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

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

HTML4 HTML5

<area>

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

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

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

HTML area タグ(Tag)

<area>

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

サポート

Chrome Ver1.0~ Firefox Ver1.0~
Safari Ver1.0~ Opera Ver6.0~
Internet Explorer Ver2.0~ HTML Ver3.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年07月18日

関連記事

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

この記事へのコメント

トラックバックurl

http://wepicks.net/htmltag-area/trackback/

page top