path: root/files/ja/web/html/element/area/index.html

---
title: <area>
slug: Web/HTML/Element/area
tags:
  - Content
  - Element
  - HTML
  - 'HTML:Flow content'
  - 'HTML:Phrasing content'
  - Multimedia
  - Reference
  - Web
translation_of: Web/HTML/Element/area
---
<div>{{HTMLRef}}</div>

<p><strong>HTML の <code>&lt;area&gt;</code> 要素</strong>は、イメージマップの中でクリック可能な領域をあらかじめ定義します。<dfn>イメージマップ</dfn>では、画像上の幾何学的な領域を{{Glossary("Hyperlink", "ハイパーテキストリンク")}}と関連付けすることができます。</p>

<p>この要素は {{HTMLElement("map")}} 要素内だけで使用します。</p>

<div>{{EmbedInteractiveExample("pages/tabbed/area.html", "tabbed-taller")}}</div>

<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th>
   <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>、<a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td>
  </tr>
  <tr>
   <th scope="row">許可されている内容</th>
   <td>なし。これは{{Glossary("empty element", "空要素")}}です。</td>
  </tr>
  <tr>
   <th scope="row">タグの省略</th>
   <td>開始タグは必須。終了タグを記述してはなりません。</td>
  </tr>
  <tr>
   <th scope="row">許可されている親要素</th>
   <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素。 <code>&lt;area&gt;</code> 要素は祖先が {{HTMLElement("map")}} でなければなりませんが、直接の親要素である必要はありません。</td>
  </tr>
  <tr>
   <th scope="row">暗黙の ARIA ロール</th>
   <td>{{htmlattrxref("href", "area")}} 属性がある場合は {{ARIARole("link")}}、そうでなければ<a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td>
  </tr>
  <tr>
   <th scope="row">許可されている ARIA ロール</th>
   <td>なし</td>
  </tr>
  <tr>
   <th scope="row">DOM インターフェイス</th>
   <td>{{domxref("HTMLAreaElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Attributes" name="Attributes">属性</h2>

<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p>

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

<dl>
 <dt>{{htmlattrdef("coords")}}</dt>
 <dd><code>coords</code> 属性は <code>&lt;area&gt;</code> の寸法、形状、配置における <code><a href="#attr-shape">shape</a></code> 属性の座標を詳述します。</dd>
 <dd>
 <ul>
  <li><code>rect</code>: 値は <code><var>x1,y1,x2,y2</var></code> です。値は長方形の左上と右下の座標を指定します。<br>
   例: <code>&lt;area shape="rect" coords="0,0,253,27" href="#" target="_blank" alt="Mozilla"&gt;</code> この例では長方形の左上の隅が 0,0、右下の隅が 253,27 になります。</li>
  <li><code>circle</code>: 値は <code><var>x,y,radius</var></code> です。値は円の中央の座標と半径を指定します。<br>
   例: <code>&lt;area shape="circle" coords="130,136,60" href="#" target="_blank" alt="MDN"&gt;</code></li>
  <li><code>poly</code>: 値は <code><var>x1,y1,x2,y2,..,xn,yn</var></code> です。値は多角形の角の座標を指定します。先頭と末尾の座標が同じではない場合、ブラウザーは最後に座標を追加して多角形を閉じます。</li>
  <li><code>default</code>: 領域全体を定義します。</li>
 </ul>
 値は CSS ピクセルの数です。</dd>
 <dt>{{htmlattrdef("download")}}</dt>
 <dd>この属性がある場合は、作者はハイパーリンクをリソースのダウンロードに使用すると考えていることを示します。{{htmlattrxref("download", "a")}} 属性の詳しい説明は {{HTMLElement("a")}} をご覧ください。</dd>
 <dt>{{htmlattrdef("href")}}</dt>
 <dd>この領域のハイパーリンクの宛先です。この値は有効な URL です。この属性は省略可能です。その場合、その <code>&lt;area&gt;</code> 要素はハイパーリンクを提供しません。</dd>
 <dt>{{htmlattrdef("hreflang")}}</dt>
 <dd>リンク先のリソースの言語を示します。許容される値は <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt" title="Tags for Identifying Languages">BCP47</a> で定めています。この属性は、 {{htmlattrxref("href", "area")}} 属性を与える場合にのみ使用してください。</dd>
 <dt>{{htmlattrdef("ping")}}</dt>
 <dd>ハイパーリンクがフォローされたときに、ブラウザーから {{HTTPMethod("POST")}} リクエストが本文を <code>PING</code> として (バックグラウンドで) 送信する URL を空白で区切ったリストで記述します。ふつうはトラッキング用に使用します。</dd>
 <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt>
 <dd>リソースを読み込む際にどのリファラーを使用するかを示す文字列です:
 <ul>
  <li>"<code>no-referrer</code>" は、<code>Referer:</code> ヘッダーを送信しないことを表します。</li>
  <li>"<code>no-referrer-when-downgrade</code>" は、TLS (HTTPS) を使用せずに生成元へナビゲートする場合は <code>Referer:</code> ヘッダーを送信しないことを表します。これは他にポリシーが定められていない場合の、ユーザーエージェントの既定の動作です。</li>
  <li>"<code>origin</code>" は、ページの生成元 (大まかにいえばスキーム、ホスト、ポート) をリファラーとすることを表します。</li>
  <li>"<code>origin-when-cross-origin</code>" は、異なる生成元へのナビゲートではリファラーをスキーム、ホスト、ポートに制限します。同一生成元へのナビゲートでは、リファラーのパスも含めます。</li>
  <li>"<code>unsafe-url</code>" は、リファラーに生成元とパスを含めることを表します (ただし、フラグメント、パスワード、ユーザー名は含めません)。これは生成元やパスの情報が TLS で保護されたリソースからセキュアでない生成元へ漏えいしますので、安全ではありません。</li>
 </ul>
 </dd>
 <dt>{{htmlattrdef("rel")}}</dt>
 <dd>{{htmlattrxref("href", "area")}} 属性を含むアンカーで、この属性は、対象オブジェクトとリンクオブジェクトの関係を指定します。属性値は、空白で区切られた<a href="/ja/docs/Web/HTML/Link_types">リンク種別の値</a>のリストです。値とその意味は、文書作成者にとって意味を持つかもしれない何らかの権威によって登録されています。他に何も与えられていない場合の既定の関係は void です。この属性は {{htmlattrxref("href", "area")}} 属性が存在する場合にのみ使用してください。</dd>
 <dt>{{htmlattrdef("shape")}}</dt>
 <dd>関連づけたホットスポットの形状です。 HTML の仕様書では、長方形の領域を定義する値 <code>rect</code>、円形の領域を定義する値 <code>circle</code>、多角形を定義する値 <code>poly</code>、定義済みの領域以外のすべての領域を示す値 <code>default</code> を定めています。</dd>
 <dd>多くのブラウザー、特に Internet Explorer 4 以降では <code>circ</code>, <code>polygon</code>, <code>rectangle</code> を {{htmlattrxref("shape", "area")}} の有効な値として対応していますが、これらの値は標準外です。</dd>
 <dt>{{htmlattrdef("target")}}</dt>
 <dd>キーワードまたは作成者が定義した名前で、リンクされたリソースを表示する{{Glossary("browsing context", "閲覧コンテキスト")}}です。</dd>
 <dd>以下のキーワードは特別な意味を持っています。
 <ul>
  <li><code>_self</code> (既定値): 現在の閲覧コンテキストのリソースを表します。</li>
  <li><code>_blank</code>: 新しい名前の付けられていない閲覧コンテキストのリソースを表します。</li>
  <li><code>_parent</code>: 現在のページがフレーム内にある場合は、現在の親の閲覧コンテキストのリソースを表します。親要素がない場合、 <code>_self</code> と同じ動作をします。</li>
  <li><code>_top</code>: 最上位の閲覧コンテキストのリソースを表します (現在の閲覧コンテキストの祖先にあたり、それ以上親のない要素です)。親要素がない場合、 <code>_self</code> と同じ動作をします。</li>
 </ul>
 </dd>
 <dd>この属性は {{htmlattrxref("href", "area")}} 属性が存在する場合にのみ使用してください。
 <div class="note">
 <p><strong>注:</strong> 新しいブラウザー (例えば Firefox 79 以降) では、 <code>target="_blank"</code> を <code>&lt;area&gt;</code> 要素に設定すると、暗黙に同じ動作をする <code>rel</code> を <code>rel="noopener"</code> と設定します。</p>
 </div>
 </dd>
</dl>

<h3 id="Deprecated_attributes" name="Deprecated_attributes">非推奨の属性</h3>

<dl>
 <dt>{{htmlattrdef("name")}} {{deprecated_inline}}</dt>
 <dd>古いブラウザーでスクリプトから使用できるようにするため、クリッカブル領域に名前を定義します。</dd>
 <dt>{{htmlattrdef("nohref")}} {{deprecated_inline}}</dt>
 <dd>関連づけた領域にハイパーリンクがないことを示します。
 <div class="note">
 <p><strong>注:</strong> HTML5 では <code>href</code> 属性を省略すれば十分です。</p>
 </div>
 </dd>
 <dt>{{htmlattrdef("tabindex")}} {{deprecated_inline}}</dt>
 <dd>ブラウザーのタブオーダーにおける、定義した領域の位置を示す数値です。この属性は HTML5 のグローバル属性です。</dd>
 <dt>{{htmlattrdef("type")}} {{deprecated_inline}}</dt>
 <dd>この属性は使用しないでください。ブラウザーは無視します (HTML 仕様書の W3C 5.3 では有効なものとして定義していますが、<a href="https://html.spec.whatwg.org/multipage/#the-area-element">正規の HTML 仕様書</a>では定義していておらず、どのユーザーエージェントでも効果がありません。)</dd>
</dl>

<h2 id="Examples" name="Examples">例</h2>

<pre class="brush: html notranslate">&lt;map name="primary"&gt;
  &lt;area shape="circle" coords="75,75,75" href="left.html" alt="Click to go Left"&gt;
  &lt;area shape="circle" coords="275,75,75" href="right.html" alt="Click to go Right"&gt;
&lt;/map&gt;
&lt;img usemap="#primary" src="http://placehold.it/350x150" alt="350 x 150 pic"&gt;</pre>

<h3 id="Result" name="Result">結果</h3>

<p>{{ EmbedLiveSample('Examples', 360, 160) }}</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrerpolicy attribute')}}</td>
   <td>{{Spec2('Referrer Policy')}}</td>
   <td><code>referrerpolicy</code> 属性を追加。</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-area-element', '&lt;area&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'semantics-embedded-content.html#the-area-element', '&lt;area&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '&lt;area&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

<p>{{Compat("html.elements.area")}}</p>