逆引きHTML-13.フレーム-5.複雑なフレーム割り

13. フレーム

13-5. 複雑なフレーム割り

●タグ

●構文

x1,x2,,,xn

：ピクセル指定か、全体を100%とした時の各フレーム高さを割合で指定

●説明

フレーム枠を縦横自由自在に分割します。割合で指定する場合、合計が100%にならなければなりません。また、"*"で指定すると、ブラウザが自動計算してくれます。ただし、指定は１つまでにしましょう。

３種類のサンプルを用意しています。それぞれ、格子状のもの、縦に割った１つのフレームセルを更に横で割ったもの、その逆です。各フレームセルに表示するHTMLはそれぞれ、"13-x-01.html"、・・・"13-x-06.html"としています。当然、Rows,Cols属性で指定した個数分のFRAME要素が必要です。

●HTML4.0

FRAMESET要素

●サンプル１

格子状にフレーム割り　実際に表示

１	２	３
４	５	６

13-05-1.html

<HTML>
<HEAD>
	<META Http-Equiv="Content-Type" Content="text/html;charset=Shift_JIS">
	<TITLE>複雑なフレーム割り</TITLE>
</HEAD>
<FRAMESET Rows="20%,20%,*" Cols="40%,*">
	<FRAME Src="./13-x-01.html">
	<FRAME Src="./13-x-02.html">
	<FRAME Src="./13-x-03.html">
	<FRAME Src="./13-x-04.html">
	<FRAME Src="./13-x-05.html">
	<FRAME Src="./13-x-06.html">
	<NOFRAMES>フレーム未対応ブラウザに対するHTML</NOFRAMES>
</FRAMESET>
</HTML>

●サンプル２

縦に割った１つのフレームセルを更に横で割る　実際に表示

１	４	５
２
３

13-05-2.html

<HTML>
<HEAD>
	<META Http-Equiv="Content-Type" Content="text/html;charset=Shift_JIS">
	<TITLE>複雑なフレーム割り</TITLE>
</HEAD>
<FRAMESET Cols="20%,20%,*">
	<FRAMESET Rows="20%,40%,*">
		<FRAME Src="./13-x-01.html">
		<FRAME Src="./13-x-02.html">
		<FRAME Src="./13-x-03.html">
	</FRAMESET>
	<FRAME Src="./13-x-04.html">
	<FRAME Src="./13-x-05.html">
	<NOFRAMES>フレーム未対応ブラウザに対するHTML</NOFRAMES>
</FRAMESET>
</HTML>

●サンプル３

横に割った１つのフレームセルを更に縦で割る　実際に表示

１	２	３
４
５

13-05-3.html

<HTML>
<HEAD>
	<META Http-Equiv="Content-Type" Content="text/html;charset=Shift_JIS">
	<TITLE>複雑なフレーム割り</TITLE>
</HEAD>
<FRAMESET Rows="20%,20%,*">
	<FRAMESET Cols="20%,40%,*">
		<FRAME Src="./13-x-01.html">
		<FRAME Src="./13-x-02.html">
		<FRAME Src="./13-x-03.html">
	</FRAMESET>
	<FRAME Src="./13-x-04.html">
	<FRAME Src="./13-x-05.html">
	<NOFRAMES>フレーム未対応ブラウザに対するHTML</NOFRAMES>
</FRAMESET>
</HTML>

●共通サンプル

13-x-01.html

<HTML>
<HEAD>
	<META Http-Equiv="Content-Type" Content="text/html;charset=Shift_JIS">
	<TITLE>フレーム</TITLE>
</HEAD>
<BODY>
	通常のHTML文書"13-x-01.html"
</BODY>
</HTML>

13-x-02.html

<HTML>
<HEAD>
	<META Http-Equiv="Content-Type" Content="text/html;charset=Shift_JIS">
	<TITLE>フレーム</TITLE>
</HEAD>
<BODY>
	通常のHTML文書"13-x-02.html"
</BODY>
</HTML>

13-x-03.html

<HTML>
<HEAD>
	<META Http-Equiv="Content-Type" Content="text/html;charset=Shift_JIS">
	<TITLE>フレーム</TITLE>
</HEAD>
<BODY>
	通常のHTML文書"13-x-03.html"
</BODY>
</HTML>

13-x-04.html

<HTML>
<HEAD>
	<META Http-Equiv="Content-Type" Content="text/html;charset=Shift_JIS">
	<TITLE>フレーム</TITLE>
</HEAD>
<BODY>
	通常のHTML文書"13-x-04.html"
</BODY>
</HTML>

13-x-05.html

<HTML>
<HEAD>
	<META Http-Equiv="Content-Type" Content="text/html;charset=Shift_JIS">
	<TITLE>フレーム</TITLE>
</HEAD>
<BODY>
	通常のHTML文書"13-x-05.html"
</BODY>
</HTML>

13-x-06.html

<HTML>
<HEAD>
	<META Http-Equiv="Content-Type" Content="text/html;charset=Shift_JIS">
	<TITLE>フレーム</TITLE>
</HEAD>
<BODY>
	通常のHTML文書"13-x-06.html"
</BODY>
</HTML>

逆引きHTMLリファレンス

13. フレーム

13-5. 複雑なフレーム割り