| フレームを呼び出すページ (index.html) | |
<html> <head> <title>フレームページ</title> </head> <frameset cols="30%,70%"> <frame src="./left.html" name="sub"> <frame src="./right.html" name="main"> <noframes> このページをご覧いただくにはフレーム対応のブラウザが必要です。 </noframes> </frameset> </html> |
|
| 左側のページ (left.html) | 右側のページ (right.html) |
<html> <head> <title>左側のページ</title> </head> <body> <a href="./frame.html" target="main">別のフレームに表示</a> <a href="./frame.html" target="_self">ここのフレームに表示</a> <a href="./frame.html" target="_top">フレーム解除</a> </body> </html> |
<html> <head> <title>右側のページ</title> </head> <body> あいうえお : : </body> </html> |
まず分割されたページを呼びだすページを作ります。ページを分けるには <frameset> 〜 </frameset> を使用します。
左右に分けるには cols、上下に分けるには rows 属性を使用して表示するページの割合を「%」（パーセント）または、数字(ピクセル単位）で指定して「,」（カンマ）で区切ります。片方の割合が決まっていてその残りを指定するときは <frameset cols="15%,*"> のように「*」（アスタリスク）を使うこともできます。
実際表示するページ（分割したページ）をそれぞれ <frame src="表示するURL"> で指定して、そのときに name 属性を付けます。name に付ける名前は自分のわかりやすい名前が良いと思います。この名前はフレーム内にあるリンクの target 属性に使用します。
そして、フレームに対応していないブラウザのために <noframes> 〜 </noframes> 内にその趣旨を記述しておきます。以下のようにすると自動で指定したページに移動させることも可能です。（ページの自動読み込みが有効の場合のみ）
<noframes> <meta http-equiv="Refresh" content="0; URL=./right.html"> <!-- URL= に表示させたいページを指定 --> </noframes>
この作成したフレームの元（フレームを呼びだすページ）である index.html にアクセスすると、各フレームに指定されたページ (left.html, right.html) が表示されます。
<frameset cols="30%,*" frameborder="0">
表示例 frameset に frameborder="0" を追加します。
<frameset cols="30%,*" border="10">
表示例 frameset に border を追加して数値を指定します。
<frameset cols="30%,*" framespacing="10">
表示例 frameset に framespacing を追加して数値を指定します。
<frameset cols="30%,*" bordercolor="#ff0000">
表示例 frameset に bordercolor を追加して色を指定します。
<a href="../index.html" target="main">別のフレームに表示</a>
フレームを呼び出すページ (<frame src="〜" name="〜">) の name 属性に指定した名前を target に指定します。
<a href="../index.html" target="_self">ここのフレームに表示</a>
<a href="../index.html" target="_top">フレーム解除</a>
_self はこのリンクがある自分自身に表示して、_top はどこのフレームにも表示しないで通常どおりの表示をします。