HTML4.0の基本

フレームでページを分割する

2009年8月6日

ウインドウを分割させる

　さーて、いよいよ佳境にはいったね。フレームタグが華々しくデビューしたとき、意見は好き･嫌いに真っ二つに分かれんだ。当時は、ネットスケープの最新版でしか見ることが出来ず、対応していないブラウザは門前払いを食らっていたからね。
　でも、今は大丈夫。いまどきフレームに対応していないブラウザのほうが珍しいからね。
　ただし、i-modeは対応していないから気をつけてね。

FRAMEタグを使用すると，WWWブラウザのウインドウを複数のウインドウに分割させることができます。分割させるそれぞれのウインドウをフレームといいます。フレームは、横割りにも縦割りにも、またネスティングさせればひとつのフレームの中にいくつかに仕切ることもできます。

　フレームの内容は他のファイルに書き込みます。たとえばフレームを上下に分割するとしたら、まず上のフレームと下のフレーム用の２つのHTMLファイルが必要になります。当然のことながら、この２つのHTMLファイルだけではブラウザのウインドウを分割して表示することができません。さらに，二つのHTMLファイルを関連づけるためのHTMLファイルが必要なのです。

フレームの基本タグ

※この要素は廃止される予定です。

<FRAMESET>

フレームタグは、フォームタグやテーブルタグと同様、一番外側に基本タグ<FRAMESET>が位置し，コンテンツタグ<FRAME>をネスティングします。

このタグを使うファイルでは構造タグのうち、<BODY>を省略します。<HEAD></HEAD>タグの後に<FRAMESET></FRAMESET>を書き入れてください。

注）<BODY>の指定はリンクするファイルに書き込みます。

<FRAMESET>に必要な属性は、ROWSとCOLSで、ROWSは横割り型のフレームを、COLSは縦割り型のフレームを作ります。それぞれの値にはピクセル数、またはウインドウの大きさに対してのパーセンテージが入ります。また、ひとつのフレームのサイズをブラウザに計算させるときには、*(アスタリク)を値に入れます。これらの値をいくつ入れるかによってフレームの数が決まります。

ピクセル(): 値のみが与えられた場合、その指定はピクセル値になります。ウィンドウ、またはフレーム上端から指定のピクセル値の範囲がそのフレームになります。グラフィックを使用したタイトルを表示する場合、ウィンドー大きさに比例してサイズの変わるパーセント指定ではグラフィックがフレームの端に隠れてしまうことがあります。グラフィックの大きさでピクセル値で指定しておけば常時、全体を表示することができます。
パーセント(%): ウィンドーの上下を100%としたとき、どのフレームにどの割合で割り当てるかを指定します。
アスタリスク(*): 残りの領域を割り当てます。

この指定によりブラウザのウインドウが上下に分割(ROWS)されます。上のフレ
ームの高さが20ピクセル、下のフレームの高さはブラウザが最適な幅を計算しま
す。

注１)それぞれの値の後にはスペースなしのコンマが必要です。
注２)すべてを％で記入する場合には、数字の合計が100％になるようにします。

フレームは横２段割りで、左からブラウザのウインドウサイズの20%,60%,20%
として分割されます。

参照するファイルを指定するタグ

<FRAME>

<FRAME>タグには終了タグがありません。必須の属性はsrcで、srcの値はURLです。ファイルのリンクタグやイメージタグのsrc属性と使い方は同じです。

<FRAME>タグは<FRAMESET>で指定したフレーム数と同じだけ必要になります。

ソースコード
<FRAMESET ROWS="20,*">
<FRAME src="dir.html">
<FRAME src="main.html">
</FRAMESET>

<FRAMESET>で縦２段割りを指定しているので、<FRAME>が二つ記入されています。20ピクセルに指定されているフレームのHTMLファイにがdir.html指定されています。

<FRAME>属性一覧

<FRAME>タグには以下のように６つのオプションがあります。またタグには終了を示す</FRAME>タグは存在しません。

src="URL"

src=で指定したHTMLファイルを読み込みます。

<FRAME src="http://www.ntt.jp/">
読み込んだファイルをフレーム枠内に表示します。

name="フレーム名"

フレームに名前をつけます。ブラウザには表示されません。
　通常、フレームに埋め込んだリンクはフレームを破棄してリンク先ファイルを表示します。name属性を使用することによって、フレームを残したままリンク先ファイルを表示することができます。

TARGET="フレーム名 | top | parent | self | blank"

Netscape
2.0から、ハイパーリンクをクリックした時に別のウィンドウを作って表示させる機能が付加されています。この機能は、ウィンドウスペースが足りなくなった場合や、既存の書類と見比べて欲しい場合等に用いられ、ターゲッ
トウィンドウと呼ばれています。

HTMLタグでは、<A>タグ、<BASE>タグ、<AREA>タグ、<FORM>タ
グで使用できます。例えば、<A>(アンカー)タグの場合、以下のように
記述します。window_nameはウィンドウの識別名です。この名前が現在表示されているウインドウのウインドウ名と同じ場合、同一ウィンドウに表示されます。

<A href="url.html" TARGET="window_name">ハイパーリンク</A>

通常はnameオプションでフレーム名を指定してからTARGETオプションを使用します。TARGETオプションを使用すると，名前のついたフレームを自由にコントロールできます。

TARGETを使ったソースコード
-index.html

<HTML>
<HEAD><TITLE>JUSTTIME</TITLE>
<FRAMESET COLS="20%,*">
<FRAME src="dir.html" TARGET="start" SCROLLING="no"
NORESIZE>
<FRAME src="start.html" name="start">
</FRAMESET>
</HEAD>
</HTML>

startフレーム内のリンクをクリック，または，dirフレーム内のリンクをクリックしても，startフレーム内にリンク先のファイルが表示されます。もちろんdir.htmlファイルは表示されたまま残ります。

TARGETオプション

TARGETの指定には，フレーム名以外にtop，blank，parent，selfを指定することができます。
簡単な使い方としてはフレームを破棄したい場合はtopを，新しいウインドウを作成してからリンク先にアクセスさせたい場合はblankを使用すればよいでしょう。

_top
　全フレームを破棄して、フルウィンドウにしてから表示します。

フレームを破棄してリンク先に飛びます。

_blank
　新規ウィンドーを開きます。blankはフレームを使っていないときでも有効に機能します。

新しいフレームを作成してリンク先に飛びます。

_parent
　ネスト（入れ子構造）されているフレームの一つ上の親フレームに表示します。

_self
　現在のフレームに表示します。これは後述するタグ指定を無効にするときに使用します。

ネスト/ネスティングとは？

構造の中に構造を入れ子にしていくこと。フレームでは、フレーム間の親子関係をネストといいます。

複雑なフレームぺージ

フレームのページからさらにフレームのページにアクセスする場合に役立つ技を紹介しましょう。もとのフレームを残したまま，ネスト
（入れ子構造）されたフレームだけを破棄してほかのページにアクセスしたいときなどtargetオプションはちょっと複雑になります。
　ネストされたフレームから他のページにアクセスするには，targetオプションにもとのフレームで指定されたネストされたフレームのウインドウ名を指定します。ちょっとわかりづらいですよね。では例を見てみましょうか。

－index.html(元のフレームページ)

<HTML> 
<HEAD><TITLE>JUSTTIME</TITLE> 
<FRAMESET COLS="20%,*"> 
<FRAME src="dir.html" TARGET="start"> 
<FRAME src="start.html" name="start"> 
</FRAMESET> 
</HEAD> 
</HTML>

※元のフレームページのメインになるウインドウ名が"start"になります。

－freame2.html(ネストされたフレームページ)

※ネストされたフレームのメインウインドウになるのがmain.htmlです。

－main.html(ネストされたフレームページのメインウインドウ)

<HTML>
<HEAD><TITLE></TITLE></HEAD>
<BODY>
<A href="../start.html" TARGET="start">スタートページに戻る</A>
</BODY>
</HTML>

※targetオプションで指定しているのはindex.htmlで指定されているメインウインドウの名前です。これでframe2.htmlのウインドウが破棄されます。

