• 公開日：2025.03.08 最終更新日：2025.03.08

iframe（インラインフレーム）の使い方と例！注意点も紹介

Webページに外部コンテンツを埋め込む方法としてiframe（インラインフレーム）が使われます。ホームページ制作でも利用されることがありますが、書き方や注意点について気になる方も多いのではないでしょうか。

このページでは、iframeの書き方や使用例、注意点について解説します。iframeが表示されない原因についても触れているので、正しく活用するための参考にしてください。

iframe（インラインフレーム）とは

iframe（インラインフレーム）とは、Webページ内に別のページやコンテンツを埋め込むためのHTML要素です。YouTube動画やGoogleマップなど、外部コンテンツを表示する際によく使用されます。

かつて、HTML4.01ではiframeは非推奨のタグとされていましたが、HTML5では正式にサポートされ、現在も利用可能です。

ただし、SEOの評価が低いことや、セキュリティリスクなどの理由から、使用には注意が必要です。近年では、ホームページのユーザビリティ向上やセキュリティ対策の観点から、iframeを使わない方が良いと考えられるケースも増えています。

そのため、JavaScriptやoEmbedなどを使った他の埋め込み方法を検討することが推奨されることもあります。

iframeを利用するシーン

iframe（インラインフレーム）は、他のホームページのコンテンツをページ内に埋め込む際に利用されます。

たとえば、クロスドメインの外部コンテンツを表示するケースでは、直接リンクを設置するとユーザーがホームページから離脱してしまう可能性がありますが、iframeを活用すればページ内でコンテンツを表示しつつ、スムーズな閲覧体験を提供できます。

また、ホームページのスクショ画像を掲載する代わりに、iframeを使用すれば最新の状態を維持できるというメリットもあります。スクショ画像の場合、元サイトがリニューアルされると情報が古くなってしまうため、リアルタイムで内容を反映したい場合にiframeが役立ちます。

ただし、クロスドメインの制約により、すべてのホームページがiframeでの埋め込みを許可しているわけではありません。「接続が拒否されました」というエラーが発生することもあるため、事前に埋め込み可能かどうか確認することが重要です。

iframeで使われる属性

ここでは、iframe（インラインフレーム）を使用する際に重要な属性を紹介します。

src属性

src属性は、iframe内に表示するコンテンツのURLを指定するための属性です。

この属性が正しく設定されていないと、iframeが正常に表示されない原因となることがあります。

width・height属性

widthやheight属性は、iframeの表示サイズを指定するためのものです。ピクセルや％の値を指定できます。

％指定を活用することで、レスポンシブデザインにも対応しやすくなります。

allow属性

allow属性は、iframe内で許可する機能を制御するための属性です。たとえば、カメラやマイクの使用、全画面表示の許可などを設定できます。

この属性を適切に設定することで、埋め込んだコンテンツの動作を制御でき、不要な機能を制限することでセキュリティリスクを軽減できます。

sandbox属性

sandbox属性は、iframe内のコンテンツに対する制限を設定し、セキュリティを強化するための重要な属性です。指定することで、スクリプトの実行やフォーム送信などを制限できます。

このように記述すると、iframe内のスクリプトが実行されなくなり、安全性が向上します。特定の機能を許可したい場合は、オプションを追加することも可能です。

クロスドメインのコンテンツを埋め込む際は、iframeセキュリティリスク対策のためにsandbox属性の使用を検討することが推奨されます。

name属性

name属性は、iframeに名前をつけるために使います。この名前を指定すると、リンクのtarget属性と組み合わせて、クリックしたリンク先をiframe内に表示することができます。

この例では、最初のiframeにはhttps://example.com/が表示されます。その後「このリンクをクリック」を押すと、リンク先のhttps://another-example.com/がiframe内に読み込まれ、表示が切り替わります。

name属性を使うことで、1つのiframe内で複数のリンク先を切り替えて表示できるため、ページ全体を切り替えずにユーザーの操作性を高められます。

loading属性

loading属性は、iframeの読み込みタイミングを制御するために使います。特に、ページの表示速度を改善したい場合に効果的です。

この例では、loading="lazy"を指定することで、ユーザーが実際に画面をスクロールしてiframeが表示される位置に到達するまで、読み込みが遅延されます。

これにより、ページ全体の初期表示が軽くなり、ユーザー体験の向上やSEOにも効果があります。

iframeの書き方

ここでは、iframe（インラインフレーム）の基本的な書き方について解説します。

iframe内のHTMLを作成する

iframeの使用では、まずHTMLに<iframe>タグを記述し、src属性に埋め込むコンテンツのURLを指定します。

