フレームを使用する
フレームを使用する事で、画面を分割し代表的な使用方法としては、『メニュー部分』と『内容部分』と分ける事が可能になります。
しかし、フレームは全てのブラウザで表示可能ではないのでフレーム未対応のページを作成する必要があります。その際には、フレームの表示されない環境用を参照して下さい。
このフレームを使用する事で、下記の様なメリットがあります。
・『内容部分』をスクロールしても『メニュー部分』が画面表示外に移動する事がなく常に表示しておく事が出来ます。
・メニュー部分、内容部分は別々に保存してあるので、変更する際もその部分のみになるので、変更が簡単です。
下記のsampleの様な分割方法が代表的にあります。（これ以外も、勿論可能です。）
フレームを使用するには、ＨＴＭＬを記述する際のドキュメントバージョンでフレームが使用可能なバージョンで記述しないと、使用できませんので注意して下さい。
| バージョン種類 |
|---|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
フレームを作成するには、下記のタグを使用します。
『高さ』や『幅』には、『ピクセル，％，＊』のどれかで大きさを決定します。
| タグ | 意味 |
|---|---|
<frameset rows="高さ,高さ">～</frameset> | 画面を上下に分割する |
<frameset cols="幅,幅">～</frameset> | 画面を左右に分割する |
<frame src="url" name="名前"> | 表示させるページの場所を指定 |
『高さ』や『幅』のサイズの指定方法は、『ピクセル』，『％』，『＊』で指定します。
『＊』は、rows="20%,*"と指定した場合に、残りの部分を自動的に指定する事ができます。
記述方法には、通常<body>～</body>の中にそのページの中身を記述していきますが、フレームを使用する場合には代わりに<frameset>～</frameset>を使用します。
よって下記の様なページを作成し、green.htmlやorange.htmlを読み込む事になります。
★ ポイント ★
フレームを使用する場合には、表示する場所を指定してあげないとクリックしたページ自体が変更されてしまいます。
①各フレームに名前を付ける。<frame src="green.html" name="greenpage"><frame src="orange.html" name="orangepage">
②この名前に向って、表示したいページを読み込ませる。<a href="リンク先" target="orangepage">メニュー１</a>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>タイトル</title>
</head>
<frameset cols="幅,幅">
<frame src="green.html" name="greenpage">
<frame src="orange.html" name="orangepage">
</frameset>
</html>上記のサンプルをそれぞれ以下に記述してみます。
ホームページ作成ＴＯＰ > フレーム > フレームを使用する > このページのＴＯＰ ▲
| 分割 | 概略 |
|---|---|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
ホームページ作成ＴＯＰ > フレーム > フレームを使用する > このページのＴＯＰ ▲
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>タイトル</title>
</head>
<frameset cols="28%,72%">
<frame src="green.html" name="greenpage">
<frame src="orange.html" name="orangepage">
</frameset>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>greenpage</title>
</head>
<body bgcolor="#99ff99">
<ul>
<li><a href="リンク先" target="orangepage">メニュー１</a></li>
<li><a href="リンク先" target="orangepage">メニュー２</a></li>
<li><a href="リンク先" target="orangepage">メニュー３</a></li>
<li><a href="リンク先" target="orangepage">メニュー４</a></li>
<li><a href="リンク先" target="orangepage">メニュー５</a></li>
<li><a href="リンク先" target="orangepage">メニュー６</a></li>
<li><a href="リンク先" target="orangepage">メニュー７</a></li>
</ul>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>orangepage</title>
</head>
<body bgcolor="#ffcc66">
<p>ここには、内容を入れます。</p>
<p>左のメニュー部分とは<br>別の画面になります。</p>
</body>
</html>
ホームページ作成ＴＯＰ > フレーム > フレームを使用する > このページのＴＯＰ ▲
スタイルシートでは、フレーム枠からの余白や色などを調整する事ができます。
ホームページ作成ＴＯＰ > フレーム > フレームを使用する > このページのＴＯＰ ▲
