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>
要素は、複数のHTML文書を一度に表示するために画面領域を区切る(分割する)方法を指定する要素です。ウェブサイトの異なるパーツ(例:ナビゲーションバー、コンテンツ領域、ヘッダーやフッターなど)を別々のHTMLファイルとして読み込み、1つのブラウザウィンドウ内で並行して表示する仕組みを実現します。
フレームレイアウトとは、1つのページを複数の“枠”に分割し、それぞれの枠に別々のHTMLファイルを表示する仕組みです。たとえば下記のように2つのフレームがあるとします。
Plaintext
+-------------------+-------------------+
| Frame A | Frame B |
| (HTMLファイル1) | (HTMLファイル2) |
+-------------------+-------------------+
ユーザーは単一のURL(フレームセットのページ)を開くだけですが、ブラウザの画面上は2つの独立したHTML文書が表示されます。これはサーバー側で結合しているのではなく、ブラウザがそれぞれの枠に別HTMLをロードしている形になります。
<frameset>
を使って、画面レイアウト(どのフレームをどの領域に配置するか)を指定するページ。ユーザーがアクセスするのは通常、フレームセットページの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="100, *"
)。cols="25%, 75%"
)。<frame>
要素の属性
target
属性)と関連付ける時に使用。"yes" | "no" | "auto"
を指定。以下のコードは、ウィンドウを左側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>
cols="25%, 75%"
により、左を25%、右を75%の幅に設定。left.html
にはナビゲーションメニューを、right.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>
この例では、
header.html
)を配置。sidebar.html
)、右側にメインコンテンツ(main.html
)を表示。header
部分はscrolling="no"
とnoresize
で固定しており、ユーザーがフレームの高さを変えたりしないようになっている。<frameset>
は廃止されており、新しいブラウザや将来的なサポートを考えると、使い続ける利点がほとんどありません。HTML5では、フレームセットは完全に廃止されています。そのため、以下のような要素や属性はHTML5の仕様書で非推奨または削除対象になっています。
<frameset>
要素<frame>
要素<noframes>
要素border
やframespacing
など)HTML5を採用したページでは、<body>
タグ内でレイアウトを組むのが基本です。レイアウトの多くは、以下のような技術を組み合わせて行います。
<header>
, <nav>
, <main>
, <footer>
など)<iframe>
を使用する方法HTML5では、特定のコンテンツを別ページから読み込む場合には、<iframe>
要素を使用するのが一般的です。<iframe>
はページ内に“インラインフレーム”を埋め込む仕組みで、<frameset>
のようにページ全体のレイアウトを分割するものではありません。
上記の例では、<iframe>
をメインカラムに埋め込み、サイドバーからのリンクをtarget="contentFrame"
で指定して、iframeの中身を切り替える構造にしています。<frameset>
のようにURLが固定されたままではなく、トップページは1つのURLになり、iframe内のみが変化する仕組みです。レイアウトはCSSで管理します。
<iframe>
の利点は、HTML5でも正式にサポートされており、アクセシビリティ面でも注意を払えば十分活用可能です。<frameset>
と同様にSEO面では制限がある場合があるので、埋め込むコンテンツが検索される必要がある場合は注意しましょう。<frameset>
は古い技術<frameset>
が使われているサイトをメンテナンスする場合、仕組みを理解しておく必要があります。<iframe>
やCSSレイアウトを使った現代的な設計へ移行することを検討すると良いでしょう。<frameset>
を使ってのレイアウトよりも、**CSS(FlexboxやGridレイアウト)**を使ったモダンなアプローチが主流です。<iframe>
が役立ちます。<frameset>
要素の利用はHTML5で廃止されており、現在では非推奨。<iframe>
を組み合わせる方法を検討する。