インラインフレーム（iframe）｜ホームページ制作 用語集

ページ内に別ページを埋め込むHTMLの機能

インラインフレーム（iframe）とは、HTMLで作られたWebページの中に、別のHTMLページを埋め込むことができる機能です。たとえば、YouTube動画やGoogleマップ、他サイトのコンテンツなどを、自サイト内に表示したいときに使われます。

フレームとインラインフレームの違い

かつては、HTML4で導入された<frameset>や<frame>タグを使い、1つのブラウザ画面を複数のウィンドウに分割して、それぞれに異なるページを表示する方法が用いられていました。これが「フレーム機能」です。

しかし、以下の理由により、HTML5ではframesetおよびframeは非推奨（廃止）となりました。

• SEOに不利（ページ単位のインデックスが困難）
• ユーザー体験が悪化（ブラウザの戻るボタンが正しく動作しない等）
• モバイル対応に不向き
• レスポンシブデザインと相性が悪い

その代替として、現在ではインラインフレーム（<iframe>）が使われています。

iframeタグの基本構文と使い方

<iframe src="https://example.com" width="600" height="400" frameborder="0"></iframe>

• src: 埋め込みたいページのURLを指定
• width, height: 表示サイズ
• frameborder: 枠線の有無（HTML5ではCSS推奨）

iframeの主な活用シーン

• 動画の埋め込み（YouTubeなど）
• マップの埋め込み（Google Mapsなど）
• 外部サービスの表示（SNSタイムライン、チャットウィジェット等）
• 別ページの一部機能共有（申込フォームやキャンペーン告知）

iframe利用時の注意点とセキュリティ

iframeは便利な一方で、セキュリティ上の注意点も存在します。

リスク	対策・補足
クリックジャッキング	X-Frame-Options: SAMEORIGINを使用し、外部埋め込みを制限
パフォーマンス低下	iframeが多いと読み込みが遅くなるため、数は絞る
スマホでの表示崩れ	width: 100%;などのレスポンシブ対応が必要

さらに、埋め込まれたコンテンツと元のページは基本的にクロスドメインでのJavaScript通信はできません（Same-Origin Policyによる制限）。セキュリティと利便性のバランスをとる必要があります。

インラインフレーム（iframe）　まとめ

インラインフレーム（iframe）は、外部コンテンツや別ページを自サイトにシームレスに組み込むための有効な手段です。現在のHTML5では、旧来のフレーム機能（<frameset>や<frame>）は廃止され、代わりに<iframe>が標準的に利用されています。

ただし、見た目だけでなくユーザー体験やSEO、セキュリティにも配慮しながら、適切な場面で使用することが重要です。