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

HTMLの要素におけるtarget属性の使い方を解説

HTMLの<area>要素におけるtarget属性とは

<area>要素のtarget属性を使うと、クリックされたリンク先のドキュメントをどこに表示するかを指定できます。たとえば、新しいウィンドウ（タブ）で開く、同じフレーム内で開く、親フレームで開く、といった表示方法を柔軟に制御することが可能です。

target属性の構文

target属性の基本的な構文は以下の通りです。

<area target="_blank|_self|_parent|_top|フレーム名">

それぞれの値の意味は次のようになっています。

  • _blank：リンク先のドキュメントを新しいウィンドウまたは新しいタブで開きます。
  • _self：リンクがクリックされたのと同じフレーム内で開きます（デフォルト値）。
  • _parent：親フレーム内でドキュメントを開きます。
  • _top：ウィンドウ全体（フレーム構成を解除した状態）でリンク先を開きます。
  • フレーム名：指定した名前のフレーム内でリンク先のドキュメントを開きます。

実装例

それでは、<area>要素のtarget属性を実際に実装した例を見てみましょう。

<!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>

実行結果

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

コードの解説

上記の例では、まず次のように画像を表示し、イメージマップとして設定しています。

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

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

<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>

ここでは、リンク先のドキュメントを新しいウィンドウやタブで開くために、すべての<area>要素に対して次のように指定しています。target = "_blank"は、リンク先を新しいウィンドウまたはタブで開くための値です。

target = "_blank"

このように、イメージマップとtarget属性を組み合わせることで、画像内のクリック領域ごとに異なるリンク先を設定し、その表示方法まで細かく制御できます。

  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