iframeとは？HTMLでの使い方・埋め込み方法・注意点を初心者向けに解説

はじめに

iframeという言葉をWeb制作やHTMLの学習中に見かけたことはありませんか。動画の埋め込みや外部サービスの表示など、iframeは一見便利そうに見える一方で、仕組みや使いどころを理解しないまま使うと、表示崩れやセキュリティ、SEO面での問題につながることもあります。

本記事では「iframeとは何か」という基本概念から、HTMLでの具体的な記述方法、実際の埋め込み例、そして注意すべきポイントまでを初心者にも分かりやすく整理します。iframeを正しく理解し、安心して使える判断力を身につけましょう。

iframeとは何か

iframeの基本的な意味

iframeとは、HTMLで使用される要素の一つで、Webページの中に別のWebページを読み込んで表示するための仕組みです。正式には「inline frame（インラインフレーム）」と呼ばれ、現在表示しているページの一部として、外部または内部の別ページを埋め込むことができます。

これにより、親ページの構造を保ったまま、独立したコンテンツを表示できる点が大きな特徴です。

iframeでできること

iframeを利用すると、以下のようなことが可能になります。

• 外部サイトのコンテンツをページ内に表示する
• 動画・地図・フォームなどを簡単に埋め込む
• システム的に独立した画面を一部として組み込む

特に、YouTube動画やGoogleマップなど、提供側がiframe用コードを配布しているケースでは、実装コストを抑えつつ機能を導入できます。

frameタグとの違い

過去にはframeやframesetといったタグも存在していましたが、これらはHTML5では非推奨となっています。frameタグはページ全体を分割する設計であったのに対し、iframeはあくまでページ内の一要素として扱われます。現在のWeb制作では、iframeのみを使用するのが一般的です。

iframeの仕組み

ページ内に別ページを表示する構造

iframeは、親ページのHTML内にiframeタグを記述し、そのsrc属性に表示したいページのURLを指定します。読み込まれたページは、あたかも一つの部品のように表示されますが、内部的には完全に別のHTMLドキュメントとして扱われています。

親ページと子ページの関係

iframeで表示されるページは「子ページ」、それを含むページは「親ページ」と呼ばれます。子ページは独立したDOM（文書構造）やCSS、JavaScriptの実行環境を持つため、原則として親ページの影響を直接受けません。この独立性が利点である一方、制御の難しさにもつながります。

同一オリジンポリシーとの関係

iframeを理解する上で重要なのが同一オリジンポリシーです。異なるドメインのページをiframeで読み込んだ場合、JavaScriptから内容を操作することは制限されます。これはセキュリティを確保するための仕様であり、iframe利用時の設計判断に大きく関わります。

iframeのHTML記述方法

基本的なiframeタグの書き方

iframeの基本構文は以下の通りです。

<iframe src="https://example.com"></iframe>

このように、src属性に表示したいURLを指定するだけで、該当ページが表示されます。

よく使われる属性

iframeでは、以下の属性がよく利用されます。

• width / height

表示サイズの指定

• title

アクセシビリティ向上のための説明

• loading="lazy"

遅延読み込みによる表示速度改善

特にtitle属性は、アクセシビリティや品質評価の観点から設定が推奨されます。

レスポンシブ対応の考え方

iframeは固定サイズのままだと、スマートフォン表示で崩れやすくなります。そのため、CSSを用いて親要素に対して比率指定を行うなど、レスポンシブ対応を考慮した設計が重要です。

iframeの埋め込み例

動画サービスの埋め込み

YouTubeやVimeoなどの動画サービスは、iframe形式の埋め込みコードを提供しています。これを利用することで、動画プレイヤーを自前で実装することなく、安定した配信が可能になります。

地図や外部サービスの埋め込み

Googleマップや予約フォーム、決済画面などもiframeで提供されることが多く、外部機能を簡単に導入できる点がメリットです。ただし、表示サイズや操作性には注意が必要です。

実務でよくある利用シーン

実務では、以下のような場面でiframeが活用されます。

• 管理画面内への外部ツール表示
• 既存システムとの段階的な統合
• セキュリティ的に分離した画面の表示

iframeを使う際の注意点

セキュリティ上のリスク

iframeは外部ページを読み込むため、意図しないスクリプトの実行や情報漏えいのリスクがあります。sandbox属性を活用し、許可する操作を最小限にすることが重要です。

SEOへの影響

iframe内のコンテンツは、親ページのSEO評価に直接反映されにくいという特性があります。そのため、検索流入を狙う主要コンテンツをiframeに依存する設計は避けるべきです。

iframeを使わない方が良いケース

以下のような場合は、iframe以外の方法を検討する方が適切です。

• SEOを重視したコンテンツ表示
• 親ページとの強い連携が必要なUI
• 高い操作性や一体感が求められる画面

まとめ

iframeは、Webページ内に別ページを埋め込むための便利な仕組みであり、正しく使えば実装効率を大きく高めることができます。一方で、セキュリティやSEO、レスポンシブ対応など、注意すべき点も多く、目的に応じた適切な判断が欠かせません。

エンジニアを目指して学習を効率よく進めたい方には WEBMASTERS がおすすめです。 Web制作に必要な基礎知識が実践を通して効率よく身につくため、学習効率が大幅に向上します。学習環境や教材が充実しており、独学ではつまずきやすいポイントも現役エンジニアがしっかりサポートいたします。