新着！ 44ページの電子書籍「CSS in 44 minutes」が発売されました！ 😃

今すぐ入手 →

# area

map 内のインタラクティブな領域を定義します。

例: コピー

<img src="/images/world-continents.png" width="320" height="160" orgwidth="320" orgheight="160" usemap="#world-continents">
<map name="world-continents">
  <area title="North America" href="https://en.wikipedia.org/wiki/North_America" shape="poly" coords="48,89,67,69,77,49,140,0,68,0,6,10,4,31,16,69">
  <area title="South America" href="https://en.wikipedia.org/wiki/South_America" shape="poly" coords="48,88,61,74,119,99,95,160,66,159">
  <area title="Europe" href="https://en.wikipedia.org/wiki/Europe" shape="poly" coords="124,49,145,46,158,50,187,43,198,6,146,1,115,21">
  <area title="Africa" href="https://en.wikipedia.org/wiki/Africa" shape="poly" coords="121,53,140,47,169,51,186,77,196,80,188,137,156,136,138,97,118,86">
  <area title="Asia" href="https://en.wikipedia.org/wiki/Asia" shape="poly" coords="166,50,184,77,201,74,215,91,258,108,263,87,283,74,297,8,192,3,191,29,187,46,170,42">
  <area title="Australia" href="https://en.wikipedia.org/wiki/Australia_(continent)" shape="poly" coords="257,107,263,85,314,89,316,137,294,151,249,132,248,114">
</map>

title

領域のタイトルを定義します。

「北アメリカ」

タイトルは、領域にホバーしたときに表示されます。

shape

領域の形状を定義します。

「rect」

形状は長方形で、4つの座標が必要です。

「circle」

形状は円で、2つの座標と1つの半径が必要です。

「polygon」

形状は、無制限の点を持つ多角形です。

coords

形状に関連する座標を定義します。

"116,104,234,154"

rect には、2つのペア x1,y1,x2,y2 が必要です。最初のペアは**左上**の隅を、2番目のペアは**右下**の隅を定義します。

"50,80,20"

circle には、ペアと半径 x,y,r が必要です。ペアは円の**中心**を定義します。

"198,374,243,303,428,387,361,624,296,624"

polygon には、x,y ペアのコレクションが必要です。

href

領域のターゲットを定義します。

「https://htmlreference.dokyumento.jp」

**絶対** URLを渡すことができます。

「/element/div」

ルートドメインを**基準**とした相対URLを渡すことができます。

「mailto:[email protected]」

mailto プロトコルを使用できます。領域をクリックすると、ユーザーのメールクライアントが開きます。

target

クリックされた領域がどのタブまたはウィンドウに表示されるかを定義します。

「_blank」

通常は**新しいタブ**である新しいブラウジングコンテキストで開きます。

「_self」

現在のタブで開きます。

「_parent」

親ブラウジングコンテキストで開きます。ない場合は_selfになります。

「_top」

最上位のブラウジングコンテキストで開きます。ない場合は_selfになります。