HOME >> HTML > 横に分割したフレームを作る

point 横に分割したフレームを作る

<FRAMESET cols="左のウィンドウ幅,右のウィンドウ幅" >
<FRAME src="左に表示したいHTMLファイル名(URL)">
<FRAME src="右に表示したいHTMLファイル名(URL)">
</FRAMESET>

フレームを使ってウィンドウを左右に分けるには、フレームを設定するHTMLファイルと左のウィンドウに表示させるHTMLファイル、そして右のウィンドウに表示させるHTMLファイルの最低3つのファイルが必要となります。フレームを設定するHTMLファイルとはフレームの設計図みたいなもので、このファイルにウィンドウの分割はどうするかとか、分割されたそれぞれのウィンドウ内に、どのHTMLファイルを表示するかなど、フレームの表示に関する設定を記入します。

フレームを設定するHTMLファイルの作り方ですが、これまではHTML文書の内容は<BODY>〜</BODY>の範囲内に記入しましたが、フレームを設定するHTMLファイルは<BODY>タグを使わず、その代わりに<FRAMESET>タグを使います。

フレームを左右に分割するには、この<FRAMESET>タグにcols属性をつけて、値に"左のウィンドウ幅,右のウィンドウ幅"を指定します。例えば左のウィンドウを画面の20%、右のウィンドウ幅を画面の80%に設定するには「cols="20%,80%"」のように記入します。
サイズの指定は、ピクセル値かパーセントもしくは*(アスタリスク)でします。 ピクセル値とパーセントでサイズを指定するのはもうおなじみと思いますが、ここで始めて登場した*(アスタリスク)を使えば、前でサイズ指定された残りの部分を指定することができます。例えばcols="20%,*"というように記入すると、画面の大きさを100%として左のウィンドウを20%と指定しているので、*でサイズ指定すれば右のウィンドウは80%になります。

つぎに<FRAME src="HTMLファイル名(URL)">を使って表示させたいHTMLを指定します。ここでは左右にウィンドウを分割するので、1つ目の<FRAME src="HTMLファイル名(URL)">で左側のウィンドウに表示させるHTMLファイルを指定します。つぎに2つ目の<FRAME src="HTMLファイル名(URL)">で右側のウィンドウに表示させるHTMLファイルを指定します。

フレームを設定するファイルの記入例
<HTML>
<HEAD>
<TITLE>横に分割したフレーム</TITLE>
</HEAD>
<FRAMESET cols="20%,80%">
<FRAME src="menu.htm">
<FRAME src="main.htm">
</FRAMESET>
</HTML>
説明

<FRAMESET cols="20%,80%">
で左のウィンドウを画面の20%、右のウィンドウを画面の80%に指定します。

つぎに<FRAME src="menu.htm">
で左のウィンドウにmenu.htmを表示させます。

そして<FRAME src="main.htm">
で右のウィンドウにmain.htmを表示させます。

左側のウィンドウに表示されるmenu.htmと、右側に表示されるmain.htmの記入例は省略します。

●表示例はこちらです●

スポンサード・リンク
Copyright ©2001〜2016 まさぼ〜 All Right Reserved