HTMLフレームによって,文書作成者は,独立のウィンドウ又はサブウィンドウであってよい,複数のビューで文書を表示することができる。複数のビューは,設計者に,ある情報を見えるように保つ方法を提供する。その一方で,他のビューはスクロールされるか又は置換される。例えば,同じウィンドウ内で,最初のフレームが静的バナーを表示し,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>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> <P>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文書とは異なる構成をもつ。標準的な文書は,一つのHEADセクション及び一つのBODYをもつ。フレーム集合文書は,一つのHEADをもち,一つのFRAMESETをBODYの代わりにもつ。
文書のFRAMESETセクションは,主たる利用者エージェントウィンドウにおけるビューのレイアウトを指定する。さらに,FRAMESETセクションは,NOFRAMES要素を包含し,フレームをサポートしない又はフレームを表示しないように構成されている利用者エージェントのために,代替内容を提供することができる。
最初のFRAMESET要素の前に,通常はBODY要素に置かれる要素が出現してはならない。出現した場合には,そのFRAMESETは無視する。
<![ %HTML.Frameset; [ <!ELEMENT FRAMESET - - ((FRAMESET|FRAME)+ & NOFRAMES?) -- window subdivision--> <!ATTLIST FRAMESET %coreattrs; -- id, class, style, title -- rows %MultiLengths; #IMPLIED -- list of lengths, default: 100% (1 row) -- cols %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属性を設定することによって,フレーム集合における水平方向に伸びる部分空間の個数を定義する。cols属性を設定することによって,上下方向に伸びる部分空間の個数を定義する。両属性とも格子を生成するために同時に設定してもよい。
rows属性が設定されない場合は,各列はページの全体の長さを拡張する。cols属性が設定されない場合は,各行はページ全体の幅を拡張する。いずれの属性も設定されない場合は,フレームはちょうどページのサイズと一致する。
フレームは,列に対しては右向きに,行に対しては下向きに生成される。両属性とも指定される場合は,表示は,一番上の行に右向きに,2番目の行に右向きに,などと生成される。
最初の例は,画面を上下方向に2分割,すなわち,上半分及び下半分に分割される。
<FRAMESET rows="50%, 50%"> ...the rest of the definition... </FRAMESET>
次の例は,列を三つ生成する。2番目の列は,250画素の固定幅をもつ。これは,例えば,既知のサイズで画像を保持するのに有用となる。最初の列は,(固定幅を除いた)残りの空間の25%となり,3番目の列は,同じ残りの空間の75%となる。
<FRAMESET cols="1*,250,3*"> ...the rest of the definition... </FRAMESET>
次の例は,部分空間から成る2x3の格子を生成する。
<FRAMESET rows="30%,70%" cols="33%,34%,33%"> ...the rest of the definition... </FRAMESET>
次の例に対しては,ブラウザウィンドウが現在1000画素の高さと仮定する。最初のビューには,高さ全体の30%,すなわち,300画素が割り当てられる。2番目のビューは,ちょうど400画素の高さに指定される。これによって,300画素が残るが,それを他の二つのフレームに分割する。4番目のフレームの高さは"2*"と指定されている。これは,3番目のフレームの高さの2倍を示す。3番目のフレームの高さは,単に"*"(1*と等価)となっている。そこで,3番目のフレームの高さは100画素となり,4番目は200画素となる。
<FRAMESET rows="30%,400,*,2*"> ...the rest of the definition... </FRAMESET>
合計が実際に利用可能な空間の100%とはならない絶対的な長さは,利用者エージェントによって調整されることが望ましい。利用可能な空間を下回る場合は,残りの空間は,各ビューに均等に割り当てるのがよい。利用可能な空間を上回る場合は,空間全体の指定割合に従って,各ビューを削減するのがよい。
フレーム集合は,どのレベルにも入れ子にしてよい。
次の例では,外側のFRAMESETが,利用可能な空間を3列に均等分割する。内側のFRAMESETは,その後,2番目の領域を2行に分割するが,高さは均等とはしない。
<FRAMESET cols="33%, 33%, 34%"> ...contents of first frame... <FRAMESET rows="40%, 50%"> ...contents of second frame, first row... ...contents of second frame, second row... </FRAMESET> ...contents of third frame... </FRAMESET>
文書作成者は,OBJECT要素を介してデータを取り込むことによって,幾つかのフレーム間でこのデータを共有してよい。文書作成者は,OBJECT要素をフレーム集合文書のHEAD要素に含め,id属性を用いてそれに名前を付けることが望ましい。フレーム集合におけるフレームの内容となる任意の文書は,この識別子を参照してよい。
次の例は,フレーム集合全体に対して定義されたOBJECT要素をスクリプトが参照する方法を示している。
<!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> <!-- This OBJECT is not rendered! --> <OBJECT id="myobject" data="data.bar"></OBJECT> </HEAD> <FRAMESET> <FRAME src="bianca.html" name="bianca"> </FRAMESET> </HTML> <!-- In bianca.html --> <HTML> <HEAD> <TITLE>Bianca's page</TITLE> </HEAD> <BODY> ...the beginning of the document... <P> <SCRIPT type="text/javascript"> parent.myobject.myproperty </SCRIPT> ...the rest of the document... </BODY> </HTML>
<![ %HTML.Frameset; [ <!-- reserved frame names start with "_" otherwise starts with letter --> <!ELEMENT FRAME - O EMPTY -- subwindow --> <!ATTLIST FRAME %coreattrs; -- id, class, style, title -- longdesc %URI; #IMPLIED -- link to long description (complements title) -- name CDATA #IMPLIED -- name of frame for targetting -- src %URI; #IMPLIED -- source of frame content -- frameborder (1|0) 1 -- request frame borders? -- marginwidth %Pixels; #IMPLIED -- margin widths in pixels -- marginheight %Pixels; #IMPLIED -- margin height in pixels -- noresize (noresize) #IMPLIED -- allow users to resize frames? -- scrolling (yes|no|auto) auto -- scrollbar or none -- > ]]>
属性定義
他の箇所で定義される属性
FRAME要素は,単一フレームの内容及び見かけを定義する。
src属性は,フレームが含む初期文書を指定する。
HTML文書の例を次に示す。
<!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 | | | | | | | | | | | ------------------------------------------
これによって,利用者エージェントは,各ファイルを分離されたビューにロードすることになる。
フレームの内容は,フレームの定義と同じ文書の中に存在してはならない。
不当な例
次のフレーム集合定義は,正当なHTMLではない。これは,2番目のフレームの内容が,フレーム集合と同じ文書の中に存在することによる。
<!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="50%,50%"> <FRAME src="contents_of_frame1.html"> <FRAME src="#anchor_in_same_document"> <NOFRAMES> ...some text... <H2><A name="anchor_in_same_document">Important section</A></H2> ...some text... </NOFRAMES> </FRAMESET> </HTML>
次の例は,装飾的なFRAME属性の使用を示す。フレーム1はスクロールバーを許容しないように指定している。フレーム2は,その内容(初期値は画像ファイル)の周囲に空白を残し,そのフレームはサイズ変更可能ではない。フレーム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>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>
備考 フレームのターゲットを決定する際の現在の実際的方法に関する情報については,附属書のフレームに関する備考を参照すること。
属性定義
認識されるフレーム名に関する情報については,ターゲットフレーム名を参照すること。
次の例は,ターゲットがフレームの内容の動的な修正を許容する方法を示す。ここでは,まず,文書frameset.htmlの中でフレーム集合を定義する。
<!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 rows="50%,50%"> <FRAME name="fixed" src="init_fixed.html"> <FRAME name="dynamic" src="init_dynamic.html"> </FRAMESET> </HTML>
次に,init_dynamic.htmlの中で,"dynamic"と命名されたフレームにリンクする。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <HTML> <HEAD> <TITLE>A document with anchors with specific targets</TITLE> </HEAD> <BODY> ...beginning of the document... <P>Now you may advance to <A href="slide2.html" target="dynamic">slide 2.</A> ...more document... <P>You're doing great. Now on to <A href="slide3.html" target="dynamic">slide 3.</A> </BODY> </HTML>
いずれかのリンクを活動化することによって,"dynamic"と命名されたフレームの中の新しい文書を開く。その一方で,"fixed"という他のフレームがその初期内容を保持する。
備考 フレーム集合定義は決して変化しないが,フレーム集合定義の複数フレームの一つの内容は変化できる。一度フレームの初期内容が変化すると,フレーム集合定義は,そのフレームの現在の状態を反映しなくなる。
現在のところ,一つのURIでフレーム集合の全状態を符号化する方法は存在しない。そのため,利用者エージェントの多くは,利用者がブックマークをフレーム集合に割り当てることを許可していない。
同じ文書の中のリンクの多くが同じターゲットを指し示す場合,一度そのターゲットを指定して,各要素のtarget属性を用いずに済ますことが可能である。これは,BASE要素のtarget属性を設定することで行える。
先の例に戻る。この場合は,ターゲット情報を,BASE要素で定義し,A要素からは削除することによって,簡単化している。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <HTML> <HEAD> <TITLE>A document with BASE with a specific target</TITLE> <BASE href="http://www.mycom.com/Slides" target="dynamic"> </HEAD> <BODY> ...beginning of the document... <P>Now you may advance to <A href="slide2.html">slide 2.</A> ...more document... <P>You're doing great. Now on to <A href="slide3.html">slide 3.</A> </BODY> </HTML>
利用者エージェントは,次の優先順位に従って,リンク資源をロードするターゲットフレームを決定することが望ましい。ただし,優先順位の高いものから低いものへと列挙する。
利用者エージェントは,target属性を上書きする機構を利用者に提供してもよい。
文書作成者は,フレームをサポートしないか,又はフレームを表示しないように構成されている利用者エージェントに代替内容を提供することが望ましい。
<![ %HTML.Frameset; [ <!ENTITY % noframes.content "(BODY) -(NOFRAMES)"> ]]> <!ENTITY % noframes.content "(%flow;)*"> <!ELEMENT NOFRAMES - - %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>A frameset document with NOFRAMES</TITLE> </HEAD> <FRAMESET cols="50%, 50%"> <FRAME src="main.html"> <FRAME src="table_of_contents.html"> <NOFRAMES> <P>Here is the <A href="main-noframes.html"> non-frame based version of the document.</A> </NOFRAMES> </FRAMESET> </HTML>
longdesc属性によって,文書作成者は,非視覚的利用者エージェントを使用する人間にフレーム文書をよりアクセスし易くすることができる。この属性は,フレームの長記述を提供する資源を指定する。文書作成者は,フレームに関連する長記述が,フレームの内容ではなく,フレームに添付される点に注意するほうがよい。内容は,時間が経つと変化することがあるので,初期の長記述がフレームの時間が経った後の内容に適切でなくなることも多い。特に,文書作成者は,フレームの唯一の内容として画像を取り込まない方がよい。
次のフレーム集合文書は,二つのフレームを記述している。左のフレームは目次を含み,右のフレームは最初はダチョウの画像を含んでいる。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40"> <HTML> <HEAD> <TITLE>A poorly-designed frameset document</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>A well-designed frameset document</TITLE> </HEAD> <FRAMESET cols="20%, 80%"> <FRAME src="table_of_contents.html"> <FRAME src="ostrich-container.html"> </FRAMESET> </HTML>
<!-- In ostrich-container.html: --> <HTML> <HEAD> <TITLE>The fast and powerful ostrich</TITLE> </HEAD> <P> <OBJECT data="ostrich.gif" type="image/gif"> These ostriches sure taste good! </OBJECT> </HTML>
<!ELEMENT IFRAME - - (%flow;)* -- inline subwindow --> <!ATTLIST IFRAME %coreattrs; -- id, class, style, title -- longdesc %URI; #IMPLIED -- link to long description (complements title) -- name CDATA #IMPLIED -- name of frame for targetting -- src %URI; #IMPLIED -- source of frame content -- frameborder (1|0) 1 -- request frame borders? -- marginwidth %Pixels; #IMPLIED -- margin widths in pixels -- marginheight %Pixels; #IMPLIED -- margin height in pixels -- scrolling (yes|no|auto) auto -- scrollbar or none -- align %IAlign; #IMPLIED -- vertical or horizontal alignment -- height %Length; #IMPLIED -- frame height -- width %Length; #IMPLIED -- frame width -- >
属性定義
他の箇所で定義される属性
行内に挿入される情報は,この要素のsrc属性によって指定される。一方で,IFRAME要素の内容は,フレームをサポートしないか,又はフレームを表示しないように構成される利用者エージェントだけが表示するのがよい。
フレームをサポートする利用者エージェントに対して,次の例は,テキストの中央に枠線によって囲まれた行内フレームを置く。
<IFRAME src="foo.html" width="400" height="500" scrolling="auto" frameborder="1"> [Your user agent does not support frames or is currently configured not to display frames. However, you may visit <A href="foo.html">the related document.</A>] </IFRAME>
行内フレームはサイズ変更されない。そこで,noresize属性をとらない。