無題ドキュメント


●フレームのしくみ　 ●縦フレームをつくろう　 ●横フレームをつくろう　 ●フレームの中でリンク先にジャンプさせよう　 ●縦と横の組み合わせ　 ●複雑なフレーム

	どこかのページで画面内が2つに分かれてるところがあったんだけど、私もやってみたいなぁ。いちいちもくじのページに戻らなくても他のページに行けたりして、見てくれる人も便利だろうと思うし・・・。
	そのページは「フレーム」を使ってるんだよ。教えてあげるね。

フレームを使っているHPを作る場合、「画面を分割させるHTMLファイル」と「分割した画面内に表示するHTMLファイル」が必要です。例えばブラウザの画面を二つに分割するフレームにしたい場合は、「画面を分割させるHTMLファイル」一つと「分割した画面内に表示するHTMLファイル」をウインドウの数だけ（二つ）の合計３つ以上のファイルが必要になります。

まずはブラウザの画面を二つに分割するフレームを作ってみましょう。用意するファイルは以下の通りです。
●「画面を分割するファイル」。これが最初に表示される「額」の部分です。
●「目次」。常に表示されていて、すぐにリンクでジャンプできるようにします。
●「表示させるページ」今まで作ってきた「index.html」や「diary.html」などをそのまま使用してみましょう。

★ここで注意してください。
「4.ホームページの仕組みを知ろう」の中でも説明したとおり、そのホームページの「表紙」は「index.html」と言う名前にするという決まりがあります。もし、フレームで分割したページを「表紙」にしたい場合は、上記の「画面を分割するファイル」の名前を「index.html」にする必要があります。つまり、「画面を分割するファイル」はフレームの「額」部分であり、一番最初に表示されるので、他のページには「index.html」と言う名前は使用できなくなります。ですから今のうちに、今まで使用してきた「index.html」（トップページ）の名前を「top.html」に変更して、保存し直しておきましょう。

	スケッチで描いたんだけど、こういう風に縦に分けたいんだ。
	じゃあまずは「画面を分割するファイル」の基本のタグを教えるね。

まずは「画面を分割するファイル」の基本を見てみましょう。

<html>
<head>
<title>ノリコのホームページ</title>
</head>
<frameset cols="20%,80%" border=0>
<frame src="mokuji.html" name="left">
<frame src="top.html" name="right">
</frameset>
</html>

　
（上のタグを表示させると・・・↓クリックしてみよう）

見てわかるとおり、ここでは「body」タグを使わずに<frameset>というタグが使われていますね。このタグがフレームの分割方法を指定するタグです。「cols=」は縦に分割する際の幅のサイズ指定で、ピクセル指定・％指定が可能です。どちらも分割するサイズをカンマ（,）で区切って指定します。サイズ指定時に、「左フレームは100ピクセル固定で、右フレームはウインドウサイズにあわせて変動する」と言う指定もできます。その場合は「"100,*"」という風に、変動可能なフレームの指定には「*」を記入します。

そのあとにある、<frame>タグはフレームの中で表示する「HTMLファイル」を指定し、各フレームに名前をつけます。「src="このフレーム内に表示するHTMLファイル" name="このフレームの名前"」と指定します。フレームの名前は自由に決められます。自分で判りやすいように、「left」「right」などと付けてもOKです。「name」を忘れるとフレームにきちんと表示されないので、忘れないように気をつけましょう。

	これはそのまま使えるね。「index.html」で保存。いままで「index.html」として使ってたトップページは「top.html」で名前を変えて保存してあるから大丈夫だよ。
	ばっちりだね。

	これを横フレームにするにはどうしたらいいの？
	横にしたいときは、「cols=」を「rows=」に変えるだけだよ！（フレームの位置関係がわかりやすいように、ここではフレームの名前も「top」と「under」に変更してあります）

<html>
<head>
<title>ノリコのホームページ</title>
</head>
<frameset rows="20%,80%" border=0>
<frame src=mokuji.html name="top">
<frame src=top.html name="under">
</frameset>
</html>

