HTMLのiframeとは？CSSでのカスタマイズ方法も解説！

iframeは、Webページの中に別のWebページや外部コンテンツを埋め込むためのHTML要素です。YouTube動画やGoogleマップなどを手軽に表示できる一方で、属性の指定方法や安全性、表示速度への配慮も欠かせません。

この記事では、iframeの基本的な意味からよく使う属性、主な用途、使うメリット、注意点、表示されないときの確認ポイントまで、初心者にもわかりやすく整理して解説します。

HTMLのiframeとは？
iframeでよく使う属性
1. 埋め込み時に設定する基本属性
2. 安全性や表示速度に関わる属性
HTMLのiframeの基本的な使い方
iframeを使うメリット
iframeのデメリット
1. SEO評価を受けにくい
2. 表示速度に影響しやすい
iframeを使うときの注意点
iframeが表示されないときの確認ポイント
HTMLを学ぶ方法
まとめ

HTMLのiframeとは？

iframeとは、Webページの中に別のWebページや外部コンテンツを埋め込むためのHTML要素です。正式には「inline frame（インラインフレーム）」と呼ばれ、現在表示しているページの中に、別の表示領域を作ってコンテンツを読み込めます。HTML仕様では、iframeはページ内に別の閲覧コンテキストを作る要素として定義されています。

たとえば、YouTube動画、Googleマップ、外部サービスのフォーム、別のWebページなどを、自分のサイト内にそのまま表示したいときに使われます。リンクのように別ページへ移動させるのではなく、同じページの中で外部コンテンツを見せられる点が特徴です。

通常のリンク設定との違いもあわせて理解したい方は、以下の記事も参考になります。

HTMLのリンク設定方法！aタグの基本からCSSでの装飾まで解説

iframeは便利な要素ですが、単に埋め込めばよいわけではありません。表示サイズの指定、読み込み先URLの設定、安全性に関わる属性の調整なども重要になります。そのため、基本的な役割を理解したうえで、用途に応じて適切に使い分けることが大切です。

HTMLそのものの基本構造から整理したい方は、以下の記事も参考にしてみてください。

HTMLとは？初心者向けに概念や基本構造などをわかりやすく解説

iframeでよく使う属性

iframeを使うときは表示内容やサイズ、安全性、読み込み方法などを属性で調整します。ここでは、特に使う属性を紹介します。

埋め込み時に設定する基本属性

iframeの基本属性として、まず押さえたいのは次の4つです。

src：iframe内に表示するページやコンテンツのURLを指定する属性
width：iframeの横幅を指定する属性
height：iframeの高さを指定する属性
title：iframeの内容を簡潔に説明する属性

srcは、何を埋め込むかを決めるための属性です。widthとheightは表示領域の大きさを調整するときに使います。titleは見た目には影響しませんが、スクリーンリーダー利用者が内容を理解しやすくなるため、アクセシビリティの面で重要です。

安全性や表示速度に関わる属性

外部コンテンツを埋め込むときは、次の属性もよく使われます。

sandbox：iframe内のコンテンツに制限をかける属性
loading：iframeをいつ読み込むかを指定する属性
referrerpolicy：埋め込み先へ送る参照元情報の扱いを制御する属性
allow：iframe内で許可する機能を調整する属性

sandboxを使うと、外部コンテンツの動作に制限をかけられるため、安全性を高めやすくなります。loadingは読み込みタイミングを調整する属性で、遅延読み込みを設定すると初期表示の負荷を抑えやすくなります。

referrerpolicyは参照元情報の送信範囲を調整するために使い、allowは全画面表示やカメラ、マイクなど、埋め込み先で使える機能を制御するときに役立ちます。

HTMLのiframeの基本的な使い方

iframeは、ページの中に別のコンテンツをそのまま表示したいときによく使われます。代表例は、YouTube動画やGoogleマップの埋め込みです。そのほか、外部サービスのページやフォームを表示したい場面でも使われますが、埋め込み先の設定によっては表示できないこともあります。

YouTube動画を埋め込む方法

YouTube動画を埋め込むときは、通常の動画ページURLをそのまま使うのではなく、埋め込み用のURL形式を使ってiframeを設置します。

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/動画のID"
  title="YouTube動画プレーヤー"
  loading="lazy"
  referrerpolicy="strict-origin-when-cross-origin"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  allowfullscreen>
</iframe>

必要に応じて自動再生や開始位置など、再生に関するパラメータを追加できる点も特徴です。

なお、YouTubeの埋め込みプレーヤーには最低サイズの目安があり、公式では少なくとも 200px × 200px 以上が必要とされています。見やすさを考えると、ある程度余裕のあるサイズで設置するのが安心です。

参考：YouTube｜YouTube Player API Reference for iframe Embeds

Googleマップを埋め込む方法

Googleマップを埋め込む場合も、iframeを使うのが一般的です。実装方法には、Googleマップの共有機能から取得できる埋め込みコードを使う方法と、Maps Embed APIを使う方法があります。

Maps Embed APIを使う場合は、以下のように埋め込み用URLとAPIキーを指定します。

