frameset要素 -- フレームの割り付け

基本データ

frameset要素
文書型 適用 子要素 開始タグ 終了タグ 分類
Strict × 利用できません
Transitional × 利用できません
Frameset ○ frameset要素 frame要素 noframes要素 必須 必須 html要素の子要素

属性

固有属性

rows="横の分割"
Strict: × | Transitional: ○ | Frameset: ○
横方向に分割するフレームの高さを、カンマ(,)で区切って指定します。パーセント値、ピクセル値、長さ比率の値が利用できます。
cols="縦の分割"
Strict: × | Transitional: ○ | Frameset: ○
縦方向に分割するフレームの高さを、カンマ(,)で区切って指定します。パーセント値、ピクセル値、長さ比率の値が利用できます。

解説

フレームページを作るときに、フレームをどのように分割するかを指定する要素です。frameset要素はFrameset DTD中で定義されているため、文書型宣言は<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">となります。Strict DTDやTransitional DTDではhead要素の後にbody要素が続きますが、Frameset DTDではbody要素の代わりにframeset要素が続きます。

frameset要素の中には、必要な分だけframe要素を配置します。frame要素がそれぞれのフレームの内容になります。また、frameset要素の中身にnoframes要素を持たせると、フレーム機能を持たないブラウザがnoframes要素の中身を表示します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
      "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="ja">
  <head>
    …(タイトル・文字コードなどの情報)
  </head>
  <frameset …>
    <frame …>
    …(必要なだけframe要素を配置)
    <noframes>
      <body>
        …(フレーム未対応のブラウザで表示する内容)
      </body>
    </noframes>
  </frameset>
</html>

rows属性、cols属性でそれぞれ横、縦にどのように分割するかを指定します。フレームの横幅、縦幅をピクセル値、パーセント値、長さ比率で記述し、カンマ(,)で区切ります。

次のようにすれば、左側のフレームに20%、右側のフレームに80%の横幅が割り当てられます。

cols="20%,80%"

整数の後にアスタリスク(*)を続けると、長さ比率になります。次の例では2:3の比率で左右に分割します。

cols="2*,3*"

ピクセル値、パーセント値と長さ比率が同時に指定されたときは、最初にウィンドウ全体の幅に対してピクセル値とパーセント値が割り当てられ、残りを長さ比率で分割します。次のようにすると、左側が100px、残りの横幅が右側に割り振られます。

cols="100,1*"

次の例ではウィンドウの横幅が1000pxだとすると、左側が100px、中央が1000px×20%=200px、右側に残りの700pxが割り当てられます。

cols="100,20%,1*"

「1*」は省略して「*」と書くこともできます。

フレームページを作るときは、フレーム未対応のブラウザのためにnoframes要素を使いましょう。noframes要素はframeset要素の子要素に一つだけ配置することができます。フレーム未対応のブラウザはnoframes要素の中身をフレームの代わりに表示します。必須ではありませんが、フレームを使うときはnoframes要素内でフレームの代替文書などへのリンクを提供するべきです。

frameset要素やframe要素にはtitle属性で説明をつけることができます。フレームを扱うことのできる音声ブラウザやテキストブラウザであれば、title属性の内容をアンカーとしたリンクを表示するなどの動作が可能になります。これも必須ではありませんが、指定しておくのが望ましいです。以下の例では説明上title属性に「上段フレーム」などの説明をつけていますが、title属性の内容は「メニュー画面」「メイン画面」などフレームの役割が分かるものにしてください。

縦・横に2分割

rows属性で横に分割します。次の例では上段のフレームに70px、残りを下段のフレームに割り当てます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
      "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="ja">
  <head>
  …
  </head>
  <frameset title="サイトのタイトル" rows="70,*">
    <frame src="…" title="上段フレーム" name="top">
    <frame src="…" title="下段フレーム" name="bottom">
    <noframes>
      <body>
        …
      </body>
    </noframes>
  </frameset>
</html>

cols属性で縦に分割します。次の例では左側に100px、残りを右側に割り当てます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
      "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="ja">
  <head>
    …
  </head>
  <frameset title="サイトのタイトル" cols="100,*">
    <frame src="…" title="左フレーム" name="left">
    <frame src="…" title="右フレーム" name="right">
    <noframes>
      <body>
        …
      </body>
    </noframes>
  </frameset>
</html>

縦・横に3分割

カンマ(,)で区切って3つの値を指定すれば、3分割されます。次の例では横に3分割しています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
      "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="ja">
  <head>
    …
  </head>
  <frameset title="サイトのタイトル" rows="50,60,*">
    <frame src="…" title="上段フレーム" name="top">
    <frame src="…" title="中央フレーム" name="middle">
    <frame src="…" title="下段フレーム" name="bottom">
    <noframes>
      <body>
        …
      </body>
    </noframes>
  </frameset>
</html>

この例では縦に3分割します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
      "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="ja">
  <head>
    …
  </head>
  <frameset title="サイトのタイトル" cols="60,70,*">
    <frame src="…" title="左フレーム" name="left">
    <frame src="…" title="中フレーム" name="center">
    <frame src="…" title="右フレーム" name="right">
    <noframes>
      <body>
        …
      </body>
    </noframes>
  </frameset>
</html>

格子状に分割

