リファレンス

【2020年版】<area>要素の使い方・サンプルコード

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

属性

<area 属性名="ここに値を指定"></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

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

  • circle(円)
  • rect(四角形)
  • poly(多角形)

を指定できます。
 
 

target

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

属性値
_self(既定値)表示中のページと同じウィンドウにリンク先のページを表示します。
_blank新しいタブ・ウィンドウでリンクを開きます。
_parent 現在閲覧中のタブ・ウィンドウの親コンテキストにリンク先のページを読み込みます。親がない場合は _self と同じ動きをします。
_topトップレベル(親を持たない)の閲覧コンテキストにリンク先のページを読み込みます。親がない場合は _self と同じ動きをします。

 

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

<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>要素を使ったイメージマップの作り方」をお読みください。
 
 

対応ブラウザ

 
 

関連するタグ

 

HTML タグ一覧はこちら

ABOUT ME
Sara
Sara
「わかりやすく・シンプル」をモットーに、スマホアプリ・ウェブアプリの作り方を紹介します。 独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています🙂
独学は難しそうと感じたら

 
独学でプログラミングを勉強するのは難しそう、効率的にプログラミングを学びたいという方はオンラインスクールがオススメです。

オンラインスクールを選ぶときのポイント

  • 無料体験があること
  • 個別サポートがあること

自分にあったスタイルを見つけるために、無料体験のご利用をオススメします。(無料体験後に自分には合わないなと感じたらハッキリ断ってしまって問題ありません。)
 
個別サポートもプログラミング学習に挫折しないために重要なポイントです。エラーや困った時にすぐに個別対応をしてくれるスクールを利用して下さい。

ここでは3つのオンラインスクールを紹介します。
全て無料体験がありますので、ぜひ自分に合ったスクールを見つけてみて下さい????
 

1. TechAcademy(テックアカデミー)

オンライン完結で勉強できるスクールで、コースがとても充実しています。チャットで質問すればすぐに回答を得られるのが一番のおすすめポイントです。
オリジナルのサービスやアプリの開発もサポートしてくれるので、開発したいものが決まっている人にもオススメです。

無料体験はこちら

2. CodeCamp(コードキャンプ)

一対一で受講できる個別指導のプログラミングスクールです。
Webデザイン・Webサービス開発・アプリ開発などを幅広く学習することができます。
マンツーマンなので自分のペースで学習できて、質問もその都度できるのがメリットです。

無料体験レッスンはこちら

3. Treehouse

英語でも良い、英語とプログラミングを同時に勉強したいという方は Treehouse がオススメです。月25ドルで始めることができて、たくさんのプログラミング言語を学ぶことができます。
個別サポートはありませんが、掲示板が充実しています。ほとんどの場合、質問してから30分程度で回答を得ることができます。

7日間の無料体験はこちら

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA