フレームってなに？

■ フレームってどんなもの？

ブラウザで見た際に、画面が分割されているWEBページを見たことないでしょうか？例えば、左側にメニューがあり、そのメニューをクリックすると左側のメニューは固定で右側だけページが変わるようなページです。イメージがわきにくければ、次の表示例を見てください。

表示サンプル（別窓でフレームサンプルが開きます）

上記例のように画面を分割してページを表示する手法のことを「フレーム機能」とか単純に「フレーム」などと呼びます。例では画面を２分割していますが、３分割、４分割と理論的にはいくらでも分割することができます。

ただ、当然画面を分割すればするほど見にくくなりますし、記述も難しくなります。さらに、フレームは見る人の環境によっては表示されない場合もあるので注意が必要です。また、例では画面を左右に分割していますが、上下に分割することも可能です。以下ではこの表示サンプルを例にとって話を進めていきます。順番にゆっくり見ていきましょう。

■ フレームの基本

画面を左右二つに分割するフレームを実現する際には次のような手順をふみます。

左側に表示させるHTMLファイルを作成する。
右側に表示させるHTMLファイルを作成する。
二つのHTMLファイルを同時に入れる入れ物を作成する。

右側に表示させるファイルは通常通りHTMLファイルを作成するだけです。特に制限もありませんので自由に作成して下さい。

左側に表示させるファイルも自由に・・・と言いたいのですが、実は少し違います。表示サンプルで使用したメニュー部分のソースを見てください。

メニュー部分ソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>フレーム用メニューサンプルページ</title>
</head>
<body>
<ul>
<li><a href="samp1.html" target="_top">トップページへ</a></li>
<li><a href="prof.html" target="main">プロフィール</a></li>
<li><a href="conf.html" target="main">HP作成講座</a></li>
<li><a href="bbs.html" target="main">掲示板</a></li>
</ul>
</body>
</html>

特別な記述はほとんどないのですが、「target="main"」と「target="_top"」という見なれないものが「<a>」の中にありますよね。この「target（ターゲット）」は、リンク先をどこに表示するかという指定になっています。つまり、「target="main"」と記述したところをクリックするとmain と言う名前のフレームにジャンプするというわけです。フレームへの名前の付け方は後ほど説明します。

さて、もう一つ「target="_top"」ですが、これは特殊な書き方となっていますので覚えておきましょう。これは「_top」という名前のフレームにジャンプするのではなく全てのフレームを破棄してリンク先を表示する指定となっています。他のサイトへジャンプする際や、トップページを初期状態に戻す際などに使えるでしょう。

さて、今までは言わばフレームを作成するための下準備となっていました。フレームと言ういれ物に「いれるもの」を作っていたにすぎないのです。本当に肝心なのは二つのHTMLファイルを同時に入れるいれ物を作成する方法ですね。では実際に記述を見てみましょう。

入れ物部分ソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<title>フレームサンプルページ</title>
</head>
<frameset cols="200,*">
	<frame src="menu.html" name="hidari">
	<frame src="top.html" name="main">
	<noframes>
		<body>
        <p>（ここにはフレームが見えない方への代替文書を掲載します）</p>
		</body>
	</noframes>
</frameset>
</html>

フレーム説明画像

<noframes>

一気にタグがたくさん登場したので戸惑われるかもしれませんが、フレームを作るにはこれだけの記述が必要です。まず、注目してもらいたいのは「<noframes>」と「</noframes>」に囲まれた範囲です。こちらはフレーム非対応環境の方が見たときに表示される内容となっています。「<noframes>」～「</noframes>」を記述してもしなくてもフレーム対応環境の方にはなにも変わりませんが、フレーム非対応環境の方のためにも忘れず記述をするようにしましょう。

ここでおかしなことに気がつきませんでしたか？「<noframes>」～「</noframes>」を記述してもしなくてもフレーム対応環境の方にはなにも変わりません、と言うことはフレーム対応環境の方へは「<body>」タグがないことになりますよね。これは記述し忘れているわけではなく、記述する必要がないのです。今作ろうとしているのはHTMLファイルを入れるいれものです。いれものですから「本文」を記述する必要はありませんよね。本文を記述しないので、「<body>」を記述する意味も必要もないということになります。

<frameset>

次に「<frameset>」と「</frameset>」で今から「フレームの指定をしますよ」「ここまでがフレームの指定でした」と宣言しています。ちなみに「どのように分割するの？」という指定は「<frameset>」内の属性で行います。上記例では「cols="200,*"」と指定していますよね。これは画面を左右に分割し、その幅は200と？にしなさいという指定になっています。これを「rows="400,*"」と記述しますと画面を上下に分割し、その幅は400と？にしなさいという指定になります。この「200」や「400」のように単位をつけずに指定をしますと、単位はピクセルになります。

他にも「rows="30%,70%"」のように全体の割合で記述することも出来ます。そして「*」ですがこれは自動で幅を決定する方法となっています。つまり、「cols="200,*"」と指定しますと画面を「200px」と「画面の幅－200px」の幅に分割してくれるのです。「rows="400,*"」ですと画面を「400px」と「画面の高さ－400px」の高さに分割、ということになりますね。

<frame>

そして「<frame>」タグにてフレームの中身について指定をします。

という記述では「hidari」という名前のいれものに「menu.html」を表示しなさい、と言う指定になっています。

フレーム ってなに？

■ フレーム ってどんなもの？