<area>
area（エリア）要素はクライアントサイドクリカッブルマップにおける領域を指定します。
area要素では、「領域の形状」と「領域の座標」を指定することで、クリッカブル領域を指定する。形状をshape属性、座標をcoords属性でそれぞれ指定する。
area要素がhref属性を持つ場合、そのarea要素はハイパーリンクとなる。この場合alt属性は必須となり、href属性で関連づけられた URIに関する代替テキストを指定する。ただし、同一のmap要素内に、同じ URIが指定されたhref要素をもつ別のarea要素が存在し、そこにすでに適切なalt属性が指定されている場合は、省略するができる。
area要素がhref属性を持たない場合は、この要素で指定された領域はクリック出来ない領域となる。また、href属性を持たないarea要素に対して、alt属性を付与することはできない。また、target、rel、media、hreflang、type属性も省略しなければならない。
area要素で使用できる属性
| 属性名 | 属性値 | 説明 |
|---|---|---|
| グローバル | すべての要素で使用できる属性 | |
| alt（オルタナティブ） | ・テキスト（代替テキスト） | img 要素において画像が表示できなかった場合や、area 要素における領域内のフォールバックとして利用される代替テキストを指定する。 単に画像のタイトルを記述するのではなく、その画像が表すものを文章として説明する必要がある。 |
| coords（コーズ） | 座標は、1つの点につき、X軸、Y軸の座標のセットによって表されます。座標の基点は画像の左上隅になりますので、例えば、画像の左上隅を 0,0 として、左上隅から 100px 四方の四角形の領域を指定する場合、領域右下隅の座標は、100,100 となる。 | area要素における領域の座標を指定する。 |
| shape（シェープ） | ・circle：円形 ・default：画像全体 ・poly：多角形 ・rect：長方形（初期値） | shape 属性は area要素で指定する領域の形状を指定することができる。 |
| href（ハイパーテキスト・リファレンス） | URI | a 要素、area 要素、link 要素におけるリンクアンカーの移動先や base 要素における基準 URLの設定するための属性になる。 |
| target | _blank：リンクは新しいウィンドウ （タブ） に展開される。 _parent：リンクは現在のブラウジング・コンテキストの 1つ上位のブラウジング・コンテキストを対象に展開される。 _self：リンクは現在のブラウジング・コンテキストに展開される。 _top：リンクは現在のブラウジング・コンテキストの 最上位のブラウジング・コンテキストを対象に展開される。 | target 属性は、a 要素、area 要素、link 要素におけるリンクアンカーの表示先を指定する。 |
| download | URI（hrefで記述されたURL） | download 属性は、ユーザエージェントに対して、href 属性で与えられた URL に移動するのではなくダウンロードするように伝えるものです。属性に値を指定した場合、ダウンロード時のデフォルトファイル名として使用される。 |
| ping | URI：トラッキング用リクエストの送信 | ユーザーがリンクを移動する際、この属性で指定された URL に対して POST リクエストをバックグラウンドで送信する。 通常はトラッキング用途で使用される。トラッキングのために本来のリンク先の間にトラッキング用ページを挟んでからリダイレクトするような処理は一般的に行われるが、ping属性を使用することでリダイレクト処理を省略でき、ユーザーの体感速度を向上させるなどの効果がある。 |
| rel | rel属性に指定できる値は、下のrel属性に指定できる値を参照してください。 | 現在の文書からみた、リンク先となるリソースの位置づけを表す。 |
| referrerpolicy（リファラポリシー） | referrerpolicy属性に指定できる値は、下のreferrerpolicy属性に指定できる値を参照してください。 | リンク先にアクセスする際、あるいは画像など外部リソースをリクエストする際にリファラ（アクセス元の URL 情報）を送信するか否か（リファラポリシー）を指定する。 |
rel属性に指定できる値
| 値 | 説明 |
|---|---|
| alternate | 代替文書 （例えば別言語版、別フォーマット版など） |
| canonical | 現在の文書の優先URLを指定する |
| author | 著者情報 |
| bookmark | 文書の固定リンク |
| dns-prefetch | ユーザエージェントがターゲットリソースの生成元の DNS 解決を先行して実施するよう指定 |
| external | 外部サイトへのリンクであることを示す |
| help | ヘルプへのリンク |
| icon | アイコンをインポートします |
| modulepreload | ユーザエージェントが先行してモジュールスクリプトをフェッチし、文書のモジュールマップに格納しなければならないことを指定します |
| icense | ライセンス文書 |
| next | 連続した文書における次の文書 |
| nofollow | 重要でないリンク |
| noopener | target 属性を持つリンクを開く際、Window.opener プロパティを設定しません |
| noreferrer | ユーザーがリンクを移動する際、リファラを送信しません |
| opener | target属性を持つリンクを開く際、Window.opener プロパティを設定します |
| pingback | Pingback 1.0 仕様に基づき、ピングバック（トラックバック）用の URI を指定します |
| preconnect | リンク先のリソースにあらかじめ接続するように指定します （link 要素でのみ使用可能） |
| prefetch | リンク先のリソースをあらかじめキャッシュするように指定します （link 要素でのみ使用可能） |
| preload | リンク先のリソースを事前に読み込むように指定します （link 要素でのみ使用可能） |
| prerender | リンク先のリソースを読み込んでオフスクリーンでレンダリングしておくように指定します |
| prev | 連続した文書における前の文書 |
| search | 検索機能を提供するリソース |
| stylesheet | スタイルシート |
| tag | 文書に指定されたタグのページ |
referrerpolicyに指定できる値
| 値 | 説明 |
|---|---|
| 空文字列 | デフォルト値。特にリファラに対して条件指定をせず、ブラウザの挙動によります。 |
| no-referrer | リファラを一切送信しません。a 要素や area 要素にrel=”noreferrer” を付与した場合と同様の扱いとなります。 |
| no-referrer-when-downgrade | リンク元が SSL/TLS を用いており、リンク先が SSL/TLS を用いていない場合（HTTPS→HTTP）にはリファラを送信しません。 それ以外の場合（HTTPS→HTTPS / HTTP→HTTPS）は、リンク元の完全な URL をリファラとして送信します。 |
| same-origin | リンク元とリンク先が同一オリジンの場合は。リファラを送信します。 |
| origin | リンク元のオリジンのみが送信されます |
| strict-origin | リンク元、リンク先がそれぞれ SSL/TLS を用いている場合、あるいはリンク元が SSL/TLS を用いていない場合にリンク元のオリジンのみを送信します。 |
| origin-when-cross-origin | ・リンク元とリンク先が異なるオリジンの場合、リンク元のオリジンのみを送信します。 ・リンク元とリンク先が同一オリジンの場合、リンク元の完全な URL をリファラとして送信します。 |
| strict-origin-when-cross-origin | リンク元、リンク先がそれぞれ SSL/TLS を用いている場合、あるいはリンク元が SSL/TLS を用いていない場合に下記の条件でリファラを送信します。 ・リンク元とリンク先が異なるオリジンの場合、リンク元のオリジンのみを送信します。 ・リンク元とリンク先が同一オリジンの場合、リンク元の完全な URL をリファラとして送信します。 |
| unsafe-url | リンク元の完全な URL をリファラとして送信します。 |
使用例
<html>
<figure>
<div id="map">
<img src="/map-japan-10210-1.webp" usemap="#ImageMap" alt="">
<map name="ImageMap">
<area shape="rect" coords="1068,234,1161,270" href="/hokkaido/" alt="北海道" title="北海道" target="_blank">
<area shape="rect" coords="869,995,929,1029" href="/tokyo/" alt="東京本店" title=""東京本店 target="_blank">
<area shape="rect" coords="546,1094,608,1132" href="/osaka/" alt="大阪支店" title="大阪支店" target="_blank">
<area shape="rect" coords="147,1164,206,1196" href="/fukuoka/" alt="福岡支店" title="福岡支店" target="_blank">
</map>
</div>
</figure>
</html>当社の本店・支店
area要素をご覧になるには、下のリンクをクリックしてください。
当社の本店・支店