<FRAMESET>フレームでウィンドウを分割する

<FRAMESET>を使うと、一つのウィンドウ内に複数のページを表示することができます。

ウィンドウをどのように区切るかを指定するのが<FRAMESET>タグで、分割された各フレームに表示する内容(HTML文書)を指定するのが<FRAME>タグです。 通常のHTML文書(ファイル)は、<HEAD><BODY>から構成されますが、フレームの分割を指定するHTMLファイルでは、本来<BODY>があるべき場所に<FRAMESET>を配置します。 ですので<BODY>タグは使用できませんので注意して下さい。

また<FRAMESET>でウィンドウを分割する際には、ウィンドウをどのように分割するか指定するHTMLファイルと、分割する各フレームの数分のHTMLファイルが必要となります。 例えば画面を2分割する際は、ウィンドウをどのように分けるか指定するファイルが1つ、左右のウィンドウに表示するファイルがそれぞれ1つずつで、合計3つのファイルが必要となります。

<FRAMESET>の使い方は、<BODY>タグの代わりに本文の始めに配置します。 col属性で左右、rows属性で上下の分割を指定します。 また縦分割の場合は上から順に、横分割の場合は左から順にそれぞれの分割する領域のサイズを指定して下さい。 値はピクセル数かパーセント(%)、もしくは「*(残り全てという意味)」で指定します。

また<FRAMESET>~</FRAMESET>内に<FRAMESET>~</FRAMESET>を入れ子状で配置する事で、水平分割と垂直分割を組み合わせることができます。

フレームを使ったページは、携帯などのフレーム非対応ブラウザでは何も表示されません。 その場合の対応として、代わりに表示する内容を指定するには<NOFRAMES>を使用して下さい。

なおフレームを利用する場合には、<!DOCTYPE>として「Frameset」を指定するようにしましょう。

使用した時の例

<html>
<head>
   <title>フレームの使用例</title>
</head>
<frameset rows="80,*">
    <frame src="frame-top.html">
    <frameset cols="150,*">
        <frame src="frame-left.html">
        <frame src="frame-right.html">
    </frameset>
</frameset>
</html>

ブラウザ上の表示例

書式

  • <frameset rows="高さ">~</frameset> ・・・・・・ 上下の分割(横割り)
  • <frameset cols="">~</frameset> ・・・・・・ 左右の分割(縦割り)
  • <frame src="url" name="フレーム名"> ・・・・・・ 表示する内容

高さ:上から順にカンマ「,」で区切り指定
幅:左から順にカンマ「,」で区切り指定
url:フレームの内容として表示するHTMLファイルのURL
フレーム名:リンクなどの表示先として指定する場合に利用する名前

基本的な分割の例

<frameset rows="高さA,高さB,高さC">
  <frame src="表示内容1.html">
  <frame src="表示内容2.html">
  <frame src="表示内容3.html">
</frameset>

ブラウザ上の表示例

frame表示例
<frameset cols="幅A,幅B,幅C">
  <frame src="表示内容1.html">
  <frame src="表示内容2.html">
  <frame src="表示内容3.html">
</frameset>

ブラウザ上の表示例

frame表示例
<frameset rows="高さA,高さB" cols="幅C,幅D">
  <frame src="表示内容1.html">
  <frame src="表示内容2.html">
  <frame src="表示内容3.html">
  <frame src="表示内容4.html">
</frameset>

ブラウザ上の表示例

frame表示例

属性

cols="" フレームを左右に分割し、それぞれの幅を左から順に指定
rows="" フレームを上下に分割し、それぞれの高さを上から順に指定
border="" フレームの境界線の幅
frameborder="" フレームの境界線。1で表示、0で非表示
bordercolor="" フレームの境界線の色

対応ブラウザなどのデータ

形式 <frameset>~</frameset> カテゴリ
開始タグ 必須 終了タグ 必須
汎用属性 accesskey / class / contenteditable / dir / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer3~ , Google Chrome1~ , Firefox1~ , Opera1~ , Safari1~

「∗」での幅や高さの指定

<FRAMESET>のrows属性やcols属性などでは、幅や高さを指定する際にピクセル数や%以外にも比率で指定することができます。 その場合使用するのが「∗(アスタリスク)」です。

使い方は「∗」の前に整数を付け指定します。例えば長さをピクセルや%で最初に設定します。 その場合その長さが確保され、残りの部分が指定された比率で分配されます。 「150,1∗,2∗」という指定であれば、150ピクセルを除いた残りの長さが「1∗,2∗」の割合で分割されます。

また「∗」だけ指定した場合は「1∗」と同じ意味となります。

HTML5での状況と関連情報

HTML5では、<FRAMESET>は廃止。<iframe>や<div>を使いましょう。