フレーム

　フレームとはブラウザ画面をいくつかの領域(この領域をフレームと言う)に分割して複数のページを表示する機能です。

　とりあえず作ってみましょう。 まず、次のようなhtmlファイルを作成してブラウザで表示してみてください。 left.htmlとright.htmlは違う名前でもいいので適当に用意してください。 あと、<BODY>〜</BODY>タグは必要ありません。

<HTML>
<HEAD>
<TITLE>フレームのサンプル</TITLE>
</HEAD>
<FRAMESET COLS="30%,70%">
 <FRAME NAME="left" SRC="left.html">
 <FRAME NAME="right" SRC="right.html">
</FRAMESET>
</HTML>


　ブラウザが左右２つに分割され、左にleft.html、右にright.htmlが表示されるはずです。 タイトルにはここで設定したものが表示され、left.html,right.htmlに設定したタイトルは表示されません。

　フレームを使用するためには<FRAMESET>〜</FRAMESET>タグを使用します。

　COLSで各フレームのサイズを指定します。 上の例ではブラウザのサイズを100%としたときの割合です。 数値に%をつけない場合はピクセルサイズでの指定になります。 また、COLSの代わりにROWSを使用すると上下に分割することができ、 同時に使うと上下左右に分割することもできます。 サイズは分割したい数だけ「,」で区切って左から右(ROWSの場合は上から下)の順で設定します。 数値の代わりに「*」を使うと残りの部分がそのフレームに割り当てられます。 例えばCOLS="300,*"とすると左のフレームサイズは300ピクセル、 右のフレームにはブラウザのサイズから300ピクセル引いた分のサイズになります。 全部「*」にするとフレームの数だけ等分割されます。

　<FRAME>タグで各フレームを設定します。 順番は左から右、次に上から下です。 上の例の場合、一つ目のFRAMEタグが左のフレーム、二つ目が右のフレームを設定しています。 NAME="識別名"でフレームを識別するために任意の名前をつけ、 SRC="表示するページ"でそのフレームに表示するページを設定します。


　さて、デフォルトでは各フレーム内ページからのリンク先はそのフレーム内に表示されます。 これをあるフレームからのリンク先を違うフレームに表示したり、フレームを解除して全画面に表示するようにすることができます。 フレーム識別名はタグのNAMEオプションで設定した名前です。

<A HREF="リンク先" TARGET="フレーム識別名">別フレームに表示</A>
<A HREF="リンク先" TARGET="_top">フレーム解除</A>



　ROWS、COLSを同時に使用して上下左右に分割できることは紹介しましたが、 これだと偶数個にしか分割できませんし、 同じ行のフレームは全て同じ高さ、同じ列のフレームは全て同じ幅にしかできません。 奇数個に分割したり、高さや幅をいろいろなサイズにするには分割したフレームをさらに分割します。 例として、左右に分割して右のフレームだけをさらに上下に分割してみましょう。

<FRAMESET COLS="30%,70%">
 <FRAME NAME="left" SRC="left.html">
 <FRAMESET ROWS="200,*">
  <FRAME NAME="up" SRC="up.html">
  <FRAME NAME="down" SRC="down.html">
 </FRAMESET>
</FRAMESET>


　左にleft.html、右上にup.html、右下にdown.htmlが表示されます。 右フレームを設定する<FRAME>タグの代わりに<FRAMESET>〜</FRAMESET>タグを用いています。 この例では、右上フレームの横幅がブラウザの70%で縦が200ピクセル、 右下フレームの横幅もブラウザの70%で縦のサイズには残りの部分が割り当てられます。 このように<FRAMESET>〜</FRAMESET>タグを階層的に使うことによって、 ブラウザを自由自在に分割できます。


　最後に、その他のオプションを紹介します。

<FRAMESET COLS="数,数,…" ROWS="数,数,…"
 BORDER="数" BORDERCOLOR="色" FRAMEBORDER="数">
<FRAME NAME="文字列" SRC="文字列"
 SCROLLING="文字列" MARGINHEIGHT="数" MARGINWIDTH="数"
 NORESIZE>


　まずFRAMESETのオプションから。 前述の通り、COLSは左右分割の幅、ROWSは上下分割の高さです。 BORDERは枠の太さをピクセル数で指定し、BORDERCOLORは枠の色を設定します。 FRAMEBORDERは0なら枠を非表示、1(デフォルト)なら表示します。
　次にFRAMEのオプションです。 こちらも前述の通り、NAMEでフレーム識別名、SRCで表示するページを指定します。 SCROLLINGはyesならスクロールバーを常に表示、noなら常に非表示、 auto(デフォルト)ならページ全体を表示できないときは自動的に表示されます。 MARGINHEIGHTで上下の余白(枠とコンテンツの間のサイズ)、 MARGINWIDTHで左右の余白をピクセル数で指定します。 NORESIZEを設定するとブラウザ上でフレームのサイズを変更できなくします(枠を動かせない)。