A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developer.cdn.mozilla.net/ja/docs/Web/HTML/Reference/Elements/area below:

<area>: ã‚¤ãƒ¡ãƒ¼ã‚¸ãƒžãƒƒãƒ—é ˜åŸŸè¦ç´ - HTML

<area>: イメージマップ領域要素

Baseline Widely available *

<area> は HTML の要素で、イメージマップの中でクリック可能な領域をあらかじめ定義します。イメージマップでは、画像上の幾何学的な領域をハイパーテキストリンクと関連付けすることができます。

この要素は <map> 要素内だけで使用します。

試してみましょう 
<map name="infographic">
  <area
    shape="poly"
    coords="129,0,260,95,129,138"
    href="https://developer.mozilla.org/docs/Web/HTTP"
    alt="HTTP" />
  <area
    shape="poly"
    coords="260,96,209,249,130,138"
    href="https://developer.mozilla.org/docs/Web/HTML"
    alt="HTML" />
  <area
    shape="poly"
    coords="209,249,49,249,130,139"
    href="https://developer.mozilla.org/docs/Web/JavaScript"
    alt="JavaScript" />
  <area
    shape="poly"
    coords="48,249,0,96,129,138"
    href="https://developer.mozilla.org/docs/Web/API"
    alt="Web APIs" />
  <area
    shape="poly"
    coords="0,95,128,0,128,137"
    href="https://developer.mozilla.org/docs/Web/CSS"
    alt="CSS" />
</map>
<img
  usemap="#infographic"
  src="/shared-assets/images/examples/mdn-info.png"
  alt="MDN インフォグラフィック" />

img {
  display: block;
  margin: 0 auto;
  width: 260px;
  height: 260px;
}
属性

この要素にはグローバル属性があります。

alt

画像を表示しないブラウザーが代わりに表示するテキスト文字列です。 テキストの内容は、代替テキストを表示しない場合に画像が提供する選択肢と同じものをユーザーに与えるような表現にすべきです。 この属性は href 属性が使用されている場合のみ必要です。

coords

coords 属性は、 shape 属性の座標を寸法、形状、<area> の配置について詳述します。 この属性は shape が default に設定されていた場合は使用してはいけません。

値は CSS ピクセルの数です。

download

この属性がある場合は、作者はハイパーリンクをリソースのダウンロードに使用すると考えていることを示します。 download 属性の詳しい説明は <a> をご覧ください。

href

この領域のハイパーリンクの宛先です。 この値は有効な URL です。 この属性は省略可能です。その場合、その <area> 要素はハイパーリンクを提供しません。

ping

ハイパーリンクに進んだとき、ブラウザーから POST リクエストが本文を PING として（バックグラウンドで）送信する URL を空白で区切ったリストで記述します。 ふつうはトラッキング用に使用します。

referrerpolicy

リソースを読み込む際にどのリファラーを使用するかを示す文字列です。

rel

href 属性を含むアンカーで、この属性は、対象オブジェクトとリンクオブジェクトの関係を指定します。 属性値は、空白で区切られたリンク種別のリストです。 値とその意味は、文書作成者にとって意味を持つかもしれない何らかの権威によって登録されています。 他に何も与えられていない場合の既定の関係は void です。この属性は href 属性が存在する場合にのみ使用してください。

shape

関連づけたホットスポットの形状です。HTML の仕様書では、長方形の領域を定義する値 rect、円形の領域を定義する値 circle、多角形を定義する値 poly、定義済みの領域以外のすべての領域を示す値 default を定めています。

target

キーワードまたは作成者が定義した名前で、リンクされたリソースを表示する閲覧コンテキストです。 以下のキーワードは特別な意味を持っています。

この属性は href 属性が存在する場合にのみ使用してください。

メモ: target="_blank" を <area> 要素に設定すると、暗黙に rel に rel="noopener" を設定し、window.opener が設定されていないのと同じように動作します。対応状況はブラウザーの互換性を参照してください。

例 
<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://dummyimage.com/350x150"
  alt="350 x 150 pic" />
結果 技術的概要 仕様書 ブラウザーの互換性

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4