Section 10 : フレーム化(1)

 Netscape Navigator 2.0 で登場したフレーム化は WWW デザインの大きな転換点を作った。このフレーム化によって画面を上下や左右に分割して,情報量の多いページをすっきり整理できる。

フレーム化する文書を書く前に

 フレーム化は 1 つの HTML で実現するのではない。実は“フレームを割るだけ”の HTML を書いて,それから“それぞれのフレームで表示される”HTML を呼び出すのだ。

 ここでの“それぞれのフレームに表示される HTML”というのは,フレーム間をジャンプするなどの記述が加わるだけで,今までの HTMLとほとんど変わらない。ということでそれは後回しにして,まずは,“フレームを割る”HTML である。

 蛇足ながら,“フレーム化”はこの Academic HTML 4.0 で扱う HTML 4.0 Strict(HTML 4.01 Strict)という規格には含まれていない。HTML 4.0(HTML 4.01)を厳格に書くのであれば,フレームは用いてはならない。

フレーム分割の HTML

 フレーム分割の HTML は,今までの HTML とはかなり構造が違っている。

<HTML>

<HEAD>
<TITLE>...</TITLE>
</HEAD>

<FRAMESET>
  ......
  <NOFRAMES>
    <BODY>
      ......
    </BODY>
  </NOFRAMES>
</FRAMESET>

</HTML>

 おわかりのように,フレーム分割の HTML の主役は <FRAMESET>...</FRAMESET> である。フレームに対応しているブラウザでは,分割以外のことはこの HTML では行われない。

 <FRAMESET> 内に書かれる <NOFRAMES>...</NOFRAMES> は,フレーム分割が不可能なブラウザに対しての記述を行う。この中に <BODY>...</BODY> 以下,ふつうに HTML を書いていく。ここに“フレームに対応していなければ帰ってくれ”のように書く人がいるが,それはあまりにも残酷だ。結局フレーム内に表示される HTML はふつうのものとほとんど変わらないのだから,フレーム内に表示されるべき HTML へのリンクなりは作っておくべきである。

フレーム分割:<FRAMESET>

 さて,フレームの分割の方法であるが,まず,“分割の方法”を <FRAMESET> の属性として書くことから始める。

■横方向に分割

<FRAMESET COLS="...">...</FRAMESET>

■縦方向に分割

<FRAMESET ROWS="...">...</FRAMESET>

<FRAMESET> の属性
属性 解説
COLS 長さ(複数) 横方向の分割のしかたを与える。フレームの幅をカンマで区切って与える。
ROWS 長さ(複数) 縦方向の分割のしかたを与える。フレームの高さをカンマで区切って与える。

 幅や高さはピクセル指定,または現在分割しようとしている長さを 100% とするパーセント指定が可能。ほかに“比例配分”という方法もある。また,“残り全部”を表すのにアスタリスク「*」を使うことができる。

 通常は COLS 属性,または ROWS 属性を片方だけ指定して分割するが,両方指定した場合は十文字に分割される。

 たとえば,

<FRAMESET COLS="100, *, 15%">...</FRAMESET>

では画面は横に 3 分割され,左に 100 ピクセル,右に全体の 15% がとられ,残った幅が真ん中のフレームに割り当てられる。

<FRAMESET COLS="20%, 40%, *" ROWS="50%, *">...</FRAMESET>

では横方向に 20%,40%,その残り(40%)と分割され,縦は二等分される。結局画面が 6 分割される。

フレームの定義:<FRAME>

 <FRAMESET> で分割されたフレームに対して個々の情報を定義するのが

<FRAME>

である。分割されてできたフレームの数だけ必要で,“ここに”の形をとり,属性によってフレームの性質を設定する。

 基本になる形は,それぞれのフレームに NAME 属性で名前をつけておいて,そこに SRC 属性でその中に表示させる HTML を呼び出す。

<FRAME> の属性
属性 解説
NAME 文字列 フレームに与える一意な名前。<A HREF="...">でジャンプするときに,どのフレームへ向けてジャンプさせるかを指定するのに使う。
SRC URI 最初にフレームに表示される HTML の URI(URL)。
FRAMEBORDER 0 または 1 フレームの境界線を表示する(1),しない(0)を指定する。既定値は 1。
NORESIZE (属性値のみ) ユーザにフレームの大きさを変えさせないことを指定する。
SCROLLING キーワード スクロールバーの表示(yes),非表示(no),自動(auto)を指定する。既定値は auto
MARGINWIDTH ピクセル 左右マージン(余白)の幅。
MARGINHEIGHT ピクセル 上下マージン(余白)の幅。

 FRAMEBORDER および SCROLLING 属性を使って,各フレームの境界線やスクロールバーの表示をコントールできる。また,MARGINWIDTH および MARGINHEIGHT 属性で余白を小さく設定すれば,分割されて狭くなった画面を相対的に広く活用できる。

 いっぽう,<FRAME> が入るべき場所に <FRAMESET>...</FRAMESET> を入れ子にして書いてしまえば,そのフレームの領域をさらに分割できる。ただし,COLS および ROWS 属性でパーセント指定をする時は,分割しようとしている領域の幅または高さを 100% とすることに注意しなければならない。これによって,T 字型分割をはじめ,ひじょうに複雑なフレーム分割をすることもできる。当然そうやって割られたフレームには,それぞれ <FRAME> で情報を定義しなくてはならない。


◆Summary

 <FRAMESET>...</FRAMESET> で画面をいくつかのフレームに分割し,<FRAME> で各フレームの名前やはじめに表示するファイルを指定する。