最終更新日

area要素

area要素は、テキスト付きハイパーリンクを構成する、イメージマップ上のそれぞれの領域を示します。area要素は空要素で、終了タグはありません。map要素の子要素として、Phrasingコンテンツの記述箇所で使用できます。

href属性によって、area要素でのハイパーリンクの定義が可能です。画像が表示されない環境のためにも、リンク先を示すテキスト情報として、alt属性の指定が必須でしょう。href属性を持たないarea要素は、選択不可の領域を示します。その場合にはalt属性の指定も省略されるべきでしょう。なおtitle属性を使うと、各領域にマウスポインタを合わせたときのツールチップ用テキストを指定できます。

また、href属性を指定したときは、target、rel、media、hreflang、typeの各属性も指定可能です。target属性では、リンク先ページの表示方法について指定します。また、rel、media、hreflang、typeの各属性を使うと、ユーザーがリンクをたどる前に、リンク先についての情報を示せるようになります。

area要素のshape属性とcoords属性を組み合わせて指定することにより、イメージマップ上でのそれぞれの領域の形状と座標を指定できます。shape属性では、各領域の形状をキーワードで指定します。また、coords属性では、shape属性で指定した形状の座標を、カンマで区切った整数の並びで指定します。この場合、X座標はCSSのピクセル内でマップ画像の左端からの距離、Y座標はCSSのピクセル内でマップ画像の上端からの距離となります。

HTML5での変更点
・media、hreflang、typeの各属性が新たに追加されました。
・nohref属性は廃止されました。
カテゴリ タグの省略 親要素 子要素
Flowコンテンツ
Phrasingコンテンツ
空要素 map要素 / map要素内のPhrasingコンテンツを子にできる要素 なし
属性 説明
alt 文字列 リンク先を表すテキストを指定します。
coords 数値 shape属性で指定した形状での領域の座標を指定します。整数をカンマで区切って指定します。
shape rect
circle
poly
イメージマップ内の領域の形状を指定します。「rect」(四角形)は、左上のX座標とY座標、右下のX座標とY座標の4つの整数を順に並べます。「circle」(円)は、中心のX座標、中心のY座標、半径の3つの整数を順に並べます。「poly」(多角形)は、頂点1のX座標とY座標、頂点2のX座標とY座標、頂点3のX座標とY座標、頂点4のX座標とY座標、…というような感じで整数を順に並べます。
href URL リンク先文書のURLを指定します。
target 文字列 リンクの表示先を、キーワードかウィンドウ名で指定します。キーワードは4つあり、「_self」は現在のウィンドウ、「_parent」は親ウィンドウ、「_top」は最上位のウィンドウ、「_blank」は新しいウィンドウに、それぞれ表示されます。
rel リンクタイプ リンク先文書との関係を指定します。
media メディアタイプ リンク先文書のメディアタイプを指定します。
hreflang 言語コード リンク先文書の言語を指定します。
type MIMEタイプ リンク先文書のファイルの種類を指定します。
グローバル属性 - -
イベント属性 - -
サンプルコード
<body>
  <h1>モーニングセット</h1>
  <p>下記の画像をクリックすると、それぞれの商品ページに移動します。</p>
  <p>
    <img src="morning.jpg" usemap="#morningset">
    <map name="morningset">
      <area href="muffin.html" shape="circle" coords="120,140,110" alt="マフィン">
      <area href="potato.html" shape="rect" coords="10,50,70,90" alt="ポテト">
      <area href="coffee.html" shape="rect" coords="70,10,140,40" alt="コーヒー">
    </map>
  </p>
</body>
参考文献:W3C HTML5「4.8.13 The area element」外部リンク
HOME
当サイトの活動をサポートしてみませんか?気軽にクリエイターの支援ができます。