フレームページの作成

ここでは、フレームについての基本を説明します。フレームは少し複雑なので、何度も読み返して覚えましょう。↓のような形のページをフレームページといいます。

このサンプルページでは、左のメニュー（自己紹介、リンクなど）をクリックすると、右にその内容が表示されるようになっています。このようなページをフレームページと言います。

基本的にフレームページとは、１つのページに、複数のページを埋め込んで作られます。

このサンプルの場合、 01.html というファイルに、 menu.html（メニュー側の部分）と contents.html（内容側の部分）を埋め込んでいます。

つまり上のようなフレームページを作る場合は、htmlファイルが３つ必要です。下に基本となるページのソースを書いておきました。このファイルに、別のメニューや内容のファイルを埋め込みます。

このソースでは、１・２行目のHTMLのバージョンがフレーム用のバージョンになっています。

フレームページの場合はbody要素ではなく、 frameset要素が内容の部分になります。

１つめの 100 は左の部分の大きさを指定していて、もう１つの * は右の部分の大きさを指定してます。*にするとウインドウ（ブラウザ）の大きさに合わせて大きさが変化します。つまり残りの部分のことです。

frameset要素の cols属性でページを横に分割することができます。サンプルの場合、ページを２つに分割しているので、属性値をカンマで区切って２つ指定してます。

frame要素は横分割の場合左側から指定していきます。frame要素の src属性でこの場合は左側のhtmlファイルを指定します。必ず name属性でフレームの名前を指定しておきましょう。

フレームページを作るときに注意しなければならないのが、ハイパーリンクです。メニューの部分に普通にリンクを張るとこうなってしまいます。

このサンプルで左側のメニューを押してみると、メニューの部分に表示されてしまいます。このフレームページの場合は、メニューを押したときに右側に表示しなければなりません。

a要素の target属性の属性値を、表示したいほうのフレーム名にします。

この場合は、右側の名前を contents にしてあるので、それを指定します。下のようにすれば、きちんと右側に表示されるようになります。

ここでは縦分割や複数分割の分け方を書いておきます。frameset要素の部分のソースを書いておきますので、コピーして使ってください。

noframes要素で囲んだ部分には、フレームを表示できないブラウザで見たときに表示される内容を書きます。この要素の中はbody要素から書き始めます。下のように書きます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>

<head>
 <title>サンプルページ</title>
</head>

<frameset cols="100,*">
 <frame name="menu" src="./menu.html">
 <frame name="contents" src="./contents.html">

 <noframes>
 <body>あなたのブラウザはフレームに対応していません。</body>
 </noframes>

</frameset>

</html>