ywork2020.com

Title

リンク先を読み込むウインドウを指定する

目次 (INDEX)

target とは

ここで説明する target とは次の語句からなる HTML 要素の属性です。
target
読み: ターゲット
意味: 目標、標的、的、対象

目次に戻る

target 属性の概要

この属性は、主にリンクや送信を表す要素に使用され、新しく開くページをどのウィンドウで表示するかを指定できます。

おそらく、この属性が一番よく使われるのは、 a 要素 でしょう。

例えば、 a 要素に この属性を付けてキーワード値を与えることで、そのリンク先のページをブラウザのどのウィンドウに表示するかを指定できるわけです。

また、送信に関して言えば、 form 要素 でもデータの送信先ページをブラウザのどのウィンドウに表示するかを指定できることになります。

上記のようにページが表示される環境ことを 「 ブラウジング・コンテキスト 」 と呼びます。

目次に戻る

サンプルコードと実行結果

ここでは、ブラウジング・コンテキストに指定するためのキーワード値と動作を確認したいと思います。

サンプルコード: "_blank"

_blank は、新しいブラウジング・コンテキストを開いてリンク先を表示します。
つまり、新しいタブでウインドウを開いて表示するということになります。

<body>
	<a href="URL" target="_blank"> ywork2020.com </a>
</body>
実行結果:




サンプルコード: "_self"

_self は、既定値と同じ意味合いがあり、何も指定しない場合と同じでリンク先を同じウィンドウに表示します。 閲覧しているページから新たにウィンドウが開かず、閲覧しているページがリンク先に代わり表示されます。

<body>
	<a href="URL" target="_self"> ywork2020.com </a>
	<a href="URL"> ywork2020.com </a>	
</body>
実行結果:




サンプルコード: _parent

_parent は、現在閲覧しているウィンドウの親があれば、その親のウィンドウにリンク先が表示されます。

例えば現在のページ内に iframe要素のページを表示している場合について考えてみましょう。 現在のページを X ページとして、iframe 要素のソースページを Y ページにした場合に、Y ページの a 要素にこの属性値を使った場合に X ページにリンク先が表示されるということです。

<body>
	<a href="URL" target="_parent"> ywork2020.com </a>	
</body>




サンプルコード: "_top"

_top は、最上位という意味で、閲覧しているページの祖先のブラウザにリンク先が表示されます。

親の閲覧ブラウジング・コンテキストがない場合には、_self と同じように動作します。

frame ( フレーム )を使用している場合には、フレームの分割を解除してリンク先がウィンドウ全体に表示されます。 尚、frame は HTML5 で廃止になりました。代替えは iframe です。

<body>
	<a href="URL" target="_top"> ywork2020.com </a>	
</body>

目次に戻る