フレームはブラウザの画面を分割する方法です。下に左右２分割のフレームと、それを生成するHTML文が記述してあります。これを例に説明します。この例を入力してもフレームは単独では動作しません。フレームで分割された画面に表示するHTMLを指定する必要があります。
|
<html> |
フレームを定義するには<FRAMESET></FRAMESET>とします。BODYタグは使用しません。フレームを縦方向、横方向に分割するためにROWS、COLSアトリビュートが用意されています。このアトリビュートで分割数を決めます。ROWS、COLSを記述しないときは対応する方向の分割は行われません。
例では左右に２分割していますから、COLSアトリビュートで２つに分割するように指定しています。COLS=の右辺には、ピクセル、％、*の３種類の値を指定します。ピクセルは数値のみ、％は数値％と数値に続けて％を記述します。％を使用するときは必ず全体で100％となるようにします。＊は相対値を表します。分割数に応じてコンマで区切ります。
cols="80.*"は、分割する左側は８０ピクセル幅とし、右は自由な画面幅（残りの部分）とすることを意味しています。
【問題】
画面を横方向に３分割し、左右を１００ピクセル、中央を相対指定するときの指定方法をのべよ
上の例で、COLSをROWSに差し替えROWS="80,*"とすると、上下２分割の画面となります。またROWS="80.*" COLS="80.*"とすると上下２分割左右２分割の４分割画面となります。それぞれ、問題で指定した画面、説明した画面の例を下に示します。
|
|
|
|
|||||||||
|
左右３分割
|
上下２分割
|
上下・左右２分割
|
フレームには、frameborder、 border、bordercolor、 framespacingなどのアトリビュートがあるが、ここでは説明を省略する。
分割されたフレームには、それぞれデータを表示するように指定する必要がある。フレームに表示する内容（フレームコンテンツ）をコントロールするためには<FRAME>を用いる。それぞれ分割された画面にNAME=”画面の名前”と名前をつけることにより、どの画面であるか区別する。また画面に表示するデータを指定するために、SRC=”表示するHTML文”と指定する。例では画面が２つに分割されているので２つの<FRAME>が書かれている。なお、画面をスクロールさせないときはSCROLLING="NO"とする。また画面サイズを変更させないときはＮＯＲＥＳＩＺＥとする。
<frame name="leftFrame" scrolling="NO" noresize src="*.html">
<frame name="mainFrame" src="*.html">
ブラウザによっては画面分割をサポートしていないものもあります。このようなブラウザでは画面表示が不能となるので
<NOFRAMES><BODY>注意をうながすメッセージ</BODY></NOFRAMES>
のように記述し、相手側にシステムの故障でないことを知らせるようにする。上の例では、フレームが使用できないとき
あなたの使用しているブラウザはフレームをサポートしていません
というメッセージを表示するようにしています。
【練習】
次の４例文を作成し、それぞれ同じディレクトリーに保存します。ｚ7-0.ｈｔｍｌを実行させ、どのような動作をするか確認しよう。
|
z7-0.html
|
<html> <head><title>HTML-RENSYU </title></head> <frameset cols="80,*" frameborder="NO" border="1" framespacing="0"> <frame name="menu" scrolling="NO" noresize src="z7-1.html"> <frame name="main" src="z7-2.html"> </frameset> <noframes><body bgcolor="#FFFFFF"> あなたの使用しているブラウザはフレームをサポートしていません </body> </noframes> </html> |
|
z7-1.html
|
<html> <head></head> <body bgcolor="#66ffff"> <p>目次<br> <a href="z7-2.html" target="main">本論</a><br> <a href="z7-3.html" target="main">結論</a></p> </body> </html> |
|
z7-2.html
|
<html> <head></head> <body> <h3 align="center">本論</h3> これは本論です </body> </html> |
|
z7-3.html
|
<html> <head></head> <body> <h3 align="center">結論</h3> これは結論です </body> </html> |
実行結果はここを押す。
上の例は、画面の右側に目次を配置し、目次を選択すると左の本文が入れ替わるようになっています。
次に画面を上下２分割し、さらに下の部分を左右２分割してみましょう。
|
<html> <head> <title></title> </head> <frameset rows="80,*" cols="*" frameborder="NO" border="0" framespacing="0"> <frame name="topFrame" scrolling="NO" noresize src="*.html"> <frameset cols="80,*" frameborder="NO" border="0" framespacing="0"> <frame name="leftFrame" noresize scrolling="NO" src="*.html"> <frame name="mainFrame" src="*.html"> </frameset> </frameset> <noframes><body bgcolor="#FFFFFF"> </body></noframes> </html> |
||||
上のリストで、赤色で表示した部分が上下の分割部分となります。上の部分はtopFrameと名前をつけています。下の部分のFRAMEの部分に左右分割用の青字で示したフレームセット定義が書かれています。
このフレームは３分割されていますので、データソースは３種類必要です。