フレームを作成する

※ FRAME要素はHTML5では使えません。

 フレームを使うと、画面をいくつかに区切って、おのおのに異なるページを表示させることができます。

 FRAMESET要素で、画面をどのように区切るかを指定し、分割された各フレームに何を表示するのかを指定するのがFRAME要素です。FRAMESET要素は、通常BODY要素が来るべき部分(=</HEAD>の直後)に配置し、その代わりにBODYを取り除くことになります。

 フレームの分け方には2種類あり、左右に分ける場合はcols属性を、上下に分ける場合はrows属性を用い、それぞれ分けたい大きさを%、ピクセル数、もしくは割合(整数値+*。例えば1:2:3に分割したい場合は1*,2*,3*とする。なお、1*は*と略記可能。)で表現し、各々の数値を半角カンマで区切って表示します。また、フレームで区切ったものを更に分割したい場合は、分割させたい部分の本来FRAME要素が入る部分に、更にFRAMESET要素で分割の指定をしてやることになります。

 FRAME要素のname属性は、そのフレームに名前をつけるものです。フレーム内の文書に存在するリンクは、通常の設定ではそこをクリックするとリンク先を同じフレームに表示します。これを別なフレームに表示したい場合は、A要素のtarget属性、もしくはBASE要素のtarget属性に、表示させたいフレーム(のFRAME要素)のname属性で付けられた名前を指定してやる必要があります。

 NOFRAMES要素は、フレームが使えない状態で表示させる内容を指定します。この要素は、<FRAMESET>~</FRAMESET>内の最初か全体の最後に一つだけ配置してください。NOFRAMES要素には、まずBODY要素を配置し、その中に表示させたい内容を記述します。内容としては、「フレームに対応したブラウザでご覧ください」というものではなく、フレーム版の代わりになるような内容、あるいは各々のページへのリンクを配置しておくようにしましょう。

 例えば、左右にウインドウを分割し、左側180ピクセル、残り全部を右側に費やす場合は、以下のようなHTMLになります。 なお、下の例のように、フレームのもとになるHTMLには、
<!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.01 Frameset//EN"
 "http://www.w3.org/TR/html4/frameset.dtd">

という文書型宣言をしなければなりません。

<!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.01 Frameset//EN"
 "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>正式なフレームページ用のHTML</title>
</head>
<frameset cols="180,*">
  <frame src="navigate.html" name="l_navi">
  <frame src="contents.html" name="r_contents">
 <noframes>
  <body>
  <p> フレーム未対応のブラウザを使用している場合は、
  <a href="noframes.html">未対応用のページ</a>へお進みください。
  (フレーム用と同じものを、フレームを用いずに表示します)</p>
  </body>
 </noframes>
</frameset>
</html>

フレームの分割例とそのソース

分け方ソースの書き方
content1.html
(高さa)
<frameset rows="a,b,c">
  <frame src="content1.html">
  <frame src="content2.html">
  <frame src="content2.html">
</frameset>
content2.html
(高さb)
content3.html
(高さc)
分け方ソースの書き方
content1.html
(幅a)
content2.html
(幅b)
content3.html
(幅c)
<frameset cols="a,b,c;>
  <frame src="content1.html">
  <frame src="content2.html">
  <frame src="content3.html">
</frameset>
分け方ソースの書き方
content1.html
(幅a,高さc)
content2.html
(幅b,高さc)
<frameset cols="a,b" rows="c,d">
  <frame src="content1.html">
  <frame src="content2.html">
  <frame src="content3.html">
  <frame src="content4.html">
</frameset>
content3.html
(幅a,高さd)
content4.html
(幅b,高さd)
分け方ソースの書き方
content1.html
(高さa)
<frameset rows="a,b">
  <frame src="content1.html">
  <frameset cols="c,d;>
    <frame src="content2.html">
    <frame src="content3.html">
  </frameset>
</frameset>
content2.html
(幅c,高さb)
content3.html
(幅d,高さb)