（上のタグを表示させると・・・↓クリックしてみよう）

	「画面を分割するファイル」の中に文章を書いても、ブラウザでは表示されないの？
	そうだよ。これは画面を分割するためだけにあるファイルだからね。つまりこのファイルはこれからHPを作る上で（更新の時も）一度作ったら変更することはないんだよ。
	フレームのサイズや縦や横の分割を変えたいとき以外は、ノータッチなんだね。
	表示させるページだけ更新すればいいんだよ。

	分割するファイルのタグの書き方はわかったよ。表示するファイルも特別なことがあるの？
	基本的には今まで作ったものと変わりはないけれど、ウインドウが分割されているから、リンクを張るときに、分けたフレームの中のどのフレームにジャンプするのかを指定しなくちゃいけないよ。

次に目次を例に、「フレームに表示させるファイル」の説明します。

<html>
<head>
<title>もくじ</title>
</head>
<body bgcolor="#FFCCCC" link="#663333" vlink="#FF6600" alink="#FF6600">
<center>
 
★もくじ★ 
<a href="top.html" target="under">トップページ </a> 
<a href="diary.html" target="under">ノリコの日記</a> 
<a href="pet.html" target="under">ペットの紹介</a> 
</center>
</body>
</html>

1部分だけ変わっていることに気が付きましたか？リンクを張るときのタグ<a href>の中に「target=」という指定が追加されています。「target」とは、リンク先のページをどのフレームに表示させるかを指定するタグです。先ほどつけたフレームの名前で指定します。ここでは「under」と指定していますから、下のフレームにリンク先のページが表示される事になります。

●「target=」のタグはフレームの時以外でも利用方法があります。

<a href="top.html" target="_blank">新しくウィンドウを開きます。</a> 
<a href="top.html" target="_top">フレームを解除して全体に表示します。</a> 
<a href="top.html">何も指定しないと自分のフレームにジャンプします。 </a>

　
（上のタグを表示させると・・・↓クリックしてみよう）
新しくウィンドウを開きます。
フレームを解除して全体に表示します。
何も指定しないと自分のフレームにジャンプします。
　

これは、フレーム使用時に限らず、自分のページから他の人のホームページへリンク（絶対リンク）させるときに使うと便利です。

	じゃあ実際に作ってみようか。
	えーと、「画面を分割するファイル」はさっき作った縦のヤツを使おう。あとは、目次を作らなきゃ。ファイル名は「mokuji.html」。

<html>
<head>
<title>もくじ</title>
</head>
<body bgcolor="#FFCCCC" link="#663333" vlink="#FF6600" alink="#FF6600">
<center>
 
★もくじ★ 
<a href="top.html" target="right">トップページ </a> 
<a href="diary.html" target="right">ノリコの日記</a> 
<a href="pet.html" target="right">ペットの紹介</a> 
</center>
</body>
</html>

　
（上のタグを表示させると・・・↓クリックしてみよう）

他のページはそのままで大丈夫だよね？
　
　

	今は2つに分けるだけで充分だけど、ウインドウって、もっと分割できるの？
	できるよ。

フレームはいくつにも分けることができます。<frameset>で挟まれた部分をひとつの分けられたウインドウと考えて、もうひとつ<frameset>のタグを入れることで、縦と横の組み合わせができます。

<html>
<head>
<title>Frame Sample</title>
</head>
<frameset cols="30%,70%">
<frameset rows="30%,70%">
<frame src="a1.html" name="hidariue">
<frame src="b1.html" name="hidarishita">
</frameset>
<frame src="c1.html" name="migi">
</frameset>
</html>

　
（上のタグを表示させると・・・↓クリックしてみよう）

<html>
<head>
<title>Frame Sample</title>
</head>
<frameset cols="50%,50%">
<frameset rows="30%,70%">
<frame src="a1.html">
<frameset cols="30%,70%">
<frame src="b1.html">
<frame src="c1.html">
</frameset>
</frameset>
<frameset rows="60%,40%">
<frame src="d1.html">
<frame src="e1.html">
</frameset>
<frame src="f1.html">
</frameset>
</html>

　
（上のタグを表示させると・・・↓クリックしてみよう）

	ぼくもフレームでページ作ったよ！すごいだろ！
	何かごちゃごちゃしてて見にくい～。
	これじゃあ、せっかくの便利なフレーム機能がうまく活かせてないね。もうちょっとシンプルにしてみたら？
	ちぇ、一生懸命作ったのになぁ。

ホームページを見やすくするために便利なフレームですが、分けすぎると逆に見難くなるので、注意しましょう。