フレーム 画面分割の方法

 今、見ているこのページのように画面を分割して、目次と内容の表示にわけるような方法をここでは説明します。このような機能をフレーム機能と呼んでいます。



  フレームの基本形式

 下記のように画面を左右に分割し、左側を画面全体の横幅の30%に右側を70%に分割する場合を考えてみます。そうすると、次のことを設定しなければいけないはずです。

 

  1. 画面分割の方法
  2. 画面分割の比率
  3. 左右の画面に表示するファイル
  < > < >
 まず、画面分割の方法と比率ですが、これをHTMLで書いてみると、


  <FRAMESET ****></FRAMESET>


****には
画面を横に分割したい場合  COLS="x,y,z,......"
画面を縦に分割したい場合  ROWS="x,y,z,......"

"x,y,z,......"には、
ピクセル数、もしくは%数で分割画面の大きさを指定します。
分割する画面の数については、二分割ならx,yと、三分割ならx,y,zと指定します。

では、
分割したそれぞれの画面に表示するファイルの指定を行います。


 従って、左右を30%と70%に分割する場合、


  <FRAMESET COLS="30%,70%">〜</FRAMESET>

あるいは、

  <FRAMESET COLS="30%,*">〜</FRAMESET>

と省略することも可能です。


 次に、分割された画面に呼び出すファイル指定の仕方を考えてみましょう。二分割する場合には、分割のし方を規定したファイル、左右の分割された画面にそれぞれ呼び込むファイル、つまり全部で三つのファイルを準備する必要があります。
 上記の例では、左側に背景色が赤のファイル(仮に red.htm)を、右側に背景色が緑のファイル(仮に green.htm)を呼び込んでいます。


 <FRAMESET COLS="30%,*">

  <FRAME SRC="red.htm">
  <FRAME SRC="green.htm">

 </FRAMESET>




  上記の場合、三つのファイルは同一フォルダー内に保存されています。異なる場所にある場合には、パスの問題が出てくるわけです。

 ● リンクしたファイルを指定したウィンドウに呼び込む 

 指定したウィンドウに指定したファイルを呼び込むにはどうしたらいいでしょうか?
このためには、少なくとも以下のことが必要になります。

  1. 指定するウィンドウに名称が付けられていること
  2. 呼び込む先の指定の仕方
  3. ウィンドウの開き方についての指定



<FRAME SRC="ファイル名" NAME="ウィンドウの名称">


 上記のように、フレーム設定をした際に、NAME の属性タグでウィンドウの名称を指定しておきます。また、リンクで開く先を指定する場合には、


<A HREF="ファイル名" TARGET="ウィンドウの名称">

ウィンドウの名称には
ウィンドウの開き方として、以下のような指定もできる。
_BLANK 名前のない新しいウィンドウに開く
_SELFターゲットを参照している要素と同じウィンドウへ
_PARENTFRAMESETを定義しているウィンドウへ
_TOP既存のフレームを取り消して開く


 ● 練習問題 

とにかく、やってみましょう!。開いているウィンドウは常に一つです。