フレームを使用したときのリンク指定方法

[統計] HTMLからXHTMLへの移行を進めていますか?


<a href="" target="">

ブラウザ
Internet Explorer Netscape Firefox Opera
タイプ
インライン要素

aタグtarget="" を追加すると、リンク先のページをどのウィンドウ(フレーム)に表示するのかを指定できます。

このページでは、フレームを使用した場合のリンクの指定方法を説明します。


<a href="index.html" target="_top">リンクボタン</a>


target="" _blank … (新たにブラウザを立ち上げて表示します)
_top … (フレームの分割を廃止して画面全体で表示します)
_self … (リンク元と同じウィンドウ(フレーム)に表示します)デフォルト
_parent … (親フレームに表示します)
ウィンドウ名(フレーム名) … (任意のウィンドウ(フレーム)に表示します)
target="_blank" が指定されたリンクは、ユーザーの環境によってはポップアップブロックが機能してしまい、リンク先が表示できなくなる場合があります。

【フレームを使用した場合のリンクパターン】

リンクパターン

(例)左右に2分割したページで、左のフレームにリンクボタンを配置している場合

上記の例の場合、次のようなリンクパターンが考えられます。

リンク先のページをAフレームに表示する

target="" の指定を行わずに普通にリンクするか、target="_self" を指定します。

リンク先のページをBフレームに表示する

まず、Bフレームに対してフレーム名を付けておき、target="" にそのフレーム名を指定します。

※フレーム名の指定については、「分割した画面にフレーム名を付ける」をご覧ください。

分割を廃止して画面全体でリンク先のページを表示する

target="_top" を指定します。

メモ

DTDがStrictの場合は、target属性は使用できません。


使用例

target="_top"(分割を廃止して画面全体で表示)

<a href="example_t01.html" target="_top">分割を廃止して表示します</a>

これをブラウザで見ると次のように表示されます


target="_self"(クリックしたフレーム内に表示)

<a href="example_t02.html" target="_self">同じフレームに表示します</a>

これをブラウザで見ると次のように表示されます


target="_parent"(親フレームに表示)

<a href="example_t03.html" target="_parent">親フレームに表示します</a>

これをブラウザで見ると次のように表示されます

親フレームサンプル ※親フレームについての補足
このサンプルのようなリンクを行うためには、右図のようなフレーム設定が必要です。左右に分割した右側のフレームに、上下に分割したページを読み込みます。この例の場合、赤と黄色のページから見た親フレームはBのエリアとなり、赤のページでこのリンクをクリックした場合には、Bエリア全体で表示されることになります。

target="フレーム名"(任意のフレームに表示)

<a href="example_t04.html" target="main">任意のフレームに表示します</a>

これをブラウザで見ると次のように表示されます



[特集] レンタルサーバー比較 & サーバー選びのチェックポイント