<iframe
  width="600"
  height="450"
  style="border:0;"
  loading="lazy"
  allowfullscreen
  referrerpolicy="no-referrer-when-downgrade"
  title="会社所在地のGoogleマップ"
  src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=Tokyo+Station,Tokyo+Japan">
</iframe>

埋め込みでは、表示したい場所や検索結果、ルート案内などに応じてURLを設定します。

なお、Maps Embed APIの利用にはAPIキーが必要です。実装時は、見た目だけでなく、APIキーの管理や利用設定もあわせて確認しておきましょう。

外部ページを埋め込む方法

iframeは、YouTubeやGoogleマップ以外にも、別のWebページそのものを埋め込む用途で使えます。たとえば、自社の別ページ、外部サービスの管理画面、フォーム、案内ページなどを現在のページ内に表示したいときに便利です。

<iframe
  src="埋め込むページのURL"
  width="800"
  height="600"
  title="埋め込みページの説明">
</iframe>

ただし、外部ページは何でも自由に埋め込めるわけではありません。埋め込み先のサーバー側でX-Frame-OptionsやCSPのframe-ancestorsが設定されていると、他サイトからのiframe表示が制限されることがあります。

そのため、URLを指定しても表示されない場合は、コードのミスだけでなく、埋め込み先の制限も確認することが大切です。

iframeを使うメリット

iframeを使うメリットは、外部コンテンツを手軽に埋め込めることです。さらに、元のコンテンツを大きく作り変えずに表示しやすく、管理もしやすくなります。

ここでは、iframeの代表的なメリットを3つに分けて見ていきましょう。

外部コンテンツを埋め込みやすい

iframeのメリットは、外部コンテンツをかんたんにページへ表示しやすいことです。

たとえば、YouTube動画やGoogleマップは、埋め込み用のコードやURLを設定するだけで表示できます。自分で動画プレーヤーや地図機能を一から作る必要がないため、実装の手間を抑えやすくなります。

機能を自作しなくても、外部サービスの便利な機能をそのまま活用できる点は大きな利点です。ページの情報量や使いやすさを高めたいときにも役立ちます。

元のコンテンツをそのまま表示できる

iframeを使うと、埋め込み元のコンテンツをそのまま表示しやすくなります。

たとえば、動画、地図、フォーム、外部ページなどを、自サイト用に作り直さずに表示できます。見た目や操作性を大きく変えずに掲載しやすいため、元のサービスの良さを活かしたまま使えるのが特徴です。

内容をコピーして貼り付ける方法と比べると、表示の再現性を保ちやすい点もメリットです。更新や差し替えが発生したときも、管理しやすくなります。

別ページとして管理しやすい

iframeは、表示する内容を別ページとして管理しやすい点もメリットです。

共通で使う案内ページやフォームを別ファイルで用意しておけば、複数のページに埋め込んで使い回しやすくなります。修正が必要なときも、埋め込み元を直すことで対応しやすくなります。

ページごとに同じ内容を何度も作る必要がないため、運用の負担を減らしやすいのも利点です。更新作業を整理しやすくなるため、管理面でも扱いやすい方法といえます。

iframeのデメリット

iframeは便利な一方で、使い方によってはデメリットもあります。特に、検索エンジンからの評価やページの表示速度に影響することがあるため、仕組みを理解したうえで使うことが大切です。

SEO評価を受けにくい

iframeは外部コンテンツを手軽に表示できる一方で、埋め込んだ内容がそのまま自ページの本文として評価されるとは限りません。そのため、検索流入を狙いたい重要な情報をiframeの中だけに置く構成は避けたほうが安心です。

特に、サービスの特徴や商品の強み、ユーザーに伝えたい要点などは、通常のテキストでもページ内に記載しておくことが大切です。検索エンジンだけでなく、ページを読むユーザーにとっても内容を理解しやすくなり、情報の伝わりやすさを保ちやすくなります。

表示速度に影響しやすい

iframeは外部ページや動画、地図などを読み込む仕組みのため、埋め込む内容によってはページ全体の表示速度に影響することがあります。特に、複数のiframeを設置している場合や、読み込み負荷の大きいコンテンツを使う場合は、ページが重く感じられることもあります。

表示が遅くなると、閲覧中のストレスにつながるだけでなく、ページ全体の使いやすさにも影響しやすくなります。そのため、iframeは本当に必要な箇所に絞って使い、表示負荷が大きくなりすぎないように意識することが大切です。

iframeを使うときの注意点

HTMLのiframeは便利な要素ですが、使用する際にはいくつかの注意点があります。

便利さだけで判断せず、どのコンテンツを、どんな設定で埋め込むかを意識することが大切です。

外部コンテンツの安全性に注意する

iframeでは外部ページや外部サービスの内容をそのまま読み込めます。だからこそ、信頼できる提供元のコンテンツだけを埋め込むことが重要です。内容が不明なページを安易に埋め込むと、意図しない動作や不要な権限付与につながるおそれがあります。

安全性を高めたいときは、sandbox属性を使ってiframe内の動作を制限しましょう。sandboxは埋め込みコンテンツに追加の制約をかけるための属性で、必要な権限だけを許可する考え方が基本です。

