フレームとは
１つのページを複数のHTMLファイルで構成されているページの事をいいます。サンプルページを用意しましたので、まずそちらをご覧ください。
このサンプルページの構成は、次の３つのhtmlから成り立っています。
１.フレームの設定をするhtml
２.左側のhtml
３.右側のhtml
フレームを設定するhtmlファイルで、２、３のhtmlを纏めて一つのページとして出力しています。次からはこのフレームの設定を見てみましょう。
フレームの設定
先ほどのフレームページのように縦割りのフレームから見てみましょう。まず、フレームの設定をしているhtmlのソースです。
<html>
<head>
<title>サンプルフレーム１</title>
</head>
<frameset cols="200, *">
<frame src="左のhtmlのパス" name="menu">
<frame src="右のhtmlのパス" name="main">
</frameset>
<noframes>
<body>
このサイトはフレームに対応したブラウザが必要です。
</body>
</noframes>
</html>
新しいタグがいっぱい出てきましたけど頑張りましょう。<frameset>〜</frameset>タグは、フレームを作成している核となる部分です。その中に、『cols』という属性があります。これはフレームの縦割りを表しています。横割りの属性は『rows』になります。これらの属性は必須タグです。どちらかを記述しなければ正常に動作しないので注意しましょう。縦か横か、フレームに命令しないと、どうしたらいいか分からないという事です。
次に<frame>タグは、指定されたhtmlファイルをフレームに呼び出す為のタグです。ここに呼び出したいhtmlのパスを書きます。
最後に<noframes>〜<noframes>ですが、これはフレームを対応してない環境の処置です。文章は任意ですが、上記のような対応していない人の為のフォローは必要です。
縦・横割り
フレームの基本タグ<frameset>〜</frameset>の中の必須属性、rows(横割り)、cols(縦割り)には値を設定することができます。使用できる単位は「px」「%」「*」になります。例をいくつか見てみましょう。
| cols="200, *" | rows="30%, 70%" |
 |  |
『px』や『%』は理解できると思いますが、『*』はなんだろうと思ったはずです。これは、ブラウザの表示領域で変化するというものです。つまり、左フレームが200px、右が表示できるだけ表示するという事です。
リンクと名前
フレーム内での左メニューのリンクの結果を右メニューに表示する方法があります。まず、どんなページかを見てもらう為に下のサンプルページをご覧ください。
このように、クリックしたウィンドウでは無く、右側のウィンドウが変化しています。このようなページを作るには、ウィンドウ名を付ける必要があります。名前を付ける場所は、
<html>
<head>
<title>サンプルフレーム１</title>
</head>
<frameset cols="200, *">
<frame src="左のhtmlのパス" name="menu2">
<frame src="右のhtmlのパス" name="main2">
</frameset>
<noframes>
<body>
このサイトはフレームに対応したブラウザが必要です。
</body>
</noframes>
</html>
のように記述します。名前は任意ですが、分かりやすい名前にしておきましょう。そして、リンクのタグの中に以下のように記述します。
<a href="表示させたいhtmlのパス" target="表示させたいウィンドウ名">リンク</a>
と、リンクタグの属性指定で、リンクを表示させる場所を指定しています。先ほどのフレーム設定時につけた名前を指定するとそのウィンドウに表示されるということです。○○の名前のウィンドウに××のファイルを表示してくれという意味です。
フレームの境界線
今まで説明してきたフレームはウィンドウ間に線のような物が表示されています。デザイン上ちょっと邪魔ですよね？これを消してみたいと思います。
<html>
<head>
<title>サンプルフレーム</title>
</head>
<frameset cols="200, *" border="0" frameborder="0" framespacing="0">
<frame src="左のhtmlのパス" name="menu2">
<frame src="右のhtmlのパス" name="main2">
</frameset>
<noframes>
<body>
このサイトはフレームに対応したブラウザが必要です。
</body>
</noframes>
</html>
| フレーム境界線を設定 |
| frameborder="数値" |
フレーム間の枠線の属性。値は『0』(枠無し)か『1』(枠有り)で指定します。 |
| framespacing="数値" |
フレーム間の空白の属性。値を『0』にする事により消す事ができる。 |
| border="数値" |
フレーム間の枠線の属性。環境によっては、これを記述しないと上記２つを設定しても枠線が表示されてしまう事もあるので注意。 |
この３つの属性を指定する事により枠線を綺麗に消す事ができます。枠線を消したい時はこの属性をワンセットと考えて使用すると良いでしょう。
スクロールバーを無くす
これはデザイン上スクロールバーを無くした方がいい場合などに使用します。
<html>
<head>
<title>サンプルフレーム</title>
</head>
<frameset cols="200, *" border="0" frameborder="0" framespacing="0">
<frame src="左のhtmlのパス" name="menu2" scrolling="no">
<frame src="右のhtmlのパス" name="main2" scrolling="auto">
</frameset>
<noframes>
<body>
このサイトはフレームに対応したブラウザが必要です。
</body>
</noframes>
</html>
『scrolling』の値ですが、今までのように数値では無く次のように指定します。
・ auto ： ページの内容によって必要なら表示する。
・ yes ： 常に表示する。
・ no ： 常に非表示。
とする事ができます。
サイズを固定する
各フレームのサイズは手動で変更する事ができます。まずはサンプル例をご覧下さい。境界線あたりでクリックし引っ張るとウィンドウの大きさを変更できます。
どうでしょうか？変更不可能の方のフレームはウィンドウサイズが変更できない設定になっています。まずは変更不可能の方のソースを見てみましょう。
<html>
<head>
<title>サンプルフレーム</title>
</head>
<frameset cols="200, *">
<frame src="左のhtmlのパス" name="menu2" noresize>
<frame src="右のhtmlのパス" name="main2">
</frameset>
<noframes>
<body>
このサイトはフレームに対応したブラウザが必要です。
</body>
</noframes>
</html>
この属性を指定するだけです。この属性は値がありません。指定のフレームの表示サイズを固定する役割があります。
さて、ここまで様々なフレームのタグや属性について見てきました。フレームの設定はそんなに頻繁に使うものでは無いと思います。どのようなものがあるかを覚えておき、使用したいときに目を通してもらってもいいと思います。最後に複数のフレームを使ったページを紹介しておきます。
複数のフレームを使用する
各画像をクリックするとサンプルページが表示されます。参考にしてみてください。
