HTML/フレーム
フレームとは、複数個に分割した画面に、それぞれ別のページを表示する機能。従来までは頻繁に使われてきたが、最近ではフレームを使わず各ページに直接メニューを組み込むタイプが増えてきている。そのため、フレームが使われることは最近ではかなり少なくなったが、HTML初心者がフレーム作成に取り組むことは、HTMLの理解の手助けとなるであろう。
作成方法[編集]
フレームには、最低3つのHTMLファイルが必要になる。
- フレームの構成（組み込みの設定）を行うファイル。
- フレームに表示するファイル一つめ。
- フレームに表示するファイル二つめ。
一つめのファイルによって分割の縦横とサイズを設定し、参照者にはこのファイルを参照させる。二つめ、三つめ以降は、メニューやメインコンテンツ表示に利用される。「フレームに表示するファイル」はリンクターゲットなどの一部を除いて通常のページと同一である。ここではフレームの構成を行うファイルについて説明する。
基本の型[編集]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>フレーム</title>
</head>
<frameset cols="200,*">
<frame src="menu.html" name="left">
<frame src="main.html" name="right">
<noframes>
<body>
<a href="info.html">インフォメーション</a><br>
<a href="howto.html">たこ焼きの作り方</a><br>
<a href="bbs.cgi">掲示板</a>
</body>
</noframes>
</frameset>
</html>
DTDはStrictやTransitionalではなくFramesetを利用。フレームの設定を行うHTMLファイルは、body要素の変わりにframeset要素を使っているため、html要素直下にbody要素をおくことができない。ただしnoframes要素直下にbody要素の記述が必須とされている。
frameset要素によってフレームを作成することを宣言し、どのようにフレームを配置するか設定することが出来る。フレームの設定には以下の要素を使用することが可能となっている。
- cols
- 左右の分割比を設定。上記事例の場合200ピクセルを左ページにとり、残りを右ページに取るという意味である。
- 分割比の取り方を20%,*とした場合、画面の20%を左ページに取り、残りを右ページに取る。3つ組み合わせて20%,*,5%とすることも出来る。
- rows
- 上下の分割比を設定する。分割形式はcols属性と同様。単体で利用されることが多いがcols属性との併用が不可能と言うわけではなく、cols属性と同時に利用することで十字に四分割したフレームを構成することも可能となっている。
frame要素[編集]
frame要素では各フレームに表示するHTMLファイルを指定する。frame要素ひとつにつきひとつのフレームの設定を行うことが出来る。設定可能な数に限度はないが、余りたくさんのフレームを指定すれば当然ながらブラウザの読み込み量が不必要に増大したり可読性を下げることもある。以下は使用可能な属性。
- src
- フレームとして初期状態で表示するファイル名を入力する。
- name
- フレームに名前を付けるもので、記述は任意。a要素でリンクを張る際に表示先のフレームを指定する際に使用する。詳しくはHTML/ハイパーリンク#リンクターゲットを参照されたい。
noframes要素[編集]
noframes要素はフレーム対応環境だと無視され、<noframes>〜</noframes>の内容はフレーム未対応環境でのみその内容が表示される。しばし<frameset>〜</frameset>の外に記述されることがあるがこれは誤りであり、<frameset>〜</frameset>の間に記述しなければならない。
noframes要素の直下にはbody要素を置き（必須）、そこから通常と同じ形式でページを作成する。特に決まった内容形式は存在しないがフレームを使用した場合の代替となるコンテンツを用意すべきであり、「フレーム対応のブラウザで閲覧してください」などと書くのは好ましくない。
フレームの装飾[編集]
フレームを使用する際は必ず境界線が生じるが、framesetに以下の属性を加えることによりこの境界線をカスタマイズすることができる。
- frameborder
- 値は1か0、またはyesかno。境界線を表示する/表示しないを設定できる。
- borderとframespacing
- 値は数値。境界線サイズをピクセル単位で指定する。ブラウザによって対応がまちまちなため、両方とも同じように設定すると良い。
- bordercolor
- 値は色。
<FRAMESET cols="200,*" frameborder="1" border="5" framespacing="5" bordercolor="#ff0000">
この場合、境界線は設置され、サイズは5ピクセル、色は赤で表示される。
三分割以上のフレーム[編集]
frameset要素とframe要素をうまく組み合わせることで、上下左右を織り交ぜた複雑な構成も利用可能である。例えば単純に同じ方向へ三分割したい場合はframeset要素内でframe要素を三つ使うことも出来るが、frameset要素をframe要素を入れることで二分割と三分割を切り替えられるようにすることも出来る。また、異なる方向への分割や、十字に区切らない形式での四分割を行う場合もframeset要素内にframeset要素を入れ子にし、既存のフレームをさらに分割するという方法が用いられる。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>フレーム</title>
</head>
<frameset cols="200,*">
<frame src="head.html" name="top">
<frameset rows="20%,80%">
<frame src="menu.html" name="left">
<frame src="main.html" name="right">
<noframes>
<body>
<a href="info.html">インフォメーション</a><br>
<a href="howto.html">たこ焼きの作り方</a><br>
<a href="bbs.cgi">掲示板</a>
</body>
</noframes>
</frameset>
</frameset>
</html>
インラインフレーム[編集]
インラインフレームとは、HTML文書の中にフレームを埋め込む方法で、iframe要素を利用する。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>インラインフレーム</title>
</head>
<body>
<iframe src="test.html" width="300" height="200">
未対応環境用の内容
</iframe>
</body>
</html>
最低限必要な属性は以下の3つである。
- src
- インラインフレームの中に表示するファイル名を指定する。
- width
- 横幅を指定する。 %単位で指定を行うことによりウインドウ幅に合わせた設定が可能である。ただし小さ目の数値（割合）を指定した場合、ウインドウサイズやスクリーンサイズの小さい環境で極端に幅が狭くなり可読性を損なうことがあるので注意したい。
- height
- 高さを指定する。%単位で指定を行うことが出来るが、親要素の値がauto（height無指定）だった場合、フレームの高さが画面全体に広がるかどうかはDOCTYPE宣言やブラウザの種類によって変化する。
<iframe>〜</iframe>の間にある内容はインラインフレーム対応環境だと無視され、未対応環境でのみ表示される。frameset要素のときに使われるnoframes要素同様、可能な範囲で代替的な内容を記述することが好ましい。
属性として以下を設定できる。太字がデフォルトの値である。
- name
- インラインフレームの名前であり、使い方はフレームの場合と同様である。
- align
- 値はleft center right。インラインフレームの表示位置を左揃え・中央揃え・右揃えから設定する。
- scrolling
- 値はauto yes no。スクロールバーを表示/非表示を設定する。autoはブラウザがファイルの長さに応じて判断する。
- frameborder
- 値は1 0。フレームの境界線の有無を設定する。
- marginwidth
- 値はピクセル単位の数値。フレームの左右の余白を設定する。
- marginheight
- 値はピクセル単位の数値。フレームの上下の余白を設定する。
- noresize
- 属性名は省略できる。フレームのリサイズを禁止する。