アクセシビリティを意識する

iframeを使うときは、見た目だけでなく、利用者が内容を理解しやすいかも大切です。特に重要なのがtitle属性です。titleには、そのiframeに何が表示されているのかがわかる説明を入れます。たとえば「会社所在地のGoogleマップ」や「サービス紹介動画」のように、内容がすぐ伝わる表現にすると親切です。

titleがないと、何が埋め込まれているのか確認するためにフレーム内へ移動しなければならず、特にiframeが複数あるページでは混乱しやすくなります。埋め込めば終わりではなく、誰にとってもわかりやすい状態にしておくことが大切です。

必要に応じて読み込み方法を調整する

iframeは便利ですが、使い方によってはページ表示の負担になることがあります。すぐに表示する必要がないコンテンツであれば、遅延読み込みを取り入れることで初期表示への影響を抑えやすくなります。具体的には、ページの下部に配置した動画や地図などは、最初から読み込まなくても支障がないケースが少なくありません。

表示内容や配置場所に応じて読み込み方法を調整すれば、ページ全体の見やすさや操作性を保ちやすくなります。iframeは設置すること自体よりも、どのように読み込ませるかまで考えて使いましょう。

iframeが表示されないときの確認ポイント

iframeが表示されないときは、コードの書き間違いだけが原因とは限りません。表示できない場合は「自分のコード」と「相手側の設定」の両方を確認することが大切です。

URLや埋め込みコードを確認する

まず確認したいのは、srcに指定したURLや埋め込みコードが正しいかどうかです。URLの入力ミス、不要な文字の混入、通常のページURLと埋め込み用URLの取り違えがあると、正しく表示されません。

特にYouTubeなどは通常URLではなく、埋め込み専用の形式を使うことがあります。iframe自体は単純な要素なので、最初は余計な属性を減らし、最小構成で表示できるかを試すと原因を切り分けやすくなります。

また、表示領域が小さすぎると、読み込めていても「表示されていない」ように見えることがあります。iframeのサイズ指定に問題がないか、レイアウト用のCSSで幅や高さが極端に小さくなっていないか、親要素にdisplay: noneやoverflow: hiddenが入っていないかも確認しておくと安心です。

埋め込み先の制限を確認する

URLが正しくても、埋め込み先のサイト側がiframe表示を禁止していると、表示できません。

代表的なのはX-Frame-Optionsで、DENYならどのサイトからも埋め込めず、SAMEORIGINなら同じオリジンからの埋め込みしか許可されません。つまり、こちらのHTMLに問題がなくても、相手側の方針によって表示そのものが拒否されることがあります。

さらに、自分のサイト側でCSPのframe-srcを設定している場合は、読み込めるiframeの配信元が制限されることもあります。表示されないときは、埋め込み先だけでなく、自分のページのセキュリティ設定もあわせて確認することが重要です。

ブラウザや表示環境を確認する

ブラウザや表示環境が原因で、iframeがブロックされることもあります。たとえば、HTTPSのページにHTTPのiframeを埋め込むと、ブラウザは混在コンテンツとしてブロックすることがあります。

安全性を守るための仕様なので、URLが合っていても表示されない原因になります。まずは埋め込み元と埋め込み先の両方がHTTPSになっているかを確認しましょう。

そのほか、ブラウザ拡張機能、広告ブロッカー、企業ネットワークの制限、古いブラウザ環境などの影響で挙動が変わる場合もあります。表示されないときは、別ブラウザやシークレットモードで試し、エラーが出ていないか確認すると原因を見つけやすくなります。

HTMLを学ぶ方法

iframeは、外部のWebページやYouTube動画、Googleマップなどを埋め込める便利な要素です。ただし、実際に使いこなすには、iframeタグの基本だけでなく、属性の意味、CSSでのサイズ調整、レスポンシブ対応、埋め込み先の制限なども理解する必要があります。そのため、HTMLの基礎だけを覚えるよりも、実際に手を動かしながら学ぶことが大切です。

効率よく学びたい方や、独学に不安がある方は、プログラミングスクールを活用するのも一つの方法です。なかでも忍者CODEは、HTMLやCSSの基礎から学べるだけでなく、Web制作コースの中でJavaScriptやレスポンシブ対応、実践的なコーディングまで段階的に学べるのが特徴です。

iframeのような埋め込み要素も、単発で覚えるのではなく、Web制作全体の流れの中で理解しやすくなります。

さらに忍者CODEでは

・チャットでいつでも、無制限で質問可能
・学習者同士でつながれるコミュニティへの招待

などといったサポート体制を設けているため、学習を進めていく中で出てきた問題点や不明点をスムーズに解決しながら、挫折することなくプログラミングスキルの習得が可能です。

また、忍者CODEでは動画コンテンツにて学習を進めていくため、スッと頭に入ってきやすいようになっているのも特徴です。

未経験でも挫折させないオンラインスクールとして、受講生に寄り添った学習コンテンツを提供している忍者CODEをより詳しく知りたい方はぜひ公式サイトをご覧ください。

オンラインプログラミングスクール忍者CODEの詳細を見る