フレームに挑戦だ 


フレームのページというのは今あなたがご覧になっているように上下、または左右に 画面が分割されているページのことです。こんなページが作りたいという方のために これから説明いたします。一部分、理解するのにヘビーなところもあります。 準備はよろしいですか?


 まずは 


<frameset>

ここにさまざまなタグを書き込む(のちほど説明)

</frameset>


フレームのページの基本となるタグです。 フレームのページには<body></body>タグは必要ありません。 そのかわりに<frameset></frameset>のタグを置くことになります。


 画面の割りかた 


<frame>タグに少し付け足していきます。


      横割り                    縦割り
______________________________         ______________________________
|                            |         |             |              |     
|                            |         |             |              |
|                            |         |             |              |
|                            |         |             |              |
|----------------------------|         |             |              |
|                            |         |             |              |
|                            |         |             |              | 
|                            |         |             |              | 
|                            |         |             |              |
|____________________________|         |_____________|______________|

<frameset rows="数字%,数字%">       <frameset cols="数字%,数字%">


<1> 数字は画面を分割する比率です。当たり前のことですが、数字合計は100にして下さい。
<2> 数字%が2つの組み合わせなら2分割、3つの組み合わせなら3分割になります。 3分割の時も合計は100になるようにして下さい。


 初期画面のフレーム内に表示させるページの指定 


ここでは上下に50%、50%の2分割の例ですすめます。


<frameset rows="50%,50%">

<frame src="上段に表示させるページ名.html" name="お好きなウインドウ名">
<frame src="
下段に表示させるページ名.html" name="お好きなウインドウ名">

</frameset>


<1> 2分割の場合は<frame src=・・・>の部分が2段になり、3分割の時は3段になります。
<2> 「上段に表示させるページ名.html」には上段に表示させたいページ名を書きます。下段も同様です。
<3> 「name="お好きなウインドウ名"」には上段のウインドウ(窓)の名前を書きます。 (ただし半角英数字)。これはあくまで窓の名前です。ですから[window1]とか[windou2]とすれば分かりやすいでしょう。
<4> <3>で付けた名前があとで効いてきます。リンクさせたページをどのウインドウに表示させるかは このウインドウ名を後々指定することにより決定します。


 リンク先のページをどのウインドウに表示させるのか 


<a href="リンクページ" target="表示させたいウインドウ名">リンクのボタン</a>



<1> あなたのさまざまなページにリンクのボタンがあると思います。タグはいつもといっしょですが 1つ「target="表示させたいウインドウ名"」というのが書き加えられています。
<2> ここで指定したウインドウにリンクページが表示されます。


 実際にやってみよう 


それでは「link1.html」というリンクページを「window2」という下段の窓に実際に表示させてみます。

タグはもちろんこうです。


<a href="link1.html" target="window2">リンクのボタン</a>


リンクのボタン


こんどは「link2.html」というリンクページを「window1」という上段の窓に表示させてみます。

タグはもちろんこうです。


<a href="link2.html" target="window1">リンクのボタン</a>


リンクのボタン


上段・下段に表示させる方法は、わかりましたね。最後の3つめは、フレーム内に表示させるのではなく、全く新しい、 もう1つのブラウザを開かせそこに表示させる方法です。「link3.html」というページを新しいブラウザに表示 させて見ましょう。

タグはこうです。下記「TOP」の文字は必ず大文字にしてください。


<a href="link3.html" target="_TOP">リンクのボタン</a>


リンクのボタン


ねっ。新しいブラウザが開いたでしょ。よーくわかりましたね。それでは次いきます。


 表示させる基本のウインドウが同じ場合 


同じページのどのリンク先も、同一ウインドウに表示させてよい場合は、それぞれのリンクのタグに いちいち「target=・・・」と書く必要はありません。1つ書くだけで済んでしまうタグがあります。


<base target="表示させるウインドウ名">


これを1つ置くだけでOKです。<body>タグのあとに置いて下さい。


 フレームを認識しないブラウザのために 


フレームを認識しないブラウザのために、普通のページを貼り付けます。


<html>

  <head>
     <title>ページタイトル</title>
  </head>

     <frameset rows="50%,50%">
         <frame src="ページ名" name="ウインドウ名">
         <frame src="ページ名" name="ウインドウ名">

         <noframes>
             <body>
             フレームを認識しないブラウザのための普通ページの挿入
             </body>
         </noframes>

     </frameset>

</html>


<1> <noframes></noframes>の間に、フレームを認識しないブラウザのために 普通文の<body>以降を挿入します。
<2> こうすることにより認識しないブラウザでは、認識出来ないタグはすべて無視されますので、 <frameset>などのタグは無視され、フレームなしの通常ページとして認識されるのです。
<3> もし普通文の挿入をしなければフレームを認識出来ないブラウザでは、認識すべきもの がないということになり、そのページは、まったく表示されず、ないものとみなされますので注意。


 <frame src=・・・>タグへの指定の付け足し 


たとえば、こうです。


<frame src="ページ名.html" name="ウインドウ名" marginwidth=数字 marginheight=数字 scrolling="yes/no/auto" noresize>


<1> 「marginwidth=数字」・・・フレーム内の左側にスペースを作ります。
<2> 「marginheight=数字」・・・フレーム内の上部にスペースを作ります。
<3> 「scrolling="yes/no/auto"」・・・ページがフレーム内に収まりきらない場合スクロールバーを 付けるかどうかの指定です。「yes」はバーが付きますが、もしフレーム内に収まってもバーは付いたままです。 「no」はバーがつかずスクロール出来ません。「auto」はそのページの状況により対応します。ちなみに この指定がまったくない時は自動的に「auto」となっております。
<4> 「noresize」・・・この設定がないと、画面を見ている人は自由にフレームを広げたり、狭くしたりできます。 フレームを固定したい時はこの設定を書いて下さい。


 複雑な画面分割 


________________________________
|              |       |       |
|              |       |       |
|______________|       |_______|
|              |       |       |
|              |_______|       |
|              |       |       |
|______________|       |_______|
|              |       |       |
|              |       |       |
|______________|_______|_______|


上図のタグはこうです。


 <frameset cols="50%,25%,25%">


     <frameset rows="30%,40%,30%">
         <frame src=・・・>
         <frame src=・・・>
         <frame src=・・・>
     </frameset>


     <frameset rows="50%,50%">
         <frame src=・・・>
         <frame src=・・・>
     </frameset>


     <frameset rows="30%,40%,30%">
         <frame src=・・・>
         <frame src=・・・>
         <frame src=・・・>
     </frameset>


</frameset>


フレームについてはこれにて終了!消化しきれましたか?少々心配・・・。