目次
HTMLのフレームを使うと、著者は、文書を複数のビューで提供できる。ビューは各々独立したウインドウあるいは子ウインドウであってよい。 ビューを複数にすることで、ある情報を表示させておきながら他の情報をスクロールしたり置換えたりするような文書設計が可能になる。 例えば、同じウインドウの中で、1つめのフレームが固定のバナーを表示し、2つめのが案内メニュー、3つめが主文書であってスクロールされたり2つめのメニューによって内容が置換えられたりする、といった具合である。
次に、簡単なフレーム設定の文書を例示する。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/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文書は、フレーム設定文書と呼ばれ、フレームを含まないHTML文書とは異なるマーク付けが為される。 通常のHTML文書は1つの HEAD部と1つのBODY部から構成される。 フレーム設定文書には、1つの HEADと、 BODYの位置を占める1つのFRAMESETとが存在する。
フレーム設定文書の FRAMESET部は、ユーザエージェントの主ウインドウにおける各ビューの割り付けを指定する。 さらにまた、FRAMESET部は NOFRAMES要素を包含して 、フレームをサポートしていないユーザエージェントや使わないよう設定されているユーザエージェントのための代替内容を提供することもできる。
通常 BODY要素にあるような要素が、最初の FRAMESET要素よりも前に 出現してはならず、出現した場合は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属性を設定すると、1つのフレーム設定文書における、水平方向の子領域数が定まる。 cols属性が設定されると、垂直方向の子領域数が定まる。双方を同時に設定することも可能で、この場合格子が生成される。
rows属性が設定されない場合、各列の長さはページ全体の長さに及ぶ。 cols属性が設定されない場合、各行の幅はページ全体の幅に及ぶ。双方とも設定されていない場合、そのフレームはページ全体のサイズをそのまま占める。
各フレームは、列については左から右の順に生成され、行については上から下の順に生成される。 両方の属性が設定される場合、ビューは第1行の左から右、第2行の左から右…、という順で生成される。
次の最初の例は、スクリーンを垂直方向に2分割する。すなわち、上半分と下半分に分ける。
<FRAMESET rows="50%, 50%"> …残りの定義… </FRAMESET>
次の例は、3つの列を生成する。2番目の列は幅が250ピクセルに固定されている。これは大きさが判っている画像を納めるのに便利である。最初の列は、残りの空間の25%を受け取り、3番目の列は75%を受け取る。
<FRAMESET cols="1*,250,3*"> …残りの定義… </FRAMESET>
次の例では、2行3列の子領域が成す格子が生成される。
<FRAMESET rows="30%,70%" cols="33%,34%,33%"> …残りの定義… </FRAMESET>
次の例では、ブラウザウインドウの現在の高さが1000ピクセルであると仮定する。 最初のビューは、全高の30%すなわち300ピクセルが割り当てられる。2番目のビューは、ちょうど400ピクセルの高さが指定されている。これにより、残り2つのフレームが分け合うスペースは300ピクセルである。 4番目のフレームの高さは「2*」と指定されているため、「*」とだけ指定(これは「1*」と等価)されている3番目のフレームの、2倍の高さになる。したがって、3番目のフレームの高さは100ピクセル、4番目の高さは200ピクセルとなる。
<FRAMESET rows="30%,400,*,2*"> …残りの定義… </FRAMESET>
実際に利用可能な空間に対して、合計が100%とならないような絶対長指定は、ユーザエージェントが調整しなければならない。 指定の合計が100%に満たない場合、残った空間は各ビューに比例配分し、指定の合計が100%を超える場合は各ビューの指定長に比例して削除しなければならない。
フレーム設定は、何階層にでも入れ子にできる。
次の例では、外側のFRAMESET要素が、利用可能空間全体を縦3列に等分している。内側のFRAMESET要素は、2つ目の列を高さが異なる2つの行に分けている。
<FRAMESET cols="33%, 33%, 34%"> …最初のフレームの内容… <FRAMESET rows="40%, 50%"> …2つ目のフレームの第1行の内容… …2つ目のフレームの第2行の内容… </FRAMESET> …3つ目のフレームの内容… </FRAMESET>
著者は、あるデータを1つの OBJECT要素に含めることで、複数のフレームでそのデータを共有することができる。 この場合著者は OBJECT要素をフレーム設定文書のHEAD要素に含め、id属性で命名しておく必要がある。 このフレーム設定文書のフレーム内容となるすべての文書は、このid識別子を参照できる。
次の例は、フレーム設定文書全体に定義された OBJECT要素を、スクリプトがどのように参照できるかを示すものである。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <HTML> <HEAD> <TITLE>HEADにOBJECTを含むフレーム設定</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, 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要素は、ある1つのフレームの内容と見かけとを定義する。
src属性は、フレームが含む初期内容を指定する。
次のHTML文書は:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/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 | | | | | | | | | | | ------------------------------------------
分離されたビューに各ファイルを読み込ませるよう、ユーザエージェントに働きかける。
フレームの内容は、フレームを定義する文書と同じ文書に存在してはならない。
不正な用例:
次のフレーム設定は正当なHTMLではない。なぜなら2番目のフレームの内容がフレーム設定文書に記されているからだ。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/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では、画像の周囲にマージンを取り、フレームのサイズ変更を禁じている。フレーム3と4の間には境界線が引かれない。境界線は、デフォルトにより、フレーム1、2、3の間には引かれる。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/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>
注意。 目標フレームの決定方法について現在行なわれている慣行の情報は、附属書の フレームに関する注意を参照されたい。
属性定義
name属性によってフレームに名前をつけることで、著者はこのフレームを他の要素で定義するリンクの「目標」とすることができる。 target属性は、リンクを生成する要素 (A要素、 LINK要素)、イメージマップ (AREA要素)、並びにフォーム (FORM要素) で設定できる。
認定されているフレーム名については、目標フレーム名の項を参照されたい。
次の例は、目標名を定めることで、フレーム内容がどのような動的変更を受け入れるかを示すものである。まずはじめに、 frameset.htmlでフレーム設定を行なう。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/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>
続いて、init_dynamic.htmlで、「dynamic」という名のフレームにリンクする。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/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>
どちらのリンクをアクティブにしても、「dynamic」という名のフレームで新規文書が開かれるが、「fixed」という名のフレームの方は初期内容が表示されたままとなる。
注意。 フレーム設定の定義は不変だが、個々のフレーム内容は変わり得る。一旦あるフレームの初期内容が変更されると、フレーム設定の定義はフレーム群の現状を反映しなくなる。
現在、あるフレーム集合の全状態を1つのURIに符号化する方法は、存在しない。したがって、多くのユーザエージェントで、フレーム文書をブックマークに登録することができない。
同一文書内の多くのリンクが同じ目標を指している場合、目標を1回だけ指定し、各要素からは target属性を省くことが可能である。 これは、BASE要素の target属性を設定することで成される。
ここで、再度前回の例を用いる。今回は BASE要素で目標を定め、各 A要素からは取り除く。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/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 - - %noframes.content; -- alternate content container for non frame-based rendering --> <!ATTLIST NOFRAMES %attrs; -- %coreattrs, %i18n, %events -- >
別途定義がある属性
NOFRAMES要素は、フレームをサポートしないユーザエージェントやフレームを表示しない設定になっているユーザエージェントにおいてのみ表示されるべき内容を指定する。 フレームをサポートするユーザエージェントは、 NOFRAMES宣言の内容を、フレームを表示しないよう設定されている場合にだけ、表示しなければならない。 フレームをサポートしないユーザエージェントは、 NOFRAMES要素の内容を、常に表示しなければならない。
NOFRAMES要素は、移行型DTDとフレーム設定DTDの、双方に含まれる。 フレーム設定DTDを用いる文書においては、NOFRAMES 要素はFRAMESET要素の末尾で。
用例を示す。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <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>
また例えば、 NOFRAMES要素は、1つのフレームの内容となる文書であって移行型DTDを用いている文書においても、用い得る。これにより著者は、当該文書がフレームの外部で読まれる際やフレームをサポートしないユーザエージェントで読まれる際に、文書の意図を説明することができる。
longdesc属性を使うと、著者は、非視覚系ユーザエージェントの利用者からのフレーム文書へのアクセス性を高められる。 この属性は、当該フレームの詳細説明を提供するリソースを指定する。 著者は、フレームに関連する詳細説明が、フレーム内容ではなくフレームそのものに対するものであることに注意する必要がある。 つまり内容は何度も書き換えられ得るものであるため、初期内容の詳細記述は当該フレームの以降の内容については不適切なものになりがちだからである。 また特に、著者は、フレームの内容に画像を単独で含めてはならない。
次の例で、このフレーム設定文書は2つのフレームを定めている。左のフレーム内容は目次で、右フレームの初期内容はダチョウの画像である。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <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.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <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 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 -- >
属性定義
別途定義がある属性
IFRAME要素を使うと、著者は、テキストの塊にフレームを挿入することができる。テキスト中に行内フレームを挿入することは、 OBJECT要素によってオブジェクトを挿入することに酷似している。 どちらも、HTML文書に別のHTML文書を挿入することができ、周囲のテキストの影響で配置される、など。
行内に挿入するべき情報は、 src属性によって指し示される。 一方、IFRAME要素の内容は、フレームをサポートしないユーザエージェントやフレームを表示しないよう設定されているユーザエージェント以外では表示されてはならない。
次に、フレームをサポートするユーザエージェントについて、枠線で囲われた行内フレームをテキスト中に配置する例を示す。
<IFRAME src="foo.html" width="400" height="500" scrolling="auto" frameborder="1"> [ご利用中のユーザエージェントは、フレームに対応していないか、 フレームを表示しないよう設定されているようです。 こちらの <A href="foo.html">関連文書</A> を御覧ください。] </IFRAME>
行内フレームはサイズ変更できない。そのため、 noresize属性は取らない。