HTMLのフレーム機能を使うと、複数の文書を、それぞれを独立したウィンドウあるいは子ウィンドウの形で同時に表示できます。複数表示によって、特定の情報を表示させたまま、他の表示をスクロールしたり書き換えたりするデザインが可能になります。例えば、大枠の文書ウインドウの中で、1つめの小枠をロゴ・バナーの固定表示用に使い、2つめを行き先選択メニューにし、3つめを本文表示用にして、長い文書の場合はスクロールしたり、2つめの枠でのメニュー選択に応じて書き換えたり、というような使い方ができます。
簡単な構成のフレームの例を見ましょう。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://www.w3.org/TR/REC-html40/frameset.dtd">
<HTML>
<HEAD>
<TITLE>簡単なフレーム設定文書</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>
<P>このフレーム設定文書は以下を含みます:
<UL>
<LI><A href="contents_of_frame1.html">いい感じのコンテンツ</A>
<LI><IMG src="contents_of_frame2.gif" alt="いい感じの画像">
<LI><A href="contents_of_frame3.html">また別のコンテンツ</A>
</UL>
</NOFRAMES>
</FRAMESET>
</HTML>
上記は次のように割り付けられたフレームとなって表示されるでしょう。
--------------------------------------- | | | | | | | Frame 1 | | | | | | | | |---------| | | | Frame 3 | | | | | | | | | | | Frame 2 | | | | | | | | | | | | | | ---------------------------------------
フレームを表示できないユーザエージェントや、フレームを使用しない設定になっているユーザエージェントの場合、NOFRAMES要素の内容が表示されます。
フレームの割り付けを示すHTML文書（フレーム設定文書 frameset document と呼びます）は、フレームを使わないHTML文書と異なるマークアップが施されます。通常のHTML文書は一組のHEAD部とBODY部から構成されますが、フレーム設定文書ではBODYの代わりにHEADとFRAMESETの組合せとなります。
フレーム設定文書のFRAMESET要素は、ユーザエージェントの文書表示領域の中でのフレーム割りを設定するものです。さらに、FRAMESET要素にはNOFRAMES要素を記し、フレーム機能をサポートしていない（あるいはフレーム表示機能をオフに設定されている）ユーザエージェントで当該文書を見た場合に表示させたい代替文書を記しておくことができます。
通常の文書でBODY要素中に記すような要素を、フレーム設定文書の最初のFRAMESET要素よりも先に記すことは許されず、もし記してしまった場合FRAMESET要素は無視されます。
<![ %HTML.Frameset; [
<!ELEMENT FRAMESET - - ((FRAMESET|FRAME)+ & NOFRAMES?) -- window subdivision-->
<!ATTLIST FRAMESET
%coreattrs; -- id, class, title --
%MultiLengths; #IMPLIED -- list of lengths,
default: 100% (1 row) --
%MultiLengths; #IMPLIED -- list of lengths,
default: 100% (1 col) --
onload %Script; #IMPLIED -- all the frames have been loaded --
onunload %Script; #IMPLIED -- all the frames have been removed --
>
]]>
属性の定義
FRAMESET要素は、文書表示領域を複数の矩形に分割するための設定を行うものです。
rows属性を設定すると、1つのFRAMESET要素中に含まれる水平方向フレームの数（行数）が決まります。cols属性を設定すると、垂直方向フレームの数（列数）が決まります。両方の属性を同時に設定することも可能で、その場合は升目状になります。
rows属性が設定されていない場合、各列の長さはページ高全体に及びます。cols属性が設定されていない場合、各行の幅はページ幅全体に及びます。どちらの属性も設定されていない場合、フレームはページサイズ全体をそのまま占めます。
各フレームは、列は左から右、行は上から下の順に生成されます。両方の属性 が設定されている場合、表示枠は一番上の行を左から右に、次に2行目を左か ら右に、というように生成されます。
第一の例は、表示面積全体を縦の長さを基準に2分割するものです(すなわち、上半分と下半分に分けます)。
<FRAMESET rows="50%, 50%"> ...フレーム定義続く... </FRAMESET>次の例は、3つの列を生成します。第2列は幅が250ピクセルに固定されていま す(たとえばサイズのわかっている画像を収める時に便利です)。第1列と第3列 は残りの空間を1:3、つまり25%と75%受け持ちます。
<FRAMESET cols="1*,250,3*"> ...フレーム定義続く... </FRAMESET>
次の例では、2×3[横2行縦3列]の升目ができます。
<FRAMESET rows="30%,70%" cols="33%,34%,33%"> ...フレーム定義続く... </FRAMESET>
次の例では、表示ウィンドウの高さが現在1000ピクセルあると仮定します。1行目のフレームには全体の高さの30%(300ピクセル)が割り当てられます。2行目のフレームの高さは、400ピクセルと設定されています。残りは300ピクセルで、これを残りの2つのフレームが分割します。4行目のフレームの高さは"2*"と設定されているので、高さが"*"(1*と同じ)である3行目のフレームの2倍の高さとなります。そこで、3行目のフレームの高さは100ピクセルで、4行目は高さ200ピクセルとなります。
<FRAMESET rows="30%,400,*,2*"> ...フレーム定義続く... </FRAMESET>
固定長の合計が実際の表示可能範囲と一致しない場合、ユーザエージェントは表示範囲に一致させる必要があります。合計が不足する場合、残った空間は各フレームの長さに比例して割り振り、合計が超過する場合、全体に対して設定された割合に沿って各フレームを削るべきです。
フレームは何層にでも入れ子にできます。
この例では、外側のFRAMESET要素が全体を縦3列に等分し、内側のFRAMESET要素が2つ目の列を高さの異なる2つの行に分けています。
<FRAMESET cols="33%, 33%, 34%">
...第一フレームの中身...
<FRAMESET rows="40%, 50%">
...第二フレーム第一段の中身...
...第二フレーム第二段の中身...
</FRAMESET>
...第三フレームの中身...
</FRAMESET>
データを複数のフレームで共有するには、そのデータをOBJECT要素に含めておきます。このOBJECT要素は、フレーム設定文書中のHEAD要素内に含めておき、id属性で名前を付けておく必要があります。このフレーム設定文書のフレーム内容となるすべての文書は、このid属性による識別子を参照することができます。
下記は、あるフレームの中のスクリプトが、フレーム設定文書のOBJECT要素を、どのように参照するのかを説明するものです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://www.w3.org/TR/REC-html40/frameset.dtd">
<HTML>
<HEAD>
<TITLE>HEADにOBJECTを含むframeset</TITLE>
<!-- この OBJECT は表示されません ! -->
<OBJECT id="myobject" data="data.bar"></OBJECT>
</HEAD>
<FRAMESET>
<FRAME src="bianca.html" name="bianca">
</FRAMESET>
</HTML>
<!-- bianca.htmlの内容 -->
<HTML>
<HEAD>
<TITLE>Biancaのページ</TITLE>
</HEAD>
<BODY>
...中略...
<P>
<SCRIPT type="text/javascript">
parent.myobject.myproperty
</SCRIPT>
...後略...
</BODY>
</HTML>
<![ %HTML.Frameset; [
<!-- reserved frame names start with "_" otherwise starts with letter -->
<!ELEMENT FRAME - O EMPTY -- subwindow -->
<!ATTLIST FRAME
%coreattrs; -- id, class, title --
%URI; #IMPLIED -- link to long description
(complements title) --
CDATA #IMPLIED -- name of frame for targetting --
%URI; #IMPLIED -- source of frame content --
frameborder (1|0) 1 -- request frame borders? --
%Pixels; #IMPLIED -- margin widths in pixels --
%Pixels; #IMPLIED -- margin height in pixels --
noresize (noresize) #IMPLIED -- allow users to resize frames? --
scrolling (yes|no|auto) auto -- scrollbar or none --
>
]]>
属性の定義
FRAME要素はある1つのフレームの内容とその表示方法を設定するものです。
当該フレームに最初に表示する内容は、src属性によって指定します。
このHTML文書は、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://www.w3.org/TR/REC-html40/frameset.dtd">
<HTML>
<HEAD>
<TITLE>フレーム設定文書</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 | | | | | | | | | | | ------------------------------------------
各々のフレームに指定の文書を読み込むよう記されています。
フレームの内容を、そのフレームの割り付けを定義している文書の中に書いてはいけません。
間違った用例（ILLEGAL EXAMPLE）:
以下のフレーム割り付け定義はHTMLとして正しくありません。なぜなら、第2フレームの初期内容がフレーム割り付けを定義している文書そのものの中に書かれているからです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd"> <HTML> <HEAD> <TITLE>フレーム設定文書</TITLE> </HEAD> <FRAMESET cols="50%,50%"> <FRAME src="contents_of_frame1.html"> <FRAME src="#anchor_in_same_document"> <NOFRAMES> ...中略... <H2><A name="anchor_in_same_document">ここが肝心</A></H2> ...後略... </NOFRAMES> </FRAMESET> </HTML>
次の例は、FRAME要素の装飾的な属性の用例を示すものです。フレーム1では常にスクロールを禁じ、フレーム2では、その内容（初期値としては1枚の画像ファイル）の周りに余白を取ると共に、サイズの変更を禁じています。フレーム3と4の間では枠線が描かれないよう指示しています。（特に指定がないため）フレーム1、2、3の間には枠線が描かれます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://www.w3.org/TR/REC-html40/frameset.dtd">
<HTML>
<HEAD>
<TITLE>フレーム設定文書</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>
注。 現時点で行われている各フレームの目印づけの方法については、附記B.8のフレームに関する注記をご覧下さい。
属性の定義
フレームに対してAと LINK）、イメージマップの要素（AREA）、フォーム要素（FORM）において設定可能です。
フレーム名としてどんな指定が可能かについては第6章16節「目標フレーム名」をご覧下さい。
以下の例は、目標名の利用により、フレームの内容がどのような変化を被るかについて説明するものです。まず最初に「frameset.html」によって全体のフレーム割り付けを設定します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd"> <HTML> <HEAD> <TITLE>フレーム設定文書</TITLE> </HEAD> <FRAMESET rows="50%,50%"> <FRAME name="fixed" src="init_fixed.html"> <FRAME name="dynamic" src="init_dynamic.html"> </FRAMESET> </HTML>
次に、上で設定されたフレーム「dynamic」に対し、その初期内容である「init_dynamic.html」からのリンクを設定します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE>特定のフレームを目標とするリンク</TITLE>
</HEAD>
<BODY>
...中略...
<P>それでは
<A href="slide2.html" target="dynamic">スライド 2</A> をどうぞ。
...中略...
<P>今度は
<A href="slide3.html" target="dynamic">スライド 3</A> をどうぞ。
</BODY>
</HTML>
2つのリンクのどちらをたどっても、呼び出された文書は「dynamic」フレーム内に表示され、「fixed」フレームの内容は最初の文書が表示されたままとなります。
フレーム割り付けに関わる文書群を丸ごとURIとして記録する方法が現存しないため、多くのユーザエージェントではフレーム文書をブックマークに登録することはできません。
同一文書内の多くのリンクが同じ目標を指し示している場合、1回target属性を指定すれば各リンク要素からは指定を省くことができます。その1回のBASE要素によって行います。
前述の例文を再度用いてみましょう。今回はBASE要素によって目標を指定し、各A要素からは取り除きます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <HTML> <HEAD> <TITLE>BASE要素で表示先を指定した文書</TITLE> <BASE href="http://www.mycom.com/Slides" target="dynamic"> </HEAD> <BODY> ...中略... <P>それでは <A href="slide2.html">スライド 2</A> をどうぞ。 ...中略... <P>今度は <A href="slide3.html">スライド 3</A> をどうぞ。 </BODY> </HTML>
ユーザエージェントは、リンク先文書が指定する表示フレームがどのフレームなのかを、次の優先順位で決定する必要があります。
ユーザエージェントは、target属性に従わずに表示する仕組みを提供しても構いません。
フレーム割り付け文書を作る場合には、フレームに対応していないユーザエージェントや、フレーム読み込み機能を使用しないよう設定されているユーザエージェントによる読み手のために、代替となる内容を提供する必要があります。
<![ %HTML.Frameset; [
<!ENTITY % noframes.content "(BODY) -(NOFRAMES)">
]]>
<!ENTITY % noframes.content "(%flow;)*">
<!ELEMENT %noframes.content;
-- alternate content container for non frame-based rendering -->
<!ATTLIST NOFRAMES
%attrs; -- %coreattrs, %i18n, %events --
>
NOFRAMES要素は、フレーム割り付けが機能しない場合に限り表示される内容を指定します。フレーム機能に対応しているユーザエージェントは、フレームを表示しない設定になっている場合、NOFRAMES要素で宣言された内容の表示のみ行ってください。フレーム機能を持たないユーザエージェントは、NOFRAMES要素の内容を常に表示してください。
NOFRAMES要素は、フレーム設定文書中のFRAMESET要素内に記します。
例えば次のように。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://www.w3.org/TR/REC-html40">
<HTML>
<HEAD>
<TITLE>NOFRAMES要素があるフレーム設定文書</TITLE>
</HEAD>
<FRAMESET cols="50%, 50%">
<FRAME src="main.html">
<FRAME src="table_of_contents.html">
<NOFRAMES>
<P>こちらに <A href="main-noframes.html">
フレーム不使用の文書</A> があります。
</NOFRAMES>
</FRAMESET>
</HTML>
フレームの割り付けをする際、longdesc属性を利用すると、非視覚系環境でのアクセシビリティを向上させられます。この属性は、当該フレームに関する補足説明を示します。この補足説明をする際、書き手は、説明すべき内容がフレーム自体であって個々のフレームにおける表示内容ではないことに注意して下さい。つまりフレーム内部のリソースは何度も書き換えられ得るものであり、当該フレームの初期内容に関する説明は書き換え後のリソースに対しては不適切なものとなり得るというわけです。また特に、フレーム割り付け文書においては、画像データを単独でフレーム内に表示させるような文書設計は避けるべきです。
次の例では左右2列のフレームが作られ、左側は目次、右側にはまず駝鳥の画像が表示されます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40"> <HTML> <HEAD> <TITLE>へたくそな設計のフレーム設定文書</TITLE> </HEAD> <FRAMESET cols="20%, 80%"> <FRAME src="table_of_contents.html"> <FRAME src="ostrich.gif" longdesc="ostrich-desc.html"> </FRAMESET> </HTML>
この例の注意点です。フレーム内に表示されている画像は、どのHTML要素からも独立していますから、代替テキストを指定するには longdesc属性を使うしか方法がありません。もし右側のフレームの内容が変わった場合（例えば、読み手が左側の目次からガラガラ蛇を選んだ場合）、フレーム内に新たに表示された内容については、文章による説明を得る方法がありません。
従って、フレーム割り文書を作る場合には、個々のフレームに直接画像データを割り付けるようなことは避ける必要があります。その代わりに、適切な代替テキストを用意したHTML文書の一部として画像データを供給するようにして下さい。次のように。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40"> <HTML> <HEAD> <TITLE>よい設計のフレーム設定文書</TITLE> </HEAD> <FRAMESET cols="20%, 80%"> <FRAME src="table_of_contents.html"> <FRAME src="ostrich-container.html"> </FRAMESET> </HTML>
<!-- ostrich-container.html の内容 --> <HTML> <HEAD> <TITLE>素速く力強い駝鳥</TITLE> </HEAD> <P> <OBJECT data="ostrich.gif" type="image/gif"> こんな駝鳥は旨いに違いない! </OBJECT> </HTML>
<!ELEMENT %flow;)* -- inline subwindow -->
<!ATTLIST IFRAME
%coreattrs; -- id, class, title --
%URI; #IMPLIED -- link to long description
(complements title) --
CDATA #IMPLIED -- name of frame for targetting --
src %URI; #IMPLIED -- source of frame content --
frameborder (1|0) 1 -- request frame borders? --
%Pixels; #IMPLIED -- margin widths in pixels --
%Pixels; #IMPLIED -- margin height in pixels --
scrolling (yes|no|auto) auto -- scrollbar or none --
%IAlign; #IMPLIED -- vertical or horizontal alignment --
%Length; #IMPLIED -- frame height --
%Length; #IMPLIED -- frame width --
>
属性の定義
他に使用可能な属性
OBJECT要素によってオブジェクトを挿入する方法に酷似しています。両者とも、あるHTML文書の中に他の文書を埋め込むことができ、元のテキストの回り込み・流し込みを引き起こす、など。
埋め込もうとする内容を記した文書の所在は、src属性で設定します。これに対してIFRAME要素の内容は、フレーム非対応ユーザエージェントやフレーム表示をしないよう設定されたユーザエージェントでのみ表示されます。
フレーム機能をサポートするユーザエージェントで次の文書を読み込んだ場合、これは枠線で囲まれた行内フレームを元文書内に作り出します。
<IFRAME src="foo.html" width="400" height="500"
scrolling="auto" frameborder="1">
[ご覧頂いているユーザエージェントはフレームに対応していないか、
フレーム文書を表示しないよう設定されているようです。
こちらの <A href="foo.html">関連文書</A> をご覧下さい。]
</IFRAME>
行内フレームは大きさの変更ができません。（そこで、 noresize属性は存在しません。）
注。 あるHTML文書を他のHTML文書へ埋め込むことは、OBJECT要素によっても可能です。詳しくは第13章5節「外部文書の埋め込みに関する注意」をご覧下さい。