2.11 フレーム

``フレーム機能''とは， Webブラウザの画面をいくつかに区切って，それぞれの領域に異なるHTMLファイルを表示させる機能のことです．例えばメニューと内容に画面を分割し，メニューを常時表示するようにしてWebページを使いやすくできます．

Lynx，w3m，携帯電話などに搭載のWebブラウザのように，フレーム機能をサポートしないWebブラウザがあるので，Webページを見るユーザの環境を考えて利用してください．

2.11.1 Webページの文書型の宣言

ファイルの冒頭で， <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> と宣言して，HTML 4.01 FramesetのDTDにしたがって記述されていることを宣言します．

2.11.2 フレームの作成

フレームの枠組みを定義するためのHTMLファイルを作成します．フレームを表示するには，フレーム構成の情報を <frameset>タグと </frameset>タグで囲みます．フレームを表示できないWebブラウザでは， <noframes>タグで囲まれた内容が表示されます．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<title>フレームのタイトル</title>
</head>
<frameset>
 <noframes>
  フレーム機能に対応していないWebブラウザではこの部分が表示される．
 </noframes>
</frameset>
</html>

フレームの枠組みを指定するには， <frameset>タグを用います．

<frameset cols="割合1，割合2,,..." rows="割合1,割合2,...">
.............
</frameset>

`<frameset>`タグで指定する属性

cols属性
横方向の分割をカンマで区切って指定します．幅の値は，ピクセル()か Webブラウザのウィンドウのサイズに対する割合(%) で指定します．また，残りすべてを指定するには`*'を使用します．
rows属性
縦方向の分割をコンマで区切って指定します．高さの値の指定はcols属性と同じです．
1つの<frameset>タグの中に rows属性とcols属性を記述することで複雑なフレーム構成も可能です．

フレームの設定を行う - `<frame>`タグ

各フレームの名前やリンク先の情報を指定するには <frame>タグを利用します．

<frame name="フレーム名" src="URL" scrolling="キーワード">

name属性
フレームの名前を指定します．
src属性
フレームに表示するHTMLファイルのURLを指定します．
scrolling属性
スクロールバーの表示について指定します．スクロールバーを常時表示させるには`yes'，非表示にするには`no'，フレームの大きさに文章が収まらなかった時に自動的に表示するには`auto'を指定します．なお，scrolling属性を指定しない場合は`auto'に設定されます．

フレームに対応していないときに表示する - `<noframes>`タグ

フレーム機能をサポートしていないWebブラウザに対しては， <noframes>タグ内に記述された内容が表示されます．

<noframes>
 ............
</noframes>

2.11.3 別フレームへのリンク先指定

フレーム内にあるリンクをクリックすると，通常は同じフレーム内にリンク先のが表示されます． <a>タグのtarget属性を利用すると，リンク先のHTMLファイルを任意のフレームや新しいウィンドウに表示できます．

<a href="リンク先のWebページ" target="リンク先を表示するフレーム名">
...........
</a>

target属性には次のような値が指定できます．

target属性
target属性に指定できる値は次の4種類があります． <frame>タグのname属性で設定したフレーム名を指定すると，リンク先のWebページをそのフレーム内に表示します．
1. _top
  現在表示しているフレーム構成を破棄しリンク先のWebページを表示します．
2. _parent
  ウィンドウがフレームに分割されていれば， 1段だけ分割を解除して，その親フレームに表示します．
3. _self
  リンクがあるフレーム内にリンク先のWebページを表示します．
4. _blank
  新しいウィンドウにリンク先のWebページを表示します．

**図2.12**: <frame>タグを使った結果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <html> <head> <title> Frame test Page </title> </head> <frameset rows="120,,15%"> <frame src="head.html" name="head" scrolling="no"> <frame src="body.html" name="body" scrolling="no"> <frameset cols="40%,"> <frame src="menu.html" name="menu"> <frame src="comment.html" name="coment"> </frameset> <noframes> <p> このWebページは「フレーム機能」を使用しています．フレーム機能の使えるWebブラウザで見ましょう． </p> </noframes> </frameset> </html>
↓

図2.12: <frame>タグを使った結果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>

<title>
Frame test Page
</title>
</head>
<frameset rows="120,*,15%">
 <frame src="head.html" name="head" scrolling="no">
 <frame src="body.html" name="body" scrolling="no">
 <frameset cols="40%,*">

  <frame src="menu.html" name="menu">
  <frame src="comment.html" name="coment">
 </frameset>
 <noframes>
  <p>
    このWebページは「フレーム機能」を使用しています．
    フレーム機能の使えるWebブラウザで見ましょう．
  </p>

 </noframes>
</frameset>
</html>

↓