frame サンプル

フレームタグを使った分割の例

<frame> (サンプル)

　フレームタグを使った分割のサンプルです。よく使われそうなタイプを例示してみました。

　フレームサンプルの例文は、そのまま使用できます。ただし、ファイル名、フレームの幅、フレームの高さ、スクロールの有無は、適宜変更して下さい。

　ヘッダー部の<!DOCTYPE HTML .... Frameset//EN">は、フレームを使用する時に必ず記術しなければなりません。詳細は、「DOCTYPE宣言」のページの "3) Frameset" をご覧下さい。

　★ 使用例とブラウザでの表示

(フレームサンプル)

◆２分割タイプ


フレームのサンプル		ブラウザの表示イメージ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <html><head> <title>Frame Sample</title></head> <frameset rows="47,*"> <frame src="head.htm" scrolling=no> <frame src="main.htm" name=Mainframe> <noframes><body><p> このページは、フレームを使用しています。<br> フレーム未対応のブラウザをご利用の方は、<br> <a href="menu.htm">こちら</a>をご覧下さい。 </p></body></noframes> </frameset></html>		※画像をクリックすると、サンプルページを表示します｡以下、同じです。

以下、ヘッダー部とフッター部を省略します。 <frameset cols="125,*"> <frame src="menu.htm" scrolling=no> <frame src="main.htm" name=Mainframe> </frameset>

<frameset cols="*,125"> <frame src="main.htm" name=Mainframe> <frame src="comm.htm" scrolling=no> </frameset>

(フレームサンプル)

◆３分割タイプ


フレームのサンプル		ブラウザの表示イメージ

<frameset rows="47,"> <frame src="head.htm" scrolling=no> <frameset cols="125,"> <frame src="menu.htm" scrolling=no> <frame src="main.htm" name=Mainframe> </frameset> </frameset>		※画像をクリックすると、サンプルページを表示します｡以下、同じです。

<frameset rows="47,"> <frame src="head.htm" scrolling=no> <frameset cols=",125"> <frame src="main.htm" name=Mainframe> <frame src="comm.htm" scrolling=no> </frameset> </frameset>

<frameset rows=",45"> <frameset cols="125,"> <frame src="menu.htm" scrolling=no> <frame src="main.htm" name=Mainframe> </frameset> <frame src="foot.htm" scrolling=no> </frameset>

<frameset rows=",45"> <frameset cols=",125"> <frame src="main.htm" name=Mainframe> <frame src="comm.htm" scrolling=no> </frameset> <frame src="foot.htm" scrolling=no> </frameset>

(フレームサンプル)

◆４分割タイプ


フレームのサンプル		ブラウザの表示イメージ

<frameset rows="47,,45"> <frame src="head.htm" scrolling=no> <frameset cols="125,"> <frame src="menu.htm" scrolling=no> <frame src="main.htm" name=Mainframe> </frameset> <frame src="foot.htm" scrolling=no> </frameset>		※画像をクリックすると、サンプルページを表示します｡以下、同じです。

<frameset rows="47,"> <frame src="head.htm" scrolling=no> <frameset cols=",125"> <frameset rows="*,45"> <frame src="main.htm" name=Mainframe> <frame src="foot.htm" scrolling=no> </frameset> <frame src="comm.htm" scrolling=no> </frameset> </frameset>

<frameset cols="125,,125"> <frame src="menu.htm" scrolling=no> <frameset rows="47,"> <frame src="head.htm" scrolling=no> <frame src="main.htm" name=Mainframe> </frameset> <frame src="comm2.htm" scrolling=no> </frameset>

<frameset cols="125,"> <frameset rows="55%,"> <frame src="menu.htm" scrolling=no> <frame src="comm2.htm" scrolling=no> </frameset> <frameset rows="47,*"> <frame src="head.htm" scrolling=no> <frame src="main.htm" name=Mainframe> </frameset> </frameset>

(フレームサンプル)

◆５分割タイプ


フレームのサンプル		ブラウザの表示イメージ

<frameset rows="47,"> <frame src="head.htm" scrolling=no> <frameset cols="125,,125"> <frame src="menu.htm" scrolling=no> <frameset rows="*,45"> <frame src="main.htm" name=Mainframe> <frame src="foot.htm" scrolling=no> </frameset> <frame src="comm2.htm" scrolling=no> </frameset> </frameset>		※画像をクリックすると、サンプルページを表示します｡以下、同じです。

<frameset rows="47,"> <frame src="head.htm" scrolling=no> <frameset cols=",125"> <frameset rows=",45"> <frame src="main.htm" name=Mainframe> <frame src="foot.htm" scrolling=no> </frameset> <frameset rows="55%,"> <frame src="menu.htm" scrolling=no> <frame src="comm2.htm" scrolling=no> </frameset> </frameset> </frameset>

(フレームサンプル)

◆画面分割の不適切な事例


フレームのサンプル		ブラウザの表示イメージ

error.1 対応する<frame src="" がない場合 <frameset rows="47,"> <frame src="head.htm" scrolling=no> <frameset cols="125,"> <frame src="menu.htm" scrolling=no> </frameset> </frameset>		※サンプルページは有りません。以下、同じです。

error.2 アスタリスク()を使わなかった場合 <frameset rows="47,70"> … 表示高さは、47 対 70 に案分される <frame src="head.htm" scrolling=no> <frameset cols="125,"> <frame src="menu.htm" scrolling=no> <frame src="main.htm"> </frameset> </frameset>

error.3 ファイル名を間違えた場合 <frameset cols="125,"> <frameset rows="50%,"> <frame src="menu.htm" scrolling=no> <frame src="comm.htm" scrolling=no> </frameset> <frame src="orignal.htm"> … 右側フレームにエラーを表示する </frameset>