rows属性、cols属性を一緒に指定すれば、格子状にフレームを分割することができます。次の例では横に2分割、縦に3分割しているので、合計2×3=6のフレームが作られます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
      "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="ja">
  <head>
    …
  </head>
  <frameset title="サイトのタイトル" rows="*,2*" cols="*,2*,4*">
    <frame src="…" title="上段左フレーム" name="top-left">
    <frame src="…" title="上段中フレーム" name="top-center">
    <frame src="…" title="上段右フレーム" name="top-right">
    <frame src="…" title="下段左フレーム" name="bottom-left">
    <frame src="…" title="下段中フレーム" name="bottom-center">
    <frame src="…" title="下段右フレーム" name="bottom-right">
    <noframes>
      <body>
        …
      </body>
    </noframes>
  </frameset>
</html>

縦・横の組み合わせ

frameset要素を入れ子にすることで、縦横に複雑に分割することができます。次の例では最初のframeset要素で上下に分割した後、次のframeset要素で左右に分割しています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
      "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="ja">
  <head>
    …
  </head>
  <frameset title="サイトのタイトル" rows="100,*">
    <frame src="…" title="上段フレーム" name="top">
    <frameset title="下段フレーム" cols="60,*">
      <frame src="…" title="下段左フレーム" name="bottom-left">
      <frame src="…" title="下段右フレーム" name="bottom-right">
    </frameset>
    <noframes>
      <body>
        …
      </body>
    </noframes>
  </frameset>
</html>

この例では、最初のframeset要素で左右に分割した後、次のframeset要素で上下に分割します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
      "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="ja">
  <head>
    …
  </head>
  <frameset title="サイトのタイトル" cols="60,*">
    <frame src="…" title="左側フレーム" name="left">
    <frameset title="右側フレーム" rows="100,*">
      <frame src="…" title="右側上フレーム" name="right-top">
      <frame src="…" title="右側下フレーム" name="right-bottom">
    </frameset>
    <noframes>
      <body>
        …
      </body>
    </noframes>
  </frameset>
</html>

フレームの問題点

フレームを使うとメニューとコンテンツを機能的に分離できるメリットがありますが、デメリットもあります。一番の問題は、テキストブラウザや音声ブラウザなど、フレーム機能を持たないブラウザが存在することです。その様なブラウザのために、製作者はフレームの代わりになるページなどを用意する必要があります。

フレームに対応したブラウザなら問題がないかと言うと、決してそんなことはありません。フレームに対応したブラウザでは、フレームページをブックマークしてもフレーム内部の状態が保存されません。そのため、ブックマークからフレームページにアクセスすると、毎回トップのページに戻されることになります。

また、別のサイトの製作者があなたのフレーム内部のページにリンクすると、そのリンクにアクセスしたときにフレーム全体が表示されません。フレーム全体を表示させるためには、フレームページのトップに戻らなくてはなりません。

メニューを表示したままにできるためフレームは便利な機能のように思えますが、フレーム内部のページが単独では充分に機能しないため、リンクやブックマークを行うときに問題が起こります。特別な理由がない限りは、進んでフレームを使う必要はないでしょう。使いやすいフレームページを作るには相当な配慮が必要です。(でも面倒です。)

解決策

それでもフレームを使いたい人のために、上述のような問題を解決する手段を考えてみたいと思います。

次の例では、現在のページをchapter2.htmlとします。

まず、フレームなしでも閲覧できるようにするために、各ページには「次のページ」「前のページ」「目次」などへのリンクを設けます。

<ul>
  <li><a href="contents.html" rel="contents">目次</a></li>
  <li><a href="chapter1.html" rel="prev">前のページ</a></li>
  <li><a href="chapter3.html" rel="next">次のページ</a></li>
</ul>

ここまではフレームを使わないページを作るときでも同じです。フレームを使うときはこれに加え「フレーム全体を表示」「フレーム内部のページをウィンドウ全体に表示」というリンクを設置します。

<ul>
  <li><a href="contents.html" rel="contents">目次</a></li>
  <li><a href="chapter1.html" rel="prev">前のページ</a></li>
  <li><a href="chapter3.html" rel="next">次のページ</a></li>
  <li><a href="index.html" rel="start" target="_top">フレーム全体を表示</a></li>
  <li><a href="chapter2.html" target="_top">このページをウィンドウ全体で表示</a></li>
</ul>

こうすることで、フレーム内部のページをウィンドウ全体で表示し、それをブックマークすることができるようになります。また、そのブックマークからアクセスしてきたときは、「フレーム全体を表示」をクリックすることでトップのページに戻ることができます。

幾分かましになりましたが、「フレーム全体を表示」をクリックすると必ずトップのページに戻されてしまうという問題はまだ残っています。また、フレーム未対応の音声ブラウザやテキストブラウザでも、「フレーム全体を表示」「このページをウィンドウ全体で表示」のリンクが表示されて(もしくは読み上げられて)しまうため、閲覧者が混乱するかもしれません。そもそもフレームの仕組みを知らない人では後に加えた二つのリンクは使いこなせないでしょう。

Frameset DTDの定義

<![ %HTML.Frameset; [
<!ELEMENT FRAMESET - - ((FRAMESET|FRAME)+ & NOFRAMES?) -- window subdivision-->
<!ATTLIST FRAMESET
  %coreattrs;                          -- id, class, style, title --
  rows        %MultiLengths; #IMPLIED  -- list of lengths,
                                          default: 100% (1 row) --
  cols        %MultiLengths; #IMPLIED  -- list of lengths,
                                          default: 100% (1 col) --
  onload      %Script;       #IMPLIED  -- all the frames have been loaded  --
  onunload    %Script;       #IMPLIED  -- all the frames have been removed --
  >
]]>

Information

現在の位置