iframe(Inline Frame、インラインフレーム)とは？意味をわかりやすく簡単に解説

text: XEXEQ編集部

iframe(Inline Frame、インラインフレーム)とは
iframe(Inline Frame、インラインフレーム)の基本的な使い方
iframeタグの基本的な構文と属性
iframeで別のWebページを埋め込む方法
iframeのセキュリティ上の注意点
iframe(Inline Frame、インラインフレーム)を使ったレイアウト例
iframeを使った広告の埋め込み方法
iframeによるSNSの投稿の埋め込み方法
iframeを使った動画コンテンツの埋め込み方法
iframe(Inline Frame、インラインフレーム)を使う際の注意点
iframeとセキュリティリスクについて
iframeとアクセシビリティについて
iframeとSEOについて
参考サイト

iframe(Inline Frame、インラインフレーム)とは

iframe(Inline Frame、インラインフレーム)は、HTML文書内に別のHTML文書を埋め込むためのタグです。iframeを使用することで、Webページ内に別のWebページを表示することができます。

iframeは、src属性で指定したURLのページを表示します。width属性とheight属性で、iframeの幅と高さを指定することができます。

iframeは、セキュリティ上の理由から、同一オリジン制約によって制限されています。これは、あるWebページから、別のドメインのページをiframeで埋め込むことができないという制約です。

iframeは、古いブラウザでは対応していない場合があります。そのため、iframeを使用する際は、代替コンテンツを用意しておくことが重要です。

iframeは、Webページのレイアウトを柔軟に構成できるため、広告の表示やSNSの埋め込みなど、様々な用途で使用されています。ただし、iframeの使用は必要最小限にとどめ、可能な限り他の方法を検討することが望ましいでしょう。

iframe(Inline Frame、インラインフレーム)の基本的な使い方

「iframe(Inline Frame、インラインフレーム)の基本的な使い方」に関して、以下3つを簡単に解説していきます。

iframeタグの基本的な構文と属性
iframeで別のWebページを埋め込む方法
iframeのセキュリティ上の注意点

iframeタグの基本的な構文と属性

iframeタグの基本的な構文は、<iframe src="埋め込むページのURL"></iframe>となります。srcは必須の属性で、埋め込むページのURLを指定します。

iframeタグには、width属性とheight属性を指定することで、埋め込むページの幅と高さを設定できます。単位はピクセル(px)またはパーセント(%)で指定します。例えば、<iframe src="https://example.com/" width="500" height="300"></iframe>と記述すると、幅500ピクセル、高さ300ピクセルでページが埋め込まれます。

このほか、frameborder属性でiframeの枠線の表示/非表示を設定したり、allowfullscreen属性で全画面表示を許可したりと、様々な属性が用意されています。用途に応じて適切な属性を指定することが大切です。

iframeで別のWebページを埋め込む方法

iframeを使って別のWebページを埋め込むには、埋め込みたいページのURLをiframeタグのsrc属性に指定します。例えば、<iframe src="https://www.google.com/"></iframe>と記述すると、GoogleのトップページがWebページ内に埋め込まれます。

埋め込むページのURLは、絶対URLでも相対URLでも指定できます。同一のWebサイト内のページを埋め込む場合は、相対URLを使うと便利です。例えば、<iframe src="./child.html"></iframe>と記述すると、同一ディレクトリ内のchild.htmlが埋め込まれます。

iframeで埋め込んだページは、埋め込み元のページとは独立して動作します。そのため、埋め込んだページ内のリンクをクリックしても、埋め込み元のページは遷移しません。リンクをクリックすると、iframe内で新しいページが表示されます。

iframeのセキュリティ上の注意点

iframeを使ってWebページを埋め込む際は、セキュリティ上の注意が必要です。特に、信頼できないサイトのページを安易に埋め込むのは避けるべきでしょう。iframeで埋め込まれたページが悪意のあるスクリプトを実行すると、埋め込み元のページに悪影響を及ぼす可能性があります。

こうしたリスクを軽減するため、iframeにはsandbox属性が用意されています。sandbox属性を指定すると、埋め込まれたページでのJavaScriptの実行やフォームの送信などが制限されます。例えば、<iframe src="https://example.com/" sandbox></iframe>と記述すると、埋め込まれたページではスクリプトの実行やプラグインの利用などが禁止されます。

また、HTTPSで提供されているページにHTTPのページを埋め込むと、混在コンテンツとなってしまいます。ブラウザによっては、セキュリティ上の理由から混在コンテンツをブロックする場合があるため、注意が必要です。埋め込み元と埋め込むページは、どちらもHTTPSで提供するようにしましょう。

iframe(Inline Frame、インラインフレーム)を使ったレイアウト例

「iframe(Inline Frame、インラインフレーム)を使ったレイアウト例」に関して、以下3つを簡単に解説していきます。

iframeを使った広告の埋め込み方法
iframeによるSNSの投稿の埋め込み方法
iframeを使った動画コンテンツの埋め込み方法

iframeを使った広告の埋め込み方法

iframeは、広告を埋め込むための主要な方法の1つです。広告ネットワークが提供するiframeタグを使うことで、簡単に広告を表示できます。例えば、Google AdSenseの広告を表示する場合は、<iframe src="https://tpc.googlesyndication.com/safeframe/1-0-37/html/container.html"></iframe>のようなタグを使用します。

広告を埋め込む際は、レスポンシブデザインに対応するためにwidth属性とheight属性を100%に設定することがよくあります。また、frameborder属性を0に設定して、iframeの枠線を非表示にするのも一般的です。こうすることで、広告がWebページに自然に溶け込むようになります。