このコードでは、https://example.com/のWebページを幅600px、高さ400pxのサイズで埋め込んでいます。

CSSでiframeのスタイルを調整する

デフォルトのiframeは枠線が表示されることがあります。これを非表示にしたり、デザインを調整したりする場合は、CSSを適用します。

また、iframeの表示エリアを中央に配置したい場合は、display: block;に加えてmargin: auto;を指定すると、横幅を固定した状態で中央寄せが可能になります。

iframeをレスポンシブに対応する

スマートフォンやタブレットなどの画面サイズに応じてiframeのサイズを調整するには、widthを100%に設定し、高さをaspect-ratioで調整する方法が一般的です。

または、高さを手動で指定する場合は以下のように position: relative;を活用することもできます。

このようにCSSを適用することで、デバイスの画面サイズに応じてiframeを適切に調整することができます。

iframeの使用例

ここでは、iframe（インラインフレーム）を活用した使用例を紹介します。

YouTube動画の埋め込み

YouTubeでは、動画ごとに埋め込み用のHTMLコードが用意されているため、取得方法を紹介します。

まず、埋め込みたいYouTube動画のページにアクセスして、「共有」ボタンをクリックします。

その後、「埋め込む」ボタンをクリックします。

表示された右側にある動画の埋め込みコードをコピーしてHTMLに埋め込めば完了です。また、開始位置を調整するためには、「開始位置」のチェックボックスをクリックすれば問題ありません。

ちなみに開始位置の時間は、埋め込むボタンを押したタイミングになります。

Googleマップの埋め込み

次にホームページにGoogleマップを埋め込む方法を解説します。

まずGoogleマップで埋め込みたい場所を検索します。

左側の詳細情報を確認して、埋め込みたい場所が表示されていれば、「共有」ボタンをクリックします。

「地図を埋め込む」タブをクリックして、サイズを調整したら、「HTMLをコピーする」をクリックします。

コピーしたHTMLをホームページにペーストすれば完了です。

iframeの注意点

ここでは、iframe（インラインフレーム）を使用する際の重要な注意点を解説します。

SEO効果が弱い

iframeを使用すると、埋め込んだコンテンツの内容が検索エンジンに認識されにくくなります。

Googleなどの検索エンジンは、iframe内のテキストを直接クロールしないため、ページの評価に影響を与えにくいのが特徴です。そのため、検索エンジンに認識させたい重要なコンテンツは、通常のHTMLで記述する方が適切です。

HTML5で廃止された属性もある

HTML4で使用できたiframe関連の属性の一部は、HTML5では非推奨や廃止されました。

たとえば、frameborderはHTML5では廃止され、代わりにCSSでborderを設定する方法が推奨されています。同様に、scrollingも非推奨となり、スクロールの可否はCSSのoverflowを使って制御することが推奨されます。

これらの仕様変更に対応しないと、最新のブラウザで正常に動作しないことがあるため注意が必要です。

セキュリティ対策が必須

iframeを使用すると、クロスサイトスクリプティングやクリックジャッキングといったセキュリティリスクが発生する可能性があります。

外部サイトを埋め込む場合、不正なスクリプトが実行されることを防ぐために、sandbox属性を設定すると安全性が向上します。また、X-Frame-Optionsヘッダーを適切に設定することで、悪意のあるホームページによるクリックジャッキングを防ぐことができます。

セキュリティリスクを考慮し、必要な対策を施すことが重要です。

iframeが表示されないことがある

iframeを使用しても、クロスドメインの制約やサーバーの設定によって正しく表示されないことがあります。

埋め込み先のホームページがX-Frame-OptionsをDENYやSAMEORIGINに設定している場合、iframe内での表示が制限されるため、埋め込みがブロックされることがあります。また、ブラウザの設定やセキュリティポリシーにより、iframe内のコンテンツがブロックされることもあります。

さらに、srcの指定ミスや、httpとhttpsのプロトコルの違いによって、正常に読み込まれないケースもあるため、動作確認を行うことが重要です。

まとめ：iframeの使い方を正しく押さえよう

iframe（インラインフレーム）は、Webページ内に外部コンテンツを埋め込むための便利なHTML要素です。YouTubeやGoogleマップの埋め込みなど、さまざまな用途で活用できます。

しかし、SEOの評価が低いことやセキュリティリスク、クロスドメインの制約などのデメリットもあるため、使用する際は注意が必要です。特に、ホームページ制作においては、iframeが表示されないケースや、代替方法の検討も考慮することが大切です。

適切に活用すれば、ユーザー体験を向上させることができるため、使用する場面を見極めながら、適切な設定や対策を行うことが重要です。