MARGINwidth,MARGINheight="フレームのマージン値"

MARGINwidth：フレーム内に表示するHTMLファイルに左余白を付けることができます。数字はピクセル値です。
　MARGINheight：フレーム内に表示するHTMLファイルに上余白を付けることができます。数字はピクセル値です。

SCROLLING="yes | no | auto"

フレーム内に収まりきらないデータを表示する際のスクロールバーの動きを制御します。yesの場合は必ずそのフレームにスクロールバーを表示します。noはその逆でスクロールバーは全く表示されません。autoは必要に応じてスクロールバーが現れます。SCROLLING指定をしないとautoに設定されます。
この属性を書き込んでいない場合にはautoになります。

<FRAME src="dir.html" SCROLLING="yes">
ファイルの内容の長さに関わらずスクロールバーが表示されます。

<FRAME src="main.html" SCROLLING="no">
スクロールバーは表示されません。

<FRAME src="point.html" SCROLLING="auto">
ファイルの内容がウインドウより大きければスクロールバーが表示され、小さければ表示されません。

NORESIZE="yes | no"

基本的にはフレームのセル幅は表計算ソフトと同じようにユーザーが自由に変更することができます。フレームの境界にマウスポインタを合わせ、ポインタの形が変わったらドラッグすると任意の大きさに変更できます。しかし、デザインの関係上フレームサイズを変更されると困るようなフレームにはNORESIZEオプションを付けることでフレームサイズの変更を禁止できます。

　それぞれのフレームを仕切っている線はユーザーが任意に動かすことができます。これを固定してリサイズできないように設定します。値はありません。

FRAMEborder="yes | no"

フレームの境界線を設けるか、設けないかを指定します。ただし，この属性はインターネット・エクスプローラー3.0かネットスケープ3.0以上にしか対応されていません。

border="境界線の幅"

フレームの境界線幅を指定します。入れ子にしたフレームは親フレームのborderを継承します。

borderCOLOR="境界線の色"

フレームの境界線の色を指定します。

フレームの名前を固定するタグ

<BASE>

BASEタグの機能は、同一HTMLファイル内に現れるリンクの表示をTARGETで指定したウィンドー又はフレームに固定することです。

これ以降に現れるアンカータグの表示は"フレーム名"で示されるウィンドー又はフレームに表示されます。これを最初に書いておけば，フレーム内から他のサイトにアクセスする場合に，相手サイトがフルウィンドー化してから表示されるようになります。

FORMタグで使うTARGETオプション

フォーム入力が送信された時の結果は通常、同じウィンドーに表示されますが、TARGETオプションを指定することで結果をtarget_nameで指定されたウィンドー又はフレームに表示させることができます。

フレームをサポートしていないブラウザのためのタグ

<NOFRAME>

フレームを使えないブラウザを使用しているユーザーのためのタグです。
　<FRAMESET>タグをサポートしていないブラウザでは<BODY>タグが無いと判定し、ウィンドーに何も表示しません。
　まず、フレームを使わないファイルを用意しておきます。それを<NOFRAME></NOFRAME>ではさみます。属性はありません。
　これだと警告文書以外何も表示しないホームページになりますので<NOFRAMES>と</NOFRAMES>の間に普通のHTML文を書いておくことで通常のホームページとすることができます。<FRAMESET>タグをサポートしているブラウザは<NOFRAMES>と</NOFRAMES>で挟まれた部分は無視して処理します。

ソースコード

<HTML>
<HEAD>
<FRAMESET cols="160,*">
<FRAME src="dir.html">
<FRAME src="start.html">
<NOFRAMES>
<BODY bgcolor=#FFFFFF TEXT=#000000>
フレームを使えないブラウザのためのページです。 
このページにフレームを使わないページへのリンクを用意しておきましょう。
たとえば
ここ→<A href="noframe.html">NOFRAME</a>をクリックしてください。
</BODY>
</NOFRAMES>
</FRAMESET>
</HEAD>
</HTML>

フレームを使ったHTMLサンプル

FRAMEを使ったHTMLファイルのサンプルです。