<frameset></frameset> <frame> <noframes></noframes>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 ---
要素

フレームの設定を行うと、ウィンドウを分割することができます。

分割例

[フレームの分割例]


フレームを使用した文書は、分割を設定する文書と、そこへ読み込まれる文書によって構成されています。

  • 分割を設定する文書 … どのように分割するのかを設定する文書(この文書にアクセスされる)
  • 読み込まれる文書 … 分割された各フレーム内に読み込まれる文書(実際に表示される文書)

例えば、左右に2分割された文書の場合は、分割を設定する文書が1つ、左右のフレームに表示される文書が1つずつ、計3つの文書が必要となります。

左右に2分割する場合の例

[ファイル構成の例]


index.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="100,*"> … 左右の分割を指定(左:100ピクセル、右:残り全て)

<frame src="example1.html"> … 左のフレームに example1.html を表示
<frame src="example2.html"> … 右のフレームに example2.html を表示

<noframes>
<body>
<p>フレームの代替内容</p>
</body>
</noframes>

</frameset> … 分割の指定を終了

</html>

上記の例の場合、index.html にアクセスすると example1.htmlexample2.html が表示されることになります。

ソースコードの説明

frameset要素の中に、frame要素noframes要素を配置することになります。

  • 必須とはされていませんが、フレームを使用する際には適切な代替内容を用意しておくようにしましょう。

使用例


<!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="example1.html">
<frame src="example2.html">

<noframes>
<body>
<p>フレームの代替内容</p>
</body>
</noframes>

</frameset>

</html>

表示例

サンプル画面へ新規ウィンドウで表示

name属性とtitle属性を指定した例

<!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="example1.html" name="menu" title="メニュー">
<frame src="example2.html" name="contents" title="コンテンツ">

<noframes>
<body>
<p>フレームの代替内容</p>
</body>
</noframes>

</frameset>

</html>

表示例

サンプル画面へ新規ウィンドウで表示