HTML

The <frameset> element in HTML is an old (now deprecated) element that allows a single browser window to be split into multiple frames, each displaying a separate HTML file.

frameset 要素

<frameset>とは?

フレームセットの概要

<frameset>要素は、複数のHTML文書を一度に表示するために画面領域を区切る(分割する)方法を指定する要素です。ウェブサイトの異なるパーツ(例:ナビゲーションバー、コンテンツ領域、ヘッダーやフッターなど)を別々のHTMLファイルとして読み込み、1つのブラウザウィンドウ内で並行して表示する仕組みを実現します。

従来のフレームレイアウトの仕組み

フレームの仕組み

フレームレイアウトとは、1つのページを複数の“枠”に分割し、それぞれの枠に別々のHTMLファイルを表示する仕組みです。たとえば下記のように2つのフレームがあるとします。

Plaintext

+-------------------+-------------------+
|     Frame A       |     Frame B       |
|  (HTMLファイル1)   |  (HTMLファイル2)   |
+-------------------+-------------------+

ユーザーは単一のURL(フレームセットのページ)を開くだけですが、ブラウザの画面上は2つの独立したHTML文書が表示されます。これはサーバー側で結合しているのではなく、ブラウザがそれぞれの枠に別HTMLをロードしている形になります。

フレームセットページとフレームページの関係

フレームセットページ
<frameset>を使って、画面レイアウト(どのフレームをどの領域に配置するか)を指定するページ。
フレームページ
各フレームに表示される実際のHTMLコンテンツページ。

ユーザーがアクセスするのは通常、フレームセットページのURLですが、フレームの内部では別々のHTMLファイルが読み込まれているという構造になります。

<frameset>と関連属性

HTML4の文法では、通常の<body>タグの代わりに<frameset>タグを使用して画面を分割します。具体的には以下のような使い方があります。

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
	<meta charset="UTF-8">
	<title>フレームセットの例</title>
</head>
<frameset cols="25%,75%">
	<frame src="navigation.html" name="navFrame">
	<frame src="content.html" name="mainFrame">
</frameset>
</html>

よく使われる属性

<frameset>要素の属性

rows
ウィンドウを水平方向に分割する比率やピクセル数を指定(例:rows="100, *")。
cols
ウィンドウを垂直方向に分割する比率やピクセル数を指定(例:cols="25%, 75%")。
border, frameborder, framespacingなど
フレーム間の枠線や余白の指定(厳密にはブラウザ依存のものも多く、HTML4の仕様でも細かい違いがあります)。

<frame>要素の属性

src
表示するHTMLファイルや外部ページのURLを指定。
name
フレームに名前を付ける。リンク先のターゲット(target属性)と関連付ける時に使用。
scrolling
スクロールバーの表示設定。"yes" | "no" | "auto"を指定。
noresize
ユーザーがフレームのサイズをドラッグして変更できないようにする。
marginwidth, marginheight
フレーム内の余白を設定。

具体的な例

基本的な垂直分割

以下のコードは、ウィンドウを左側25%と右側75%に分割するシンプルな例です。

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
	<meta charset="UTF-8">
	<title>垂直フレーム分割の例</title>
</head>
<frameset cols="25%, 75%">
	<frame src="left.html" name="leftFrame">
	<frame src="right.html" name="rightFrame">
</frameset>
</html>

水平分割とネスト

フレームセットをさらに入れ子(ネスト)にして、より複雑なレイアウトも可能です。

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
	<meta charset="UTF-8">
	<title>複数フレームの例</title>
</head>
<frameset rows="100, *">
	<frame src="header.html" name="headerFrame" scrolling="no" noresize>
	<frameset cols="200, *">
		<frame src="sidebar.html" name="sidebarFrame">
		<frame src="main.html" name="mainFrame">
	</frameset>
</frameset>
</html>

この例では、

メリット・デメリット

メリット

レイアウトが容易
HTML4時代はテーブルレイアウトやフレームレイアウトが主流でした。CSSが充実していなかった時代は、フレームを使うことで画面分割が簡単に実現できました。
メニューなどの更新が簡単
ナビゲーションやヘッダーなど、複数ページで共通する部分をフレームに切り出しておけば、一か所のファイルを更新するだけで他のページに反映できます。
ロード負荷の分割
ブラウザ上ではフレームごとに別々のHTMLを読み込むため、一度ナビゲーションフレームやヘッダーフレームが読み込まれると、メインコンテンツだけを切り替えるような使い方が可能です。

デメリット

URLの取り扱いにくさ
フレーム内でページが切り替わっても、ブラウザのアドレスバーのURLはフレームセットのまま。ブックマークしたいコンテンツがフレームの奥にあると、正しいURLがわからないなどの問題が起きます。
SEO(検索エンジン最適化)上の不利
検索エンジンがフレーム内のページを適切にクロールできないことがあり、コンテンツの発見性やインデックスが悪化します。
アクセシビリティの問題
スクリーンリーダーなどの支援技術はフレーム構造を理解しにくく、ユーザーが操作しづらいケースがあります。
HTML5で非推奨
近年の標準仕様では<frameset>は廃止されており、新しいブラウザや将来的なサポートを考えると、使い続ける利点がほとんどありません。

HTML5以降での扱い

HTML5では、フレームセットは完全に廃止されています。そのため、以下のような要素や属性はHTML5の仕様書で非推奨または削除対象になっています。

HTML5を採用したページでは、<body>タグ内でレイアウトを組むのが基本です。レイアウトの多くは、以下のような技術を組み合わせて行います。

代替策:<iframe>を使用する方法

HTML5では、特定のコンテンツを別ページから読み込む場合には、<iframe>要素を使用するのが一般的です。<iframe>はページ内に“インラインフレーム”を埋め込む仕組みで、<frameset>のようにページ全体のレイアウトを分割するものではありません。

上記の例では、<iframe>をメインカラムに埋め込み、サイドバーからのリンクをtarget="contentFrame"で指定して、iframeの中身を切り替える構造にしています。<frameset>のようにURLが固定されたままではなく、トップページは1つのURLになり、iframe内のみが変化する仕組みです。レイアウトはCSSで管理します。

まとめと注意点

<frameset>は古い技術
HTML4以前で多く使われていましたが、HTML5では廃止されており、ほとんどの新規開発で利用されることはありません。
フレームのデメリットに留意
URLの取り扱い、SEO対策、アクセシビリティへの配慮など、現代のウェブサイトに求められる要件と合わない部分が多いため、既存システムでの改修や古いサイトのメンテナンスで必要な場合を除き、原則として使用は避けましょう。
既存のレガシーシステムを引き継ぐ場合
代替となる技術を学ぶ

最終的なポイント