勝手にHTML4.0講座 - フレーム

1.フレーム分割文書の概説

HTMLのフレーム機能を使うと、複数文書を別枠のウインドウや入れ子ウインドウの形で表示することができます。複数文書の併設が可能になることで、ある文書を固定表示にして他方をスクロールさせるといった文書設計ができます。

例えば、行き先選択メニューと本文表示用に分けることができます。簡単な構成のフレーム分割文書の例を見ましょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd">
<HTML>
<HEAD>
<TITLE>A simple frameset document</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAMESET rows="100, 200">
<FRAME src="contents_of_frame1.html">
<FRAME src="contents_of_frame2.gif">
</FRAMESET>
<FRAME src="contents_of_frame3.html">
<NOFRAMES>
This frameset document contains:
<UL>
<LI><A href="contents_of_frame1.html">Some neat contents</A>
<LI><IMG src="contents_of_frame2.gif" alt="A neat image">
<LI><A href="contents_of_frame3.html">Some other neat contents</A>
</UL>
</NOFRAMES>
</FRAMESET>
</HTML>

上記は次のようにフレーム分割されて表示されるでしょう。

 ---------------------------------------
|         |                             |
|         |                             |
| Frame 1 |                             |
|         |                             |
|         |                             |
|---------|                             |
|         |          Frame 3            |
|         |                             |
|         |                             |
|         |                             |
| Frame 2 |                             |
|         |                             |
|         |                             |
|         |                             |
|         |                             |
 ---------------------------------------

フレームに対応していない場合は、NOFRAMES要素の内容が表示されます。

フレーム構造を記すHTML文書（フレームセット文書）は、フレームを使わないHTML文書と異なるマークアップが施されます。通常のHTML文書は一組のHEAD部とBODY部から構成されますが、フレームセット文書ではHEADとFRAMESETの組合せとなります。

2.<FRAMESET>要素

開始タグ: 必要
終了タグ: 必要

属性 = 属性値	説明
rows = 長さリスト	フレーム枠の水平方向の分割を設定します。各フレーム幅をコンマ区切りで指定します。
cols = 長さリスト	フレーム枠の垂直方向の分割を設定します。各フレーム高さをコンマ区切りで指定します。
内在イベント	onload , onunlosd
その他	id , class , style , title

FRAMESET要素は、文書表示枠を複数の矩形に分割表示させるための設定を行うものです。 rows属性の設定はフレームの水平方向の分割を行うもので、cols属性は垂直方向の分割を行います。
次の例は表示面積全体を垂直方向に2分割します。（すなわち、上半分と下半分に別れます。）



<FRAMESET rows="50%,50%">
 ...フレーム定義続く...
</FRAMESET>

次の例は3つの横並びの枠を設定しています。 2番目の枠は250ピクセル幅の固定幅に指定されており、 1番目の枠と3番目の枠はその残りの部分を1:3の比率、すなわち25%対75%づつ分かち合います。



<FRAMESET cols="1*,250,3*">
 ...フレーム定義続く...
</FRAMESET>

次の例では、読み手が高さ1000ピクセルの文書窓でこれを表示すると仮定して考えましょう。１番目の枠は全体の30%(300ピクセル)。２番目の枠は400ピクセル。そして残りの300ピクセルを1:2で分け合い、３番目の枠が100ピクセル、４番目が200ピクセルになります。



<FRAMESET rows="30%,400,*,2*">
 ...フレーム定義続く...
</FRAMESET>

フレーム枠は何層にでも入れ子にできます。
下の例では、まず全体が縦に三等分されます。次に二つ目の枠が上下に二等分されます。



<FRAMESET cols="33%, 33%, 34%">
  ...第一フレームの中身...
  <FRAMESET rows="40%, 50%">
    ...第二フレーム第一段の中身...
    ...第二フレーム第二段の中身...
  </FRAMESET>
  ...第三フレームの中身...
</FRAMESET>

複数のフレーム枠で、OBJECT要素のデータを共有することができます。この場合フレームセット文書のHEAD要素の中にOBJECT要素を記し、id属性によって名前をつけておきます。このフレームセット文書が規定するフレーム枠内に表示される全ての文書は、id属性でデータを参照することができます。



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd">
<HTML>
<HEAD>
 <TITLE>This is a frameset with OBJECT in the HEAD</TITLE>
 <OBJECT id="myobject" data="data.bar"></OBJECT>
</HEAD>
<FRAMESET>
 <FRAME src="bianca.html" name="bianca">
</FRAMESET>
</HTML>

<!-- bianca.html -->
<HTML>
<HEAD>
 <TITLE>Bianca's page</TITLE>
</HEAD>
<BODY>
 ...中略...
<SCRIPT type="text/javascript">
parent.myobject.myproperty <!-- ここでデータを参照している -->
</SCRIPT>
 ...後略...
</BODY>
</HTML>

3.<FRAME>要素

開始タグ: 必要
終了タグ: なし

