フレーム

フレーム付きのページは次のようにして作ります.

Browser - [Frame]
File Edit View




フレーム
left



.




フレーム
right



.
Document: Done
<HTML>
<HEAD>
<TITLE>Frame</TITLE>
</HEAD>
<FRAMESET COLS="60%,*">

<FRAME SRC="fl.html" NAME="left">
<FRAME SRC="fr.html" NAME="right">

</FRAMESET>
</HTML>

右上に挙げたソースが,フレームの配置を決めます.このとき,<BODY>タグは使わないことに注意してください.代りに <FRAMESET> タグが入ります.オプションの COLS="60%,*" の意味は,コラムを2段組にして,左側のフレームを全体の 60% の幅,右側のフレームは残り(つまり 40%)の幅にする,ということです.
他のタグと同様に % ではなく,ピクセルで指定することも出来ます.
次の <FRAME> タグで,それぞれのフレームに表示する内容を指定します.SRC オプションで表示する HTML ファイル(ここでは fl.htmlfr.html)を指定します.NAME オプションは,フレームの名前です.後で説明します.


フレームは上下にも仕切ることが出来ます.ついでにネストさせてみましょう.

Browser - [Frame]
File Edit View
フレーム
lup




フレーム
right



.
フレーム
ldowm
Document: Done
<HTML>
<HEAD>
<TITLE>Frame</TITLE>
</HEAD>
<FRAMESET COLS="60%,*">

<FRAMESET ROWS="50%,*">
<FRAME SRC="flu.html" NAME="lup">
<FRAME SRC="fld.html" NAME="ldown">
</FRAMESET>

<FRAME SRC="fr.html" NAME="right">

</FRAMESET>
</HTML>

上下に仕切る場合は ROWS オプションです.
<FRAMESET> タグは,いくつでも入れ子にすることが出来ますが,せいぜいこの例のような3つのフレームに分けるまでが限界ではないでしょうか? 見る側からしても,管理する側からしても,あまりたくさんのフレームがあるのは面倒です.


フレーム越しにハイパーリンクを張る方法は,リンクのところで説明しています.


フレームの中にフレームを持った HTML ファイルを置く

それぞれのフレームに表示したい HTML ファイルを指定するとき,フレーム指定を含む HTML ファイルを指定することも出来ます.このリファレンスは,既に左右に区切られていますが,右側のソースにフレーム指定を含む HTML ファイルを置いてみます.ここ(1)をクリックしてみてください.右上には 「はじめに」,右下には 「フレーム」 つまりこの文章が表示されます.右側に置くソースはこのようになっています.

<HTML>
<HEAD><TITLE>A Frame in A Frame</TITLE>
</HEAD>
<FRAMESET ROWS="50%,*">
<FRAME SRC="preface.html" NAME="rtop">
<FRAME SRC="frame.html#frminfrm" NAME="rdown">
</FRAMESET>
</HTML>

表示された 「フレーム」 で,もう一回クリックすると,またフレームが区切られます.何回でも出来るようです.そうなると <FRAMESET ROWS="50%,*"> で,半分の半分の半分の半分の‥‥‥ってなことをしたらどうなるのか,気になります.でも,これはできないようです.無限ループになってしまいますから,当然ですね.

ところで,こうやってフレームを入れ子にしたとき,フレーム越しにリンクを張れるのでしょうか?
上のフレーム(「はじめに」 が表示されているフレーム)は,リンクのところで説明したように,そしてここ(2)をクリックして分かるように,

<A HREF="link.html" TARGET="rtop">ここ</A>

で可能です.上にあった ここ(1) をクリックしていなければブラウザは新しいウィンドウを開きます.

左の目次のフレーム名は contents なので,同様に TARGET 指定をすれば制御できます.ここ(3)をクリックしてみてください.つまり,いくらフレームを入れ子にしても,階層的な構造にはなっていないということです.フレームの名前は重複させることも出来るので,2つのフレームを一度に更新することも出来ます(同じ内容ですから,あまりうれしくありませんが).