ただし、広告を埋め込む際は、ユーザーエクスペリエンスを損なわないよう注意が必要です。大きすぎる広告やページの読み込みを妨げる広告は、ユーザーに不快感を与えてしまいます。適切なサイズの広告を適切な位置に配置するよう心がけましょう。

iframeによるSNSの投稿の埋め込み方法

TwitterやFacebookなどのSNSでは、投稿をWebページに埋め込むためのiframeタグが提供されています。例えば、Twitterの投稿を埋め込む場合は、<iframe src="https://platform.twitter.com/widgets/tweet_button.html"></iframe>のようなタグを使用します。

SNSの投稿を埋め込む際は、投稿の幅に合わせてiframeの幅を調整すると良いでしょう。Twitterの投稿の場合、width属性を550pxに設定するのが一般的です。また、SNSによっては埋め込み用のJavaScriptが提供されている場合があります。JavaScriptを使った方が、よりリッチな表現ができる場合もあります。

SNSの投稿を埋め込む際は、投稿の内容が適切であるか確認しておくことが大切です。不適切な内容の投稿を埋め込んでしまうと、Webページの信頼性を損ねる恐れがあります。また、SNSの利用規約に違反する方法で投稿を埋め込むのは避けるべきです。

iframeを使った動画コンテンツの埋め込み方法

YouTubeやVimeoなどの動画共有サービスでは、動画をWebページに埋め込むためのiframeタグが提供されています。例えば、YouTubeの動画を埋め込む場合は、<iframe src="https://www.youtube.com/embed/VIDEO_ID"></iframe>のようなタグを使用します。VIDEO_IDの部分には、埋め込みたい動画のIDを指定します。

動画を埋め込む際は、動画のアスペクト比に合わせてiframeのwidth属性とheight属性を設定すると良いでしょう。YouTubeの動画の場合、16:9のアスペクト比が一般的なので、width属性を560px、height属性を315pxに設定するのがよくあります。また、動画の自動再生を無効にしたり、関連動画を非表示にしたりと、動画の再生に関する設定をiframeタグの属性で指定できます。

動画を埋め込む際は、動画の再生がWebページの表示速度に与える影響を考慮する必要があります。大きなサイズの動画を埋め込むと、ページの読み込みが遅くなってしまうことがあります。また、自動再生を有効にすると、ユーザーに不快感を与える恐れがあります。動画はユーザーの選択によって再生されるようにするのが望ましいでしょう。

iframe(Inline Frame、インラインフレーム)を使う際の注意点

「iframe(Inline Frame、インラインフレーム)を使う際の注意点」に関して、以下3つを簡単に解説していきます。

iframeとセキュリティリスクについて
iframeとアクセシビリティについて
iframeとSEOについて

iframeとセキュリティリスクについて

iframeを使ってWebページを埋め込む際は、セキュリティリスクに十分注意する必要があります。特に、信頼できないサイトのページを安易に埋め込むのは避けるべきです。iframeで埋め込まれたページが悪意のあるスクリプトを実行すると、埋め込み元のページに悪影響を及ぼす可能性があります。

iframeにはsandbox属性が用意されており、これを使うことでセキュリティリスクを軽減できます。ただし、sandbox属性を使っても完全にリスクを排除できるわけではありません。信頼できるサイトのページであっても、適切にsandbox属性を設定し、必要最小限の権限だけを与えるようにしましょう。

また、iframeを使ってHTTPのページをHTTPSのページに埋め込むと、混在コンテンツになってしまいます。混在コンテンツは、ブラウザによってブロックされる場合があります。iframeを使う際は、埋め込み元と埋め込むページのどちらもHTTPSで提供するようにしましょう。

iframeとアクセシビリティについて

iframeを使ってコンテンツを埋め込む際は、アクセシビリティにも配慮が必要です。iframeで埋め込まれたコンテンツは、スクリーンリーダーなどの支援技術で読み上げられない場合があります。そのため、iframeの代替テキストを用意し、埋め込まれたコンテンツの概要を伝えるようにしましょう。

iframeの代替テキストは、title属性を使って指定します。title属性には、埋め込まれたコンテンツの概要を簡潔に記述します。例えば、<iframe src="https://example.com/" title="Exampleサイトの紹介ビデオ"></iframe>のように指定します。こうすることで、支援技術を使用しているユーザーにもコンテンツの概要を伝えられます。

また、iframeで埋め込むコンテンツは、キーボードでも操作できるようにすることが重要です。特に、フォームが含まれている場合は、キーボードでフォームを操作できるようにしなければなりません。iframeで埋め込むコンテンツは、アクセシビリティに配慮して作成されたものを選ぶようにしましょう。

iframeとSEOについて

iframeを使ってコンテンツを埋め込むと、SEO(検索エンジン最適化)に悪影響を及ぼす可能性があります。iframeで埋め込まれたコンテンツは、検索エンジンのクローラーが認識しにくいためです。そのため、iframeを多用すると、Webページのインデックスが適切に行われず、検索結果での表示順位が下がってしまうかもしれません。

特に、重要なコンテンツをiframeで埋め込むのは避けたほうが良いでしょう。重要なコンテンツは、Webページに直接記述するようにしましょう。どうしてもiframeを使う必要がある場合は、iframe内のコンテンツに適切なメタデータを設定し、クローラーが認識しやすいようにする工夫が必要です。

また、iframeで埋め込むページが多くなると、Webページの読み込み速度が低下する恐れがあります。読み込み速度の低下は、SEOにも悪影響を及ぼします。iframeは必要最小限の使用にとどめ、Webページの表示速度を高速に保つことが重要です。