LESSON6:フレーム表示の仕方
●フレームの基本
 フレーム機能を使うと,1つのブラウザのウィンドウをいくつか に区切って,それぞれ別の内容を表示させることができます。

○基本のフレームタグ;<FRAMESET>〜</FRAMESET>

■画面分割の指定
縦に分割するにはCOLS="分割指定",横に分割するにはLOWS="分割指定" 分割してできるフレームの大きさ指定は,ピクセル数(画素数)または パーセンテージでします。
(例)
<FRAMESET COLS="30%,70%>
(縦に2分割し,左側に30%,右側に70%のサイズのフレームを作成します。)
<FRAMESET ROWS="150,*>
(横に2分割し,上段に150ピクセル,下段にウィンドウサイズから上段分を 引いたサイズのフレームを作成します。)
<FRAMESET COLS="50%,50%>
<FRAMESET ROWS="*,80>
(縦に中央で2分割し,さらに右フレームを横に2分割。下段に 80ピクセルのフレームをつくり,上段はウィンドウサイズから下段 分の80ピクセルを引いたサイズのフレームを作成する。)


■フレームに表示されるファイルの指定;<FRAME SRC="url"> <FRAMESET>タグでフレームを定義したら,具体的な内容は <FRAME>タグで指定します。フレーム機能は,表示される内容をそれぞれの ウィンドウごとに別のHTMLファイルとして保存しておき,これをリンクを つかって読み込むしくみになっています。urlにはファイルのパスを記入します。

サンプルコード1
<HTML>
<FRAMESET COLS="50%,50%">
<FRAME SRC="f1.html">
<FRAMESET ROWS="*,80">
<FRAME SRC="f2.html"></FRAME>
<FRAME SRC="f3.html"></FRAME>
</FRAMESET>
</FRAME>
</FRAMESET>
</HTML>
サンプルの表示1

○アトリビュートには以下のものがあります。
■フレームの形式を指定する。;NAME
MARGINHEIGHT="ピクセル数"
MARGINWIDTH="ピクセル数"
SCROLLING="yes","no",auto"
NORESIZE
NAMEはフレーム機能でできた個々のウィンドウに名前をつけるときに 使います。名前は,TARGETタグ(後述)でウィンドウを指定して表示 するときに使います。
MARGINHEIGHT,MARGINWIDTHは,フレームと中のテキストとのマージンを 指定します。
SCROLLINGは,スクロールバーの表示・非表示を指定するタグです。 デフォルト値では"auto"です。
通常,それぞれのフレームの境界は,ユーザーが任意に動かす事が出来ますが ,これを固定するのがNORESIZEです。

サンプルコード2
<HTML>
<FRAMESET COLS="50%,50%">
<FRAME NAME="F1" NORESIZE SRC="f1.html">
<FRAMESET ROWS="*,80">
<FRAME NAME="F2" SCROLLING="yes" SRC="f2.html"></FRAME>
<FRAME NAME="F3" SRC="f3.html"></FRAME>
</FRAMESET>
</FRAME>
</FRAMESET>
</HTML>
サンプルの表示2

○実はフレームに対応していないブラウザを使っている人もありますので 実際にフレームを使うときにはフレーム未対応のブラウザ向けのお知らせを 表示するタグがあります。
■フレーム未対応ブラウザ向けタグ;<NOFRAME>〜</NOFRAME> このタグの間にフレーム未対応のブラウザを使っている人向けの 情報を書き込むとよいわけです。この中にはタグをもつ本格的な 内容もOKです。フレームは便利な面もありますが,嫌う人もいますので あまり多用せず効果ありと思う場面だけにするとよいでしょう。

フレーム表示の仕方をクリックして 左側青いウィンドウの「もとに戻る」を何回かクリックしてみてください。 青の中にまた青と赤1/2,1/4,1/8・・・と再帰的に読み込まれて しまいます。これを防ぐには次のようにします。
■リンクした内容をロードするウィンドウの指定;<A HREF TARGET="ウィンドウの名前"> ウィンドウの名前の他に_top,topという指定もできます。 _topはフレーム機能を解除してロードします。topは,新しいウィンドウを開いてロード というわけです。実際にサンプルで試して見てください。

サンプルコード3
<HTML>
<FRAMESET COLS="50%,50%">
<FRAME NAME="F1" NORESIZE SRC="f1.html">
<FRAMESET ROWS="*,80">
<FRAME NAME="F2" SCROLLING="yes" SRC="f2.html"></FRAME>
<FRAME NAME="F3" SRC="f3.html"></FRAME>
</FRAMESET>
</FRAME>
</FRAMESET>
</HTML>
サンプルの表示3

このサンプルを参考にすれば意のままに表示したいものを表示したい ウィンドウにロードできます。 もうこれでフレーム表示は完璧ですね。次にいきましょう。次のLesson7のページを開くときに 音が出ますからパソコンの音のボリュームを大きくしているとびっくりすると思いますので 注意してください。お使いのブラウザがIE場合だけですけれど…。

LESSON5| LESSON7