<area>要素の使い方・サンプルコード

<area>

<area>要素は、<map>要素の中でホットスポット領域（クリック可能な場所）を設定することができます。

あわせて読みたい

【HTMLサンプル】<map>と<area>要素を使ったイメージマップの作り方

属性

alt

画像が表示されない・表示できない場合に、代わりに表示するテキストです。HTML5 では href 属性を使用する場合に必須になります。

<area shape="circle" coords="50, 50, 10" href="https://sample.com" alt="sample.comを表示">

coords

ホットスポット領域の座標をピクセル値で指定します。

shape 属性に指定した値によって書き方が異なります。

shape=”circle” を指定した場合

circle（円形）の場合は、円の中心を「x, y」半径を「r」で指定します。

<area shape="circle" coords="x, y, r">

shape=”rect” を指定した場合

rect（四角形）の場合は、左上の座標を「x1, y1」右下の座標を「x2, y2」とします。

<area shape="rect" coords="x1, y1, x2, y2">

shape=”poly” を指定した場合

poly（多角形）の場合は、各頂点の座標を「x, y」を必要な頂点の数だけ書きます。

例）六角形の場合

<area shape="poly" coords="x1, y1, x2, y2, x3, y3, x4, y4, x5, y5, x6, y6">

download

href 属性で指定したファイルをダウンロードするようにウェブブラウザに示します。

download 属性に指定した値がダウンロード時のファイル名になります。

例）sample.png が image というファイル名で保存されるコード

<area shape="circle" coords="50, 50, 10" href="sample.png" download="image">

href

この領域のハイパーリンクの URL を指定します。

<area shape="circle" coords="50, 50, 10" href="https://sample.com">

hreflang

リンク先のファイルの言語を指定します。href 属性を用いる場合にのみ使用します。

<area shape="circle" coords="50, 50, 10" href="https://sample.com" hreflang="ja">

ping

ブラウザによって送信される URL のリストです。通常トラッキングに使用されます。

rel

リンク先の内容の役割をリンク種別の値で指定します。href 属性を用いる場合にのみ使用します。

<area shape="circle" coords="50, 50, 10" href="https://sample.com" rel="noreferrer">

shape

ホットスポット領域の形を指定します。

を指定できます。

target

リンク先のファイルを開く場所・コンテキスト（ブラウザのタブ・ウィンドウなど）を指定します。href 属性を用いる場合にのみ使用します。

例）新しいタブでリンクを表示するコード

<area shape="circle" coords="50, 50, 10" href="https://sample.com" target="_blank">

グローバル属性

全ての HTML 要素に共通して使用できるグローバル属性はこちら

使用例

イメージマップのデモ（実際にクリックすることができます）

<map name="sample">
  <area shape="rect" coords="175, 70, 290, 220" href="picture.html" alt="壁掛け">
  <area shape="circle" coords="100, 214, 30" href="leaf.html" alt="葉っぱ">
  <area shape="poly" coords="50, 340, 75, 354, 75, 385, 50, 400, 25, 385, 25, 354" href="plant.html" alt="鉢植え">
</map>
<img usemap="#sample" src="image.jpg" alt="Image"/>

このコードの詳しい解説は「<map>と<area>要素を使ったイメージマップの作り方」をお読みください。

対応ブラウザ

関連するタグ

• <map>：イメージマップ (クリック可能な領域)を作成

HTML タグ一覧はこちら

Sara

運営者

XYouTubeContact

書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語：Java / Kotlin / PHP
>> 詳しいプロフィール
>> お問い合わせ
>> 書籍を出版しました！