属性 = 属性値	説明
name = 文字列	フレームの名前を指定します。
longdesc = URI	title属性を補うための解説文書の所在を示します。
src = URI	フレーム枠を読み込んだときに、最初に表示させる文書(Webリソース)の所在を指定します。
noresize	ウィンドウサイズが変更不可能であることを示します。
scrolling = 制御コード	フレーム枠内のスクロール制御の方法を指定します。[auto,yes,no]
frameborder = ブール値	フレーム枠線をどのように表示するかを指定します。[0,1]
marginwidth = ピクセル数	フレーム枠と表示内容の間の、左右の余白の長さを指定します。
marginheight = ピクセル数	フレーム枠と表示内容の間の、上下の余白の長さを指定します。
target = フレームターゲット	どのフレーム枠に文書を表示させるかの、フレーム枠の名前を記します。
その他	id , class , style , title

FRAME要素はある1つのフレーム枠の内容とその表示方法を設定するものです。フレーム内に最初に表示する内容は、src属性によって指定します。



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd">
<HTML>
<HEAD>
 <TITLE>A frameset document</TITLE>
</HEAD>
<FRAMESET cols="33%,33%,33%">
 <FRAMESET rows="*,200">
  <FRAME src="contents_of_frame1.html">
  <FRAME src="contents_of_frame2.gif">
 </FRAMESET>
 <FRAME src="contents_of_frame3.html">
 <FRAME src="contents_of_frame4.html">
</FRAMESET>
</HTML>

次のようなフレーム分割を作り出し、各々の枠内に指定の文書を読み込むよう記されています。

 ------------------------------------------
|Frame 1     |Frame 3       |Frame 4       |
|            |              |              |
|            |              |              |
|            |              |              |
|            |              |              |
|            |              |              |
|            |              |              |
|            |              |              |
-------------|              |              |
|Frame 2     |              |              |
|            |              |              |
|            |              |              |
 ------------------------------------------

次の例では、FRAME要素の装飾的な属性の用例を示しています。フレーム1では常にスクロールを禁じ、フレーム2では余白を取った上でサイズ調整を禁じ、フレーム3と4の間では枠線が描かれないよう指示しています。



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd">
<HTML>
<HEAD>
 <TITLE>A frameset document</TITLE>
</HEAD>
<FRAMESET cols="33%,33%,33%">
 <FRAMESET rows="*,200">
  <FRAME src="contents_of_frame1.html" scrolling="no">
  <FRAME src="contents_of_frame2.gif"  marginwidth="10" marginheight="15" noresize>
 </FRAMESET>
 <FRAME src="contents_of_frame3.html" frameborder="0">
 <FRAME src="contents_of_frame4.html" frameborder="0">
</FRAMESET>
</HTML>

4.<NOFRAMES>要素

開始タグ: 必要
終了タグ: 必要

フレーム分割文書を作る場合には、フレームを表示できない(しない)人のために代替文章を提供する必要があります。そしてNOFRAMES要素は、フレーム分割が機能しない場合にのみ表示されます。 NOFRAMES要素は、フレームセット文書中のFRAMESET要素内に記します。



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40">
<HTML>
<HEAD>
 <TITLE>A frameset document with NOFRAMES</TITLE>
</HEAD>
<FRAMESET cols="50%, 50%">
 <FRAME src="main.html">
 <FRAME src="table_of_contents.html">
 <NOFRAMES>
  こちらに <A href="main-noframes.html"> フレーム不使用の文書</A> があります。
 </NOFRAMES>
</FRAMESET>
</HTML>

5.<IFRAME>要素

開始タグ: 必要
終了タグ: 必要

属性 = 属性値	説明
name = 文字列	フレームの名前を指定します。
longdesc = URI	title属性を補うための解説文書の所在を示します。
src = URI	フレーム枠を読み込んだときに、最初に表示させる文書(Webリソース)の所在を指定します。
scrolling = 制御コード	フレーム枠内のスクロール制御の方法を指定します。[auto,yes,no]
frameborder = ブール値	フレーム枠線をどのように表示するかを指定します。(ブール値は、１か０です)
width = 長さ	行内フレーム枠の幅を指定します。
height = 長さ	行内フレーム枠の高さ指定します。
marginwidth = ピクセル数	フレーム枠と表示内容の間の、左右の余白の長さを指定します。
marginheight = ピクセル数	フレーム枠と表示内容の間の、上下の余白の長さを指定します。
target = フレームターゲット	どのフレーム枠に文書を表示させるかの、フレーム枠の名前を記します。
align = 配置コード	表示するときに、水平方向での配置を指定します。[非推奨]
その他	id , class , style , title

IFRAME要素は、ブロックレベルの文章の中にフレーム枠を作り出すためのものです。埋め込もうとするリソースの所在は、src属性で設定します。また行内フレーム枠は大きさの変更ができません。

フレーム機能をサポートしている場合に次の文書を読み込んだ場合、フレーム枠で囲まれた行内フレーム枠を作り出します。
サポートされていない場合は、IFRAMEの内容が表示されます。



<IFRAME src="foo.html" width="400" height="500" scrolling="auto" frameborder="1">
 [ご覧頂いているユーザエージェントはフレームに対応していないか、
 フレーム文書を表示しないよう設定されているようです。
 こちらの <A href="foo.html">関連文書</A> をご覧下さい。]
</IFRAME>

★INDEX★