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ファイルを指定します。

このフレームは以前は(2000年頃)個人のサイトでよく使われてましたが、最近はほとんど見かけませんね。

フレームを設定するファイルの記入例
<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の記入例は省略します。

●表示例はこちらです●

スポンサード・リンク