フレーム分割の方法については前のページを参考にしてください。
また、aタグのname属性はここを参考にしてください。
aタグの使い方は次の2通りです。
(1)クリックの「移動する位置」をhref属性で指定する
(2)「移動先となる名前」をname属性で指定する
名前の付け方は、次のように行います。
<a name="移動先となる名前">
名前を付ける範囲 </a>
これで、 名前を付ける範囲 に対して、「移動先となる名前」
の名前を付けたことになります。
そして、クリックでこの 名前を付ける範囲 が
見えるようにブラウザの表示位置を移動するaタグのhref属性では次のように
#をつけます。
<a href="#移動先となる名前">クリック可能範囲</a>
具体例として以下にnameを使った「main2.html」を示します。
<html> <head> <meta content="text/html; charset=Shift_JIS"> <link rel="stylesheet" href="freame.css" type="text/css"> <style type="text/css"> body { background-color: yellow; } h1 { font-size: 22pt;} </style> </head> <body> <h1> メイン2 </h1> <h2><a name="sub1"> サブタイトル1 </a></h2> <a href="main1.html"><p align="right">1ページへ</p></a> <p>内容1</p> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <hr> <h2><a name="sub2"> サブタイトル2 </a></h2> <p align="right"><a href="main1.html" target="_top">全体へ</a></p> <p align="right"><a href="main1.html" target="_parent">親へ</a></p> <p align="right"><a href="#sub1">サブタイトル1へ</a></p> <p>内容2</p> <br><br><br><br><br><br><br><br><br><br> <p>内容3</p> <br><br><br><br><br><br><br><br><br><br> </body> </html>
上記main2.htmlの「サブタイトル1」へ移動する表記です。
<a href="main2.html#sub1" target="ex">
上記main2.htmlの「サブタイトル2」へ移動する表記です。
<a href="main2.html#sub2" target="ex">
上記と交互にクリックして、違いを確認してください。
上記の2つリンク箇所では、targetで 同じexの名前を指定しています。
これは、ex のウインドウ名のフレームに表示させる指定です。
最初のクリックで、ex のウインドウが存在していない時は、
新しいexの名前のウインドウを作って、そこに表示するでしょう。
次にそれを閉じないでもう一方をクリックすると、そのexの名前のウインドウ内で
表示が切り替わることに注目ください。
targetではフレーム名を指定することもできます。
このフレーム名は、ウインドウ名と同等に扱われます。次の『framemain2.htm』でこの例を示します。
<html> <head> <meta content="text/html; charset=Shift_JIS"> <title>○○○の紹介</title> </head> <frameset rows="20%,*"> <frame src ="header.html" name="header"> <frameset cols="30%,*"> <frame src ="menu2.html" name="menu"> <frame src ="main2.html" name="main"> </frameset> </frameset> </html>
各フレームにname属性を設定していることに注目ください。 上記では、menu、header、main と名前を付けています。 名前の付け方は自由です。以下に示す『menu2.html』で、 この名前をtargetで指定しています。
<html> <head> <meta content="text/html; charset=Shift_JIS"> <link rel="stylesheet" href="frame.css" type="text/css"> </head> <body style="background-color: #FFDDAA;"> <h3><a href="main1.html#sub1" target="main">サブ1</a></h3> <h3><a href="main1.html#sub2" target="main">サブ2</a></h3> <h3><a href="main2.html" target="main">リンク2</a></h3> <h3><a href="framemain.htm" target="main">別フレーム</a></h3> <h3><a href="menu2.html" target="header">headerへ</a></h3> <h3><a href="menu2.html" target="_blank">blank</a></h3> <h3><a href="menu.html" target="_self">self</a></h3> <h3><a href="menu2.html" target="_parent">parent</a></h3> <h3><a href="framemain2.htm" target="_top">top</a></h3> </body> </html>
このクリックで、
フレーム名が指定してあるtargetの挙動を
確認してください。
(そのフレーム内にhrefのHTMLが表示されます。)
ここで、target="_blank"の指定は、名前がない新しいウィンドウフレームを生成し、
それに表示させます。
クリックごとに新しいウィドウが作られてそこに表示するでしょう。
なおこの挙動は ブラウザによって違います。タグブラウザであれば新しいタグのフレームに表示されます。
_blankはtargetで使える特別な意味でウインドウ名ではありません。
他に_self、_parent、_topがあります。
_selfは、自身のフレームを意味して、
targetの属性を書かない場合と同じで、自身のフレーム内をリンク先のwebページへ変更します。
つまり、_selfがデフォルトの値というわけです。
target="_parent"と、_topは、2重以内のフレーム構造であれば同じ動作になります。
この違いを確認するには、framesetの中framesetがあるという構造が3重以上になっている必要があります
_top指定は、一番外側のフレームが変更対象です。
_parentは、自身から見て一つ外側(親と呼ぶ)に位置するフレームが変更対象になり、
それより外側のフレーム構造を、変更しません。
上記例で_parent"と _topの違いを確認する場合、
次のステップで確認できます。