フレームにわけよう

横割りフレームの作り方
横2つに分かれたフレームのページを作るには、htmlファイルが3つ必要になります。
まずは、フレームの上の部分に表示させたいページを作ってください。
今までに作っておいたものでも構いません。
ここでは、仮に　page1.html　という名前にしておきます。
次に、フレームの下の部分のページを同様に作ります。
この部分は、page2.html　という名前にします。

ここまでは、今までページを作ってきた方法と何も変わりません。


さて、次にいよいよフレームを設定するhtmlファイルを作成します。
仮にここでは、frame_set.htmlとします。
<html>
<head>
<title>フレームの元締め</title>
</head>
<frameset rows="20%,80%">
<frame src="page1.html" name="page1">
<frame src="page2.html" name="page2">
</frameset>
</html>


これで、横割りフレームのページが出来たはずです。
作成したframe_set.htmlを見てみましょう。
上下2つに分かれたページが出来ていましたか？


<frameset rows="20%,80%">

5行目のrowsの部分が、横割りフレームにします、という指定になっています。
縦割りの場合は、colsを指定します。
また、20%、80%となっているのは、上下のフレームの割合です。
色々な数字を入れて試してみてください。

<frame src="page1.html" name="page1">
<frame src="page2.html" name="page2">
これは、page1.htmlファイルを上の部分に表示させます。
そして、上の部分のフレームの名前はpage1とします。という意味です。
次の1行は、下の部分にpage2.htmlを表示させます。
そして、下の部分のフレームは、page2という名前にしますという意味です。


さて、このname="page1"の部分、すなわち、「このフレームの名前はpage1ですよ」という部分ですが、
リンクを貼る時に役立ちます。
例えば、フレーム上部にpage3.htmlへのリンクを貼りたいとします。
リンク先は、同じフレーム上部です。
その場合、page1.htmlファイルに、<a href="page3.html">Page3へリンク</a>
と記述します。

では、フレーム上部からフレーム下部へのリンクはどうしたらいいのでしょうか。
（フレーム上部に貼られたリンクをクリックした時、フレームの下のページが変わるということです。
よく、上の部分にメニュー一覧があって、例えばBBSというリンクをクリックした時、下にBBSのページが現れるというやつです。）

この時にこそ、フレームにつけた名前が役立つのです。
フレーム上部にpage3.htmlファイルへのリンクを貼ります。
リンク先は、フレームの下部です。
この場合は、<a href="page3.html" target="page2">Page3へリンク</a>
となります。
page3.htmlは、page2と名づけられたフレームで表示してくださいね。というような意味になります。
targetを指定しないと、同じフレームに表示されます。


横割りフレームの動きを確かめたいという方は、こちらをダウンロードして見てみてください。
内容はどちらも同じです。

内容：
frame_set.html
page1.html
page2.html
page3.html
page4.html
以上


frame1.zip　　　　frame1.lzh




解凍ソフトがないという方は、Lhacaを使ってみてはどうでしょうか？
解凍したいファイルを、ドラッグ＆ドロップでアイコン上に持っていくだけで、
解凍してくれるソフトです。使いやすいですよ！

圧縮・解凍ソフトLhaca





縦割りフレームの作り方
<html>
<head>
<title>フレームの元締め</title>
</head>
<frameset cols="20%,80%">
<frame src="page1.html" name="page1">
<frame src="page2.html" name="page2">
</frameset>
</html>


横割りフレームと同じ方法で作ります。
ただ1つ違うのが、横割りはrowsでしたが、縦割りはcolsを指定するところです。





Next