フレーム

フレームとは

フレームとは画面を縦横に分割して、それぞれのウィンドウに別の内容を表示させることです。
フレームを定義するタグは<FRAMESET>です。<BODY>タグは省略します。
フレームの大きさは、%かピクセルで指定します。

★画面を縦に分割するには

フレームを縦に分割する例題です。左側が20%右側が80%の縦割りをしてみます。準備として画面を表示するためのテストのページが2つ(test1.html test2.html) 作成してあるものとします。
"20%,80%"の部分は分割の割合です。%を数値で記入する場合は合計が100%になるようにします。 "20%,*"のように片方にアスタリスク(*)を入れると、残りの数値は自動で計算されます。

《設定例》
<HTML>
<HEAD>
<TITLE>フレームを縦に分割</TITLE>
</HEAD>

<FRAMESET COLS ="20%,80%">
<FRAME SRC="test1.html">
<FRAME SRC="test2.html">
</FRAMESET>

</HTML>


★画面を横に分割するには

画面を横に分割するにはROWSを使います。次の例題は15%と85%に横割したものです。

《設定例》
<HTML>
<HEAD>
<TITLE>フレームを横に分割</TITLE>
</HEAD>

<FRAMESET ROWS ="15%,*">
<FRAME SRC="test1.html">
<FRAME SRC="test2.html">
</FRAMESET>

</HTML>

★画面分割の線を消すには

次のタグでは縦割りの分割線が消えます。

<FRAMESET COLS ="20%,*"BORDER=0 FRAMEBORDER=0 FRAMESPACING=0>

★フレームの使えないブラウザへの対応

<NOFRAMEMES>></NOFRAMES>

フレームの使えるブラウザでは<NOFRAMES>で囲んだ部分は無視されます。

《設定例》
<NOFRAMES>
このページはフレーム機能を使えないブラウザではご利用できません。
</NOFRAME>

★フレーム内にリンクページを表示するには

<A HREF="URL" TARGET="オプション">

どのフレームに表示させるかは、<FRAME>タグのNAMEオプションで指定することができます。 また、アンダースコアで始ま次のる4つのオプションを指定することもできます。

《TARGET オプション》
_blank新しいウィンドウを作成しそこに表示する
_self今と同じフレームかウィンドウに表示する
_parentリンクタグのあったフレームの親フレームに表示する
_topすべてのフレームを破棄しウィンドウに表示する


次のサンプルでは、「frametest.html」「f_test1.html」「f_test2.html」「f_test3.html」の4つのファイルを使っています。 frametest.html を呼び出すと、f_test1.html と f_test2.html が左右のフレームに表示されます。 結果の画像は、目次ページとしている f_test1.html の中の「ページ3」をクリックして、右側のフレームに f_test3.html を表示させています。

《framtest.html のソース》
<HTML>
<HEAD>
<TITLE>縦分割のフレーム</TITLE>
</HEAD>

<FRAMESET COLS ="20%,80%">
<FRAME SRC="f_test1.html" NAME="hidari" >
<FRAME SRC="f_test2.html" NAME="migi">
</FRAMESET>

</HTML>


《f_test1.html の設定》
<CENTER> 目次<BR><BR>
<A HREF="f_test2.html" TARGET="migi">ファイル2</A><BR><BR>
<A HREF="f_test3.html" TARGET="migi">ファイル3</A><BR>
</CENTER>

《結果》


★スクロールバーを表示させるには

<frameset cols="30%,*">
<frame src="f_test1.html" scrolling="yes">  ← スクロールバーを表示します
<frame src="f_test2.html" scrolling="no">   ← スクロールバーを非表示にします
</frameset>

★フレームの境目を固定するには

フレームを区切る縦や横の境界線はマウスで左右上下に任意に移動できますが、これを固定して動かせない ようにすることができます。