A tag you use when you want to show another page, video, or map inside your own page like a small window, with options to control the URL and how safely the external content is embedded.
別のページや動画・地図などの外部コンテンツを、自分のページの中に小さな窓のように表示したいときに使うタグで、読み込む先の URL や安全性をコントロールしながら埋め込める仕組みを持った要素です。
HTML
<iframe src="child.html"></iframe>インラインフレーム内に表示させたいページのアドレス（URL）を、src属性に指定します。
iframe 要素を使って、別ページのコンテンツを組み込むことができます。この要素は br 要素や img 要素のような空要素ではありません。必ず終了タグをマークアップしてください。
この要素の開始タグと終了タグのあいだには、「iframe を理解していない古いブラウザ向けのテキストやリンク」を入れておくことができます。ただし、今どきの一般的なブラウザでは、src で指定したコンテンツの読み込みに失敗しても、そのテキストが自動的にエラー表示として使われるわけではありません。あくまで、iframe 要素そのものをサポートしていないブラウザに対してだけ、代わりに表示される可能性がある “おまけのコンテンツ” だと考えておくと分かりやすいです。
なお、XML シリアライズされた HTML（いわゆる XHTML など）でも、基本的には HTML と同じように、開始タグと終了タグのあいだにフォールバック用のテキストやリンクを入れられます。
srcdoc 属性は、HTML5 で新たに導入された属性で、フレームに組み込みたいコンテンツを指定します。この属性に指定するコンテンツとは、HTML マークアップそのものです。簡単な HTML コードであれば、別のドキュメントとして用意しなくても、直接、この属性にコンテンツを書き込んで、それをフレーム内に表示することが可能となります。
HTML
<iframe srcdoc="<p>これが<em>フレーム内</em>に表示されることになります。<a href="https://yugien.xyz/">リンク</a>もマークアップ出来ますが、ダブルクォーテーションには注意してください。</p>"></iframe>srcdoc 属性を使う場合は、この例のようにコンテンツ全体をダブルクォーテーションで囲む書き方がよく使われます。その場合、コンテンツの中でさらにダブルクォーテーションを書きたいときは、" のような文字参照を使う必要があります（あるいは、属性値をシングルクォーテーションで囲んで、内側でダブルクォーテーションを使う書き方もあります）。
もし src 属性と srcdoc 属性の両方が iframe 要素に指定された場合は、srcdoc 属性が優先することになっています。その場合は、src 属性で指定されたアドレスは、srcdoc 属性をサポートしていないブラウザ向けのフォールバックとして機能することになります。
name 属性には、フレーム内に表示されるブラウジング・コンテキストの名前を指定します。名前は、半角英数を使って 1文字以上であればよく、実際にはアンダースコアを含めて使うこともできます。ただし、_blank / _self / _parent / _top は特別なキーワードとして予約されているため、通常の名前としては使わないようにし、紛らわしさを避けるために先頭のアンダースコアも避けておくのがおすすめです。
HTML
<iframe src="child.html" name="child"></iframe>name 属性に指定するブラウジング・コンテキスト名は、主に、a 要素などでリンク先を表示するターゲットに使います。もし、次のようなリンクを用意し、リンクをクリックすると、前述の iframe 要素で生成されたブラウジング・コンテキスト内に、そのリンク先のコンテンツが表示されます。
HTML
<a href="child2.html" target="child">新着情報</a>sandbox 属性は、HTML5 で新たに導入されたコンテンツ属性で、iframe 要素で組み込まれるコンテンツをサンドボックス化して、セキュリティーを強化するために使います。
iframe 要素で組み込むことができるコンテンツは、同じサイトのコンテンツとは限りません。また、同じサイトといっても、自分で作成したコンテンツではない可能性もあります。また、組み込まれるコンテンツが、動的に生成されるコンテンツの場合、事前に、iframe 要素でどんなコンテンツが組み込まれるかわかりません。もし、意図せぬ JavaScript などが組み込まれたら、予期せぬ事態になる恐れがあります。
HTML5 では、このような状況を想定して、ウェブ制作者が意図的に iframe 要素で組み込まれるコンテンツをサンドボックス化して、組み込み元のページに悪影響を及ぼさないようにすることができます。
sandbox 属性がセットされると、その iframe 要素で組み込まれたコンテンツのフォームやスクリプトやプラグインは無効になります。また、自分自身以外のブラウジング・コンテキストを指すリンクのターゲットも基本的に無効になります。
sandbox 属性に値を指定しなければ（空文字列を指定すれば）、iframe 要素で組み込まれたコンテンツは、完全にサンドボックス化され、以下の制限が加えられます。
window.open() のように新規のブラウジング・コンテキストを生成することもできません。document.cookie も読み取ることができなくなります。sandbox 属性には、いくつかのキーワード（値）を指定して、部分的に制限を解除することができます。値を指定する場合は、半角スペースで区切って複数の値を並べられます。ここでは、よく使う代表的なものを 3つ紹介します。
HTML
<iframe sandbox="" src="user-generate-contents.cgi?id=123"></iframe>この例は、サイトのユーザーが投稿したコンテンツを iframe 要素のフレーム内に表示するシーンを想定したものです。ユーザーが投稿するコンテンツは事前にはわかりません。セキュリティー上、危険なコンテンツが投稿される可能性があります。サーバー側でも、それに対処する必要があるのはもちろんのことですが、ブラウザ側でも、sandbox 属性を指定して制限を加えておくことで、サイトのセキュリティーが強固になります。これによって、万が一、JavaScript やフォームやプラグインがコンテンツに入れられたとしても、それらはすべて無効になります。
HTML
<iframe sandbox="allow-same-origin allow-forms allow-scripts" src="https://bp.example.jp/blog-parts/3"></iframe>これは、別のサイトが提供するブログ・パーツを、iframe 要素を使って組み込むシーンを想定したものです。3つのキーワードが全てセットされていますが、決して、制限が一切なくなるわけではありません。このフレーム内のリンクでは、自分自身のブラウジング・コンテキスト以外のターゲットが無効になり、プラグインも無効になります。
seamless 属性は、かつて HTML5 の草案で提案されていた論理属性です。アイデアとしては、iframe 内のコンテンツを「親ページの一部」のように見せて、枠線やスクロールバーなしでシームレスに表示しようというものでした。
ただし、この属性は最終的に仕様から削除されており、主要ブラウザもサポートしていません。現在は新しく使わないことが推奨されているため、「こういう構想があった」という歴史的な情報として押さえておく程度で十分です。
※以下の説明やサンプルコードは、当時の仕様案にもとづく内容です。現在のブラウザではそのとおりには動かない点に注意してください。
これまで、別の HTML ファイルをシームレスにページに組み込んで表示させるためには、SSI ( Server Side Include ) を使って実現してきました。しかし、SSI はサーバー側で用意される仕組みのため、HTML だけで実現することができませんでした。全く同じではありませんが、これを HTML だけで実現しようとしたのが、seamless 属性なのです。
seamless 属性は、スタイルのためだけに存在しているわけではない点に注意してください。リンク・ターゲットの挙動にも影響します。
HTML
<nav><iframe seamless="seamless" src="nav.html"></iframe></nav>HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>グローバル・ナビゲーション</title>
</head>
<body>
<ul>
<li><a href="/index.html">ホーム</a></li>
<li><a href="/products.html">商品一覧</a></li>
<li><a href="/cart.cgi">ショッピング・カート</a></li>
</ul>
</body>
</html>2013年7月6日時点では、最新版の Chrome と Opera は、対応しているようです。
この例は、サイト内の全ページで共通のグローバル・ナビゲーションを、iframe 要素で組み込み表示しているのを想定しています。
nav.html の a 要素に注目してください。これら a 要素には target 属性が指定されていません。HTML5 に対応していないブラウザであれば、リンクをクリックすると、フレーム内に指定のページが表示されてしまいます。しかし、seamless 属性に対応したブラウザであれば、あたかも a 要素に target="_parent" がセットされていたかのように振る舞うことが期待されています。
また、スタイルシートの扱いも変わってきます。seamless 属性がセットされた iframe 要素でも、フレーム内のコンテンツが、親のドキュメントのスタイルを継承することになっています。つまり、あたかも、フレーム内のコンテンツが、親のドキュメントに始めからマークアップされていたのと同じようにスタイルが適用されることが期待されています。
width 属性と height 属性には、それぞれ、iframe 要素によってレンダリングされるフレームの横幅と縦幅を指定することができます。
HTML
<iframe src="child.html" width="400" height="50"></iframe>最近のブラウザでは、iframe の振る舞いを細かくコントロールするための便利な属性が増えています。ここでは、実務でよく目にする代表的な属性を、まずはざっくりイメージできるレベルで押さえておきます。
loading 属性は、iframe を「すぐ読み込むか」「画面に近づいてきてから読み込むか」を指定する属性です。記事の下の方に YouTube などをたくさん埋め込んでいるときに、画面に見えるタイミングまで読み込みを遅らせて、ページの表示を軽くできます。
HTML
<iframe
src="https://www.youtube.com/embed/XXXXXXXXXXX"
loading="lazy"
width="560"
height="315"></iframe>loading="lazy" と書くと、「ユーザーが近くまでスクロールしてきたら読み込む」という意味になります。ページの一番上にある重要な動画などは、あえて loading を付けずにすぐ読み込む、といった使い分けもできます。
allow 属性は、その iframe の中でどんな機能を使ってよいかをブラウザに伝える属性です。たとえば「全画面表示を許可する」「自動再生を許可する」「クリップボードへの書き込みを許可する」といったことを、キーワードでまとめて指定できます。
HTML
<iframe
src="https://example.com/widget"
loading="lazy"
allow="fullscreen; autoplay; clipboard-write"
width="400"
height="300"></iframe>どのキーワードを指定できるかはブラウザや仕様に依存しますが、よく見かけるものとして fullscreen（全画面表示）、autoplay（自動再生）、clipboard-write（クリップボードへの書き込み）などがあります。外部サービスの埋め込みコードにすでに allow が入っている場合は、「この iframe の中で使ってよい機能のリストなんだな」と理解しておくと読みやすくなります。
昔は allowfullscreen という専用の属性を単独で付ける書き方もありましたが、現在は allow 属性の中で fullscreen を指定するパターンがよく使われています。YouTube の埋め込みコードなどで両方出てきても、「全画面を許可しているんだな」という程度に受け取れば大きな問題はありません。
referrerpolicy 属性は、iframe で読み込む先のサーバーに対して、「どのページから読み込まれたか」という参照元情報（Referer ヘッダー）をどこまで送るかを制御する属性です。URL にクエリ文字列（検索キーワードや ID など）が含まれていて、それをあまり渡したくないときに役立ちます。
HTML
<iframe
src="https://example.com/analytics"
referrerpolicy="no-referrer"
width="1"
height="1"></iframe>この例のように referrerpolicy="no-referrer" とすると、「どのページから読み込まれたか」という情報を送らない設定になります。他にも細かいポリシーはいくつかありますが、まずは「referrerpolicy で、埋め込み先に渡す参照元情報の量を減らせる」というイメージだけ持っておけば十分です。
iframe で自由に読み込んでもいいですか？X-Frame-Options や Content-Security-Policy で「フレームに埋め込み禁止」が設定されているページも多いため、勝手に読み込むのは避け、YouTube や地図サービスなど、公式に埋め込みコードが用意されているコンテンツを使うのが安全です。iframe の中身が横にはみ出してしまいます。width 属性をパーセント指定（例：width="100%"）にしたり、CSS で max-width: 100%; を指定すると、親要素の幅に収まるようにしやすくなります。iframe の高さが足りなくて、スクロールバーが二重に出てしまいます。iframe 内にスクロールバーが出てしまいます。高さを十分な値に調整するか、場合によっては中身のページ側でレイアウトを見直します。別ドメインの高さを JavaScript だけで自動取得するのは、同一オリジン制約のため難しい場合が多い点にも注意が必要です。iframe の中の文字は、SEO 的にこのページの評価に含まれますか？iframe の中身を「別のページ」として扱います。このページの評価を上げたい重要なテキストは、iframe の中にだけ書くのではなく、親ページの本文にも書いておくのがおすすめです。iframe に「何が表示される枠なのか」が分からないことがあります。必要に応じて title 属性や aria-label などで「地図を表示するフレーム」「動画プレイヤー」など、短く説明を書いておくと、支援技術の利用者にも伝わりやすくなります。iframe を入れると読み込まれないfile:///C:/... のようなローカルパスは、自分の PC からしか参照できません。Web サーバーから配信される URL（https://... など）を指定する必要があります。iframe 内のボタンが反応しない・動きがおかしいsandbox 属性やブラウザの拡張機能などで、スクリプトやフォーム送信が制限されている場合があります。sandbox の指定値やセキュリティ関連の設定を確認しましょう。