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>
<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 COLS="...">...</FRAMESET>
<FRAMESET ROWS="...">...</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 分割される。
<FRAMESET> で分割されたフレームに対して個々の情報を定義するのが
<FRAME>
である。分割されてできたフレームの数だけ必要で,“ここに”の形をとり,属性によってフレームの性質を設定する。
基本になる形は,それぞれのフレームに NAME 属性で名前をつけておいて,そこに SRC 属性でその中に表示させる HTML を呼び出す。
属性 | 値 | 解説 |
---|---|---|
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> で情報を定義しなくてはならない。
<FRAMESET>...</FRAMESET> で画面をいくつかのフレームに分割し,<FRAME> で各フレームの名前やはじめに表示するファイルを指定する。