前のページではフレームによる画面分割の基本的なことを書きました。
縦方向、横方向に２つに分割するための方法でした。
分割できるのは、２つとは限りません。
このページでは、２つ以上の分割をやってみましょう。
まずは、３つに分割してみましょう。
縦でも横でもかまいませんが、とりあえず、縦方向に！
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=x-sjis">
<title>フレームサンプル</title>
<frameset rows="33%,33%,34%";>
<frame src="frame1.html" name="ue">
<frame src="frame2.html" name="mannaka">
<frame src="frame3.html" name="sita">
</frameset>
</head>
<body>
</body>
</html>
|
赤い字のところで、（
rows="33%,33%,34%"）それぞれの幅を指定しますが、そこで３つ分の幅を指定しただけです。
そして、<frameset>〜</frameset>の間に、３つ分の表示したいＨＴＭＬファイルを指定しています。
実際に表示すると
これを横方向の分割にするには、rowsをcolsに変えればいいです。
◆
それでは、縦と横を同時に指定した場合はどうなるか？
縦に３分割、横に２分割の指定をしてみると・・
|
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=x-sjis">
<title>フレームサンプル</title>
<frameset rows="33%,33%,34%" cols="50%,50%">
<frame src="frame1.html" name="f1">
<frame src="frame2.html" name="f2">
<frame src="frame3.html" name="f3">
<frame src="frame4.html" name="f4">
<frame src="frame5.html" name="f5">
<frame src="frame6.html" name="f6">
</frameset>
</head>
<body>
</body>
</html>
|
実際に表示すると
赤い字の部分は、rows,colsのどちらを先に書いても同じです。
そして、青い部分が要注意です。
指定した順番によってどのフレームに表示されるのか、その場所が決まるからです。
このように縦と横を同時に指定した場合、指定した順番にこのように表示する場所が決まります。
”上の段から、左→右”の順番です。
それでは、
このページ（見て見て！）の様な分割はどのように指定するのかお話ししましょう。
まず、上下につまり縦に２分割です。
そして、下のフレームを横に２分割します。
つまり、
にして、さらに
通常の上下２分割ならば・・
<frameset rows="100,*">
<frame src="frame1.html" name="f1"><!--上のフレームのファイル-->
<frame src="frame2.html" name="f2"><!--下のフレームのファイル-->
</frameset>
この下のフレームのファイルを指定するところに、さらに横に２分割するフレームのタグを入れるのです。
<frameset rows="100,*">
<frame src="frame1.html" name="f1"><!--上のフレームのファイル-->
<frameset cols="180,*"><!--下のフレームを２分割-->
<frame src="frame2.html" name="f2">
<frame src="frame3.html" name="f3">
</frameset>
</frameset>
すると、こうなります。
◆
同じような方法で、縦に３分割、真ん中をこれまた３分割というのも出来ますね。
<frameset rows="100,*,100">
<frame src="frame1.html" name="f1">
<frameset cols="20%,60%,20%">
<frame src="frame2.html" name="f2">
<frame src="frame3.html" name="f3"><!--真ん中を３分割-->
<frame src="frame4.html" name="f4">
</frameset>
<frame src="frame5.html" name="f5">
</frameset>
そして、こうなります。
これで、フレームによるいろいろな分割が可能です。
次は、フレームタグの属性の話です。