【レガシー技術】フレーム分割の基礎

1990年代後半から2000年代初頭にかけて、Webサイトの画面を「メニュー」や「メイン画面」に分割して表示するために多用された技術です。

main.html
(メインコンテンツ)

左のメニューをクリックすると、右側の画面だけが切り替わる……という仕組みが当時は非常に画期的でした。

フレームの特徴と書き方

フレームを使う場合、<body>タグを使わずに<frameset>という特殊なタグで構成を定義します。

            <!-- 画面を左右に 20% と 80% で分ける例 -->

            <frameset cols="20%, 80%">

              <frame src="menu.html" name="left">

              <frame src="main.html" name="right">

              <noframes>

                このブラウザはフレームに対応していません。

              </noframes>

            </frameset>

なぜ使われなくなったのか？（デメリット）

便利に見えたフレームですが、以下のような致命的な弱点がありました。

SEOに弱い： 検索エンジンがサイトの構造を正しく巡回できない。
URLが変わらない： どのページを見てもアドレスバーのURLが変化しないため、特定のページにブックマークができない。
印刷が困難： 画面全体を綺麗に印刷するのが非常に難しい。
アクセシビリティ： 音声読み上げソフトが混乱しやすい。

現代での代わりの技術

現在では、フレームを使わずに以下の方法で同様の（あるいはそれ以上の）レイアウトを実現します。

目的	現代の手法
レイアウト分割	CSS (Flexbox / Grid)
共通パーツの読み込み	PHPのinclude / JavaScript
ページ内の一部だけ埋め込み	<iframe> タグ

※ <iframe>（インラインフレーム）は、現代でもYouTubeの埋め込み等で現役で使用されています。

HTML4.01 時代の遺物：フレーム（frame）

フレームの特徴と書き方

なぜ使われなくなったのか？（デメリット）

現代での代わりの技術