この記事で分かること
iframeとframesetの歴史と役割の違いframesetが廃止された理由iframeが現代Webで主流になった背景- 同一オリジン制限や実務での注意点
HTML にはページ内に別ページを表示する仕組みとして iframe と frameset が存在しますが、現在では役割も評価も大きく異なります。
この記事では、frameset が廃止された背景や、iframe が現代Webで主流となった理由を歴史と仕様の観点から分かりやすく解説します。
iframe と frameset は何が違う？
HTML には「ページの中に別のページを表示する」ための仕組みとして
iframe と frameset が存在します。
しかし現在では、frameset は廃止（非推奨） となり、
iframe が唯一の現代的な方法 です。
frameset の歴史と役割
frameset は HTML4 時代に導入された仕組みで、
ブラウザ画面を複数のフレームに分割して表示するために使われていました。
<frameset cols="200px,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
しかし frameset には多くの問題がありました。
- URL が変わらずブックマークできない
- 戻るボタンの挙動が不自然
- SEO に弱い
- アクセシビリティが低い
- スマホとの相性が悪い
これらの理由から、HTML5 では frameset は廃止 されました。
iframe の特徴と現代での役割
iframe は HTML4 から存在する要素ですが、
HTML5 以降も現役で使われ続けています。
<iframe src="content.html"></iframe>
iframe が現代でも使われる理由は以下の通りです。
- ページの一部に別ページを埋め込める
- 広告・動画プレイヤー・SNS埋め込みなどで必須
- サンドボックス化（
sandbox属性）で安全に使える postMessageによる安全な通信が可能
特に 外部サービスの埋め込み に iframe は欠かせません。
iframe と frameset の比較表
| 項目 | iframe |
frameset |
|---|---|---|
| 用途 | ページ内に別ページを埋め込む | 画面全体を複数フレームに分割 |
| HTML5での扱い | 現役 | 廃止（非推奨） |
| SEO | 比較的良い | 非常に悪い |
| スマホ対応 | 良い | 悪い |
| セキュリティ | sandbox で制御可能 |
制御が難しい |
同一オリジン制限に注意
iframe 内のページを JavaScript で操作する場合、
同一オリジン（同じドメイン）である必要があります。
異なるドメインの場合：
contentWindowにアクセスできないcontentDocumentも取得できない- DOM 操作は完全に禁止
外部サービスを埋め込む場合は、
postMessage を使った通信が一般的です。
JavaScript 初心者におすすめの学習書籍
書籍で学ぶのが向いている人
iframe・framesetの歴史や役割の違いを体系的に理解したい- HTML の進化（HTML4 → HTML5）と非推奨要素の背景をしっかり学びたい
- ネット記事だけだと情報が断片的に感じる
iframe や frameset のようなページ埋め込み技術は、
Web の歴史・仕様変更・ブラウザ制限と深く関わっています。
書籍ではこれらの背景を体系的に学べるため、
「なぜ frameset が廃止され、iframe が現代でも使われるのか」
といった本質的な理解が身につきます。
いちばんやさしい JavaScript の教本
図解が多く、JavaScript とブラウザの仕組みを視覚的に理解できる入門書です。
iframe の基本構造や、
「なぜ frameset が非推奨になったのか」
といった Web の歴史的背景も合わせて理解しやすくなります。
この本で解決できること：
iframeの基本構造と安全な使い方が理解できる- HTML の進化と非推奨要素の背景を体系的に学べる
- 現代Webで使われる埋め込み技術の基礎が身につく
確かな力が身につく JavaScript「超」入門
DOM 操作・イベント・ブラウザ仕様など、より実践的な JavaScript を学びたい方に最適な入門書です。
iframe の同一オリジン制限や、
外部サービス埋め込みの注意点など、実務で必要な知識も理解できます。
この本で解決できること：
iframeと JavaScript の連携（contentWindow/postMessage）の基礎が学べる- 同一オリジン制限など、実務で必須のセキュリティ知識が身につく
- 現代Webでの埋め込みUIの考え方を理解できる
動画で理解を深めたい方へ（Udemy講座）
iframe の動作や同一オリジン制限は、
実際の画面を見ながら学ぶと理解が一気に深まります。
動画では「外部ページを埋め込んだときの挙動」や
「postMessage を使った通信」などを視覚的に確認でき、
初心者でも直感的に理解できます。
初心者のためのJavaScript 完全入門
JavaScript の基礎から DOM・イベント・ブラウザ仕様まで体系的に学べる人気講座です。
iframe の基本構造や、
HTML の歴史的背景を踏まえた理解が進みます。
この講座で解決できること：
iframeの基本動作を視覚的に理解できるframesetが廃止された理由を体系的に学べる- 現代Webでの埋め込みUIの考え方が身につく
→ 初心者のためのJavaScript 完全入門（Udemy）
超JavaScript 完全ガイド 2026
実務で必要なブラウザ制御・セキュリティ・外部サービス連携を深く理解したい方に最適な講座です。
iframe の同一オリジン制限や
postMessage を使った安全な通信など、
現代Webで必須の知識が身につきます。
この講座で解決できること：
- 外部サービス埋め込みに必要な
iframeの実践知識が身につく - セキュリティを考慮した埋め込みUIの設計が理解できる
- 現代的な Web アプリ構築の基礎がまとめて習得できる
体系的に学びたい方へ（スクールという選択肢）
独学の限界を感じやすいポイント
iframeとframesetの違いが曖昧なままになる- HTML の歴史や非推奨要素の背景が断片的になりやすい
- 同一オリジン制限やセキュリティ仕様でつまずいても相談できない
- 学習の順番に自信が持てない
スクールでは、プロの講師が学習ロードマップを作成し、
iframe の安全な使い方や
HTML5 での仕様変更などを体系的に理解できるようサポートしてくれます。
無料相談で得られるメリット
- あなたのレベルに合わせた学習計画を作成
iframeの実務的な使い方を丁寧にアドバイス- セキュリティや同一オリジン制限の理解を深められる
- エンジニア転職を視野に入れたキャリア相談も可能
Web 技術を効率よく学びたい方には、未経験からエンジニアを目指せる
DMM WEBCAMP の学習コースも選択肢のひとつです。
iframe と frameset に関するよくある質問（FAQ）
frameset が廃止されたのはなぜですか？
SEO・アクセシビリティ・戻るボタンの挙動など多くの問題があり、HTML5 で非推奨になりました。
iframe は今でも使われていますか？
はい。広告、動画プレイヤー、SNS埋め込み、外部サービスなどで広く使われています。
iframe 内のページを JavaScript で操作できますか？
同一オリジン（同じドメイン）の場合のみ可能です。異なるドメインでは制限されます。
frameset の代わりに何を使えばいいですか？
現代では iframe や SPA（React/Vue など）を使うのが一般的です。
まとめ
iframe と frameset は似ているようで、
現代Webでは役割も評価も大きく異なります。
frameset→ HTML5 で廃止iframe→ 現代でも現役で利用される重要要素
特に iframe は外部サービスの埋め込みや安全なサンドボックス化に欠かせないため、
現代Webでも重要な技術として使われ続けています。
