|
フレームの仕組みがだいたい理解できましたでしょうか？
では さっそくフレームのページを作ってみましょう。
今回 作っていただくのは こんなページです。
>> ３つのウィンドウからできているフレームのページ
このページは ３つのページと フレームの枠の役割をするファイルの
計４つのHTMLファイルからできています。
まず 表示させたい３つのファイルを作ります。
上のウィンドウに表示させるページ
左のウィンドウに表示させるページ
右のウィンドウに表示させるページ
フレームの作り方の練習ですので これだけで結構です。
ファイル名もわかりやすいようにしておきましょう。
今回は、
上のウィンドウに表示させたいページを ue.html
左のウィンドウに表示させたいページを hidari.html
右のウィンドウに表示させたいページを migi.html
と しておきます。
次に フレームの枠の役割をするページを作ります。
通常のHTMLファイルは <head> と <body> のタグで構成されていますが、
フレームの場合は <head> と <frameset> のタグで構成されています。
<body> のタグは使えませんので 間違えないようにしましょう。
また さらに分割したい場合は <frameset> 〜 </frameset> を
入れ子にして指定するようになります。
分割さ指定する属性として rows と cols を使います。
| rows |
フレームを横に分割してそれぞれの高さを上から順番に
カンマで指定します。
指定できる値は ピクセル ％ * です。 |
| cols |
フレームを縦に分割してそれぞれの幅を左から順番に
カンマで指定します。
指定できる値は ピクセル ％ * です。 |
今回の場合は ウィンドウを横に分割して その下側になるウィンドウを
さらに縦に分割していますので <frameset>のタグが ２つ入ることになります。
<frameset rows="100,*" cols="*">
<frame src="ue.html">
<frameset rows="*" cols="200,*">
<frame src="hidari.html">
<frame src="migi.html">
</frameset>
</frameset> |
１回目のフレームセットは rows で ウィンドウを横に分割しています。
上から100ピクセルのところで分割して ue.htmlを表示するようにしています。
<frameset rows="100,*" cols="*">
<frame src="ue.html">
<frameset rows="*" cols="200,*">
<frame src="hidari.html">
<frame src="migi.html">
</frameset>
</frameset> |
１回目で 横に分割した下側のウィンドウを さらに col で縦に分割します。
左端から200ピクセルのところで分割して、左側のウィンドウには hidari.htmlを
右側のウィンドウには migi.html が それぞれ表示されるように指定しています。
<frameset rows="100,*" cols="*">
<frame src="ue.html">
<frameset rows="*" cols="200,*">
<frame src="hidari.html">
<frame src="migi.html">
</frameset>
</frameset> |
● アスタリスク（*）の役割
*（アスタリスク） は のこり全てを表示してください という意味があり、
数値の代わりに指定します。 今回の場合 上から100ピクセルのところで
分割したらあとの残りを数値で指定するよりも 「残りは全て表示してね」
と 命令したほうが簡単ですよね。
そんなときに このアスタリスク（*）を指定するわけです。
もちろん 左から200ピクセルで分割したあとの残りも同じですね。
アスタリスクで指定された部分は 最初に指定してある数値を差し引いて
ブラウザが残りを計算して表示してくれるようになっています。
● ドキュメントタイプ宣言が変わる
通常のHTMLファイルと フレームを使ったときのHTMLファイルでは
ドキュメントタイプ宣言が違います。
通常のHTMLファイルのドキュメントタイプ宣言は
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
フレームを使ったときのドキュメントタイプ宣言は
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
ドキュメントタイプ宣言が 変わるということだけでも知っておいてくださいね♪
|
