Section 2 : フレーム化・その2

 ここでは,実際にフレーム分割を行い,フレーム相互間でのジャンプやフレーム解除について解説する。


 Section 1 で紹介した方法に従って <FRAMESET>〜</FRAMESET> を次のように書いてみる。

<FRAMESET ROWS="100,*">
<FRAME NAME="frame1" SRC="header.htm" SCROLLING="no">
<FRAMESET COLS="25%,*">
<FRAME NAME="frame2" SRC="contents.htm">
<FRAME NAME="frame3" SRC="fr-top.htm">
</FRAMESET>
<NOFRAMES> <BODY> これは,フレーム分割のサンプルです。残念ですが,対応していないブラウザは図で結果をご確認ください。 </BODY> </NOFRAMES> </FRAMESET>

 この外にはヘッダを記述する。
Browser View of the Sample 1行めの <FRAMESET> では,縦方向に 100ピクセル・残り全部というふうに2分割している。2行めでその上半分に "frame1" と名前をつけ,内部に header.htm というファイルを表示させ,スクロールバーは非表示にする。
 分割された下半分をさらに3行めの <FRAMESET> で左から 25%・その残り(つまり 75%)と分割する。左には "frame2" と名前をつけ,contents.htm を表示させる。いっぽう,右は "frame3" と名づけ,fr-top.htm を表示させる。
 図は,Windows95 版 Internet Explorer 3.0 によるものである。

 フレーム内に表示する HTML ファイルは,まったくふつうの,今までの HTML である。ただ,異なる点はフレーム相互間のジャンプなどの,フレームに内側から働きかける記述をすることがあるということである。


フレーム相互間のジャンプ

 ジャンプは <A HREF="...">〜</A> で記述することはよくご存じのことと思うが,フレーム相互間ジャンプの場合はこれにさらに属性を追加して記述する。

<A HREF="..." TARGET="...">〜</A>

 TARGET="..." でジャンプ先のフレームを指定する。フレームの指定は <FRAME> の NAME 属性で定義した名前によって行う。省略した場合は,その文書が表示されているフレームになる。
 たとえば,前述の例の contents.htm に

<A HREF="fr-01.htm" TARGET="frame3">Chapter 1</A>

と書いておくと,"Chapter 1" の句をクリックすることで右下のフレームが fr-01.htm に切り替わる。
 フレーム内には,まったく別のサイトの文書を表示させることも可能である。この状態だと,ジャンプした文書がことごとく自分のフレームの中に収まってしまう。


フレームの解除

 ほかのサイトへのジャンプを記述するのにフレームを解除する必要も出てくる。これも <A> の TARGET 属性で記述する。
 TARGET="_top" を指定することでフレームは解除される(top の前にアンダースコア "_" があることに注意)。外部にリンクを張るときは必要に応じてフレームを解除するのを忘れないようにしたい。フレーム内では表示領域が相対的に小さくなるのでジャンプ先の文書を見にくくすることもある。

 ちなみに,TARGET に対する値で "_blank" を指定すると新しいブラウザのウィンドウを開いてそこに文書を表示させることもできる。これは,フレーム化されていない HTML 文書でも使うことができる。


 フレームは,同時に複数の文書を表示できるという利点もある一方,分割に時間がかかったり,同時に複数のファイルを読むため表示に手間どるという短所もある。また,まだフレームに対応していないブラウザもあることをつねに気にとめておく必要がある。

 フレーム,つまり Section 1,2 の内容は HTML 3.2 のサポート外で,Internet Explorer 3.0 以降と Netscape Navigator の独自の規格である。次の規格である HTML 4.0 では採用されているが,ここではフレームの基本を扱うにとどめた。フレームについては,Academic HTML a la carte の Let's challange frame も参考にされたい。


解決! センター化学 I
解決! センター化学 I ◆ Z 会出版

Next : Java アプレットの挿入
Prev : フレーム化・その1
Up : 目次