HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのarea要素におけるhref属性の使い方を徹底解説

HTMLの<area>要素におけるhref属性は、クリック可能な領域（イメージマップ）にリンク先を設定するための重要な属性です。この記事では、href属性の基本的な構文から実際のコード例まで、わかりやすく解説します。

href属性の基本構文

<area>要素のhref属性は、ハイパーリンクのリンク先（ターゲット）を指定します。基本的な構文は以下のとおりです。

<area href="URL">

ここで指定する「URL」には、相対パス、絶対パス、スクリプト、各種プロトコルなど、さまざまな形式のリンク先を設定できます。

実装例：イメージマップでhref属性を使う

それでは、<area>要素のhref属性を使った具体的な例を見てみましょう。以下のコードでは、1枚の画像上に複数のクリック領域を定義し、それぞれ異なるページへリンクさせています。

サンプルコード

<!DOCTYPE html>
<html>
<body>
<h2>Learning</h2>
<p>Learn these technologies with ease....</p>
<img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/>
<map name = "tutorials">
    <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27"
        href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank" />
    <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial"
        href = "/html/index.htm" target = "_blank" />
    <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial"
        href = "/php/index.htm" target = "_blank" />
</map>
</body>
</html>

表示結果

このコードを実行すると、画像内の各領域をクリックすることで、対応するチュートリアルページが新しいタブで開きます。

コードの解説

1. 画像へのマップ適用

まず、usemap属性を使って画像にマップを関連付けています。

<img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/>

2. マップとエリア（領域）の定義

次に、<map>要素でマップを定義し、その中に<area>要素でクリック可能な領域を形状ごとに設定しています。

  • poly（多角形）：coords属性で複数の座標点を指定し、多角形の領域を作成
  • rect（矩形）：左上と右下の座標を指定して四角形の領域を作成
  • circle（円形）：中心座標と半径を指定して円形の領域を作成
<map name = "tutorials">
    <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27"
        href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank" />
    <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial"
        href = "/html/index.htm" target = "_blank" />
    <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial"
        href = "/php/index.htm" target = "_blank" />
</map>

3. href属性によるリンク先の指定

各領域のリンク先は、href属性によって以下のように設定されています。

href = "/php/index.htm"

このように、href属性とshape・coords属性を組み合わせることで、1枚の画像から複数のページへ誘導できるインタラクティブなナビゲーションを実現できます。target属性に「_blank」を指定すれば、リンクを新しいタブで開くことも可能です。

  1. HTMLのopen属性とは？details要素の使い方とサンプルコード解説

    HTMLのopen属性は、details要素の内容をHTMLドキュメント上で最初から表示状態（開いた状態）にするためのブール属性です。この属性を指定すると、ユーザーがsummary要素をクリックしなくても、ページ読み込み時にdetails要素内のコンテンツが展開された状態で表示されます。 構文 open属性の基本的な構文は以下のとおりです。 <details open></details> open属性はブール属性のため、値を指定せずに属性名だけで記述できます。属性を省略した場合、details要素は初期状態で閉じられ、ユーザーがsummary要素をクリックしたときに初

  2. HTMLのlow属性とは？meter要素での使い方とコード例をわかりやすく解説

    HTMLのlow属性は、ゲージ（計測バー）の値が「低い」とみなされる範囲の境界値を定義するための属性です。この属性を適用できるのは、<meter>要素のみであり、他のHTML要素では使用できません。low属性に指定した数値より小さい値がmeter要素に入力された場合、ブラウザはその状態を「低い値」として認識し、多くの場合ゲージの色が変化して視覚的に警告を表現します。low属性と対になるものとして、値が「高い」とみなされる範囲を定義するhigh属性も存在します。low属性の基本構文low属性の記述方法は以下のとおりです。<meter low=数値></meter&g