フレーム

[Webプログラミングもくじ]

フレームとは?

ブラウザ画面を縦あるいは横の方向に複数分割し、それぞれの領域において、指 定したコンテンツを閲覧させることのできる仕組み。

なぜフレームを使う?

基本的には、別々の情報を、一度に同じ場所で見せたいときに使う。この用途の ためには、ブラウザのウィンドウをもうひとつ開かせる方法もあるが、それらが 重なってしまうなどの不具合がある。フレームの場合は重なりあうことはない。

利点

  1. 指定したフレームに指定したページを開かせることができる
  2. 一方のフレームをメニュー、もう一方のフレームをメニューが示すコンテンツにすると、 複雑なサイトをブラウズするときに、ユーザの見通しがよい
  3. ユーザに異なるコンテンツを同時に見せることができる

欠点
  1. ユーザがブックマーク(お気に入り)を付けるとき、その時点のブラウザにお けるフレームの状態(どのページがどこに表示されているか)をブックマーク に記録することができない(Netscape 4.75の場合)。
  2. スクロールバーが複数できると、それらの操作が面倒臭い
  3. 視覚障害者が用いる読み上げブラウザが対応できない
  4. 作成者がtarget属性に注意してリンクを作成しないと、ブラウズしているうちに、フレー ムの中に再度フレームが生成されてしまい、収拾がつかなくなる
    フレームの中にフレームが作成される例
  5. メニューとコンテンツをフレームによって分離したページデザインの場合、 そのコンテンツ側だけを表示した状態では他のコンテンツとの関連が分かり にくい
    例 このページをフレーム無しで見 ると...

4,5番目の欠点については、ページデザインに注意を払うことによって、避ける ことは可能である。

フレーム作成

フレームを作成するためのWEBページは、通常のWEBページとわずかに異なる。
  1. 先頭の文書タイプ宣言では、Frameset を入れる
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
  2. body部は使用しない。代わりに frameset 部にてフレームの区切りかたやフ レーム内に入れるコンテンツを指定する

縦に分割されたフレーム

左を全体の30%の幅、右を70%の幅とした例 
<frameset cols="30%,70%">
  <frame src="link1.html">
  <frame src="link2.html">
</frameset>
link1.html link2.html

上下分割

<frameset rows="20%,80%">
  <frame src="link1.html">
  <frame src="link2.html">
</frameset>
link1.html
link2.html

コンテンツを指定したフレームに表示する

フレームに名前をつけておく。ここでは、左側を menu 、右側を main とする。 
<frameset cols="30%,70%">
  <frame name="menu" src="link1.html">
  <frame name="main" src="link2.html">
</frameset>
link1.html ファイルの中のリンクにおいて、現在 link2.html が表示されてい る右側のフレームにコンテンツを表示したいとき、link1.html に書くべきリン クには、target属性の値を右側のフレームの名前とする必要がある。 
<a target="main" href="link3.html">LINK3を表示</a>
target属性の値には、始めから以下のものが用意されている。
target="_top"
現在のフレーム画面を解消し、ブラウザいっぱいにリンク先を表示する。
target="_blank"
現在のブラウザ画面とは別の、新しいブラウザ画面を作り、そこにリン ク先を表示する。

フレームを使ったメニュー

作り方

よくフレームが使われる例として、フレームによって左右にブラウザを分割し、 右側にメニュー、左側にそのメニューが示すコンテンツを表示するものが挙げ られる。上下に分割し、上をメニューとするものもある。

このときメニュー側のリンクタグには、target="コンテンツ側のフレーム 名" をつける必要がある。しかし、この時全てのリンクに target 属性を付け るのは面倒である。そこで、もしコンテンツ側のフレーム名が main であれば、 メニューのヘッダ部に、 

<base target="main">
と書いておけば、全てのリンクは main のフレームに表示される。それ以外の 表示を行いたいときのみ、リンクに target 属性を設定するとよい。

フレームによるメニューって時代遅れ?

トップページにメニューを置き、サイトのコンテンツへのアクセスを助け る機能を、広い意味でのナビゲーション機能という。しかし、このようなナビ ゲーション機能をフレームによって実現する方法は、近年やや人気が無くなっ て来ているようである。その理由は、フレームの欠点 に示した。

フレームによるメニューに代わって、現在では表機能を使った複雑な段組 を作り、表の要素としてメニューを入れるものが、ナビゲーション機能として、 見栄え、使いやすさともに人気を集めつつあるようだ。しかし、フレームと同 等な使い勝手を実現するには、どのページの一部にもナビゲーション機能(メ ニュー)を含まれていなければならない。このため、メニューの変更(新たなコ ンテンツの追加など)があった場合は、ほとんど全てのコンテンツのメニュー 部にその変更が及ぶので、コンテンツの管理を手作業にて行うのは非常に困難 である。通常、そのようなデザインのサイトでは、動的Webコンテンツ生成が 使われているため、メニュー変更も、あまり作成者の負担にはならない。

表機能を使ったメニューを備えたページ

Impress PC Watch

管理コストの少ないフレームによるメニュー

一方で、フレームを使ったメニューの場合、基本的にメニューの変更は、メ ニュー用のHTML文書の変更だけで済み、既に作成したコンテンツについては、メ ニューの変更による内容の変更は及ばないため、手作業による管理が比較的楽で ある。したがって、手作業でWebコンテンツを管理する場合には、フレームを使っ たメニューによってナビゲーション機能を持たせるデザインがお勧めである。