この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:4
ページ更新者:guest
更新日時:2026-06-11 07:10:02

タイトル: iframe要素
SEOタイトル: HTML iframe要素 完全ガイド（埋め込み / sandbox / loading / セキュリティ / レスポンシブ対応）

この記事の要点
  • iframe 要素は別の HTML 文書を現在のページ内に埋め込むためのインラインフレーム
  • 主要属性: src (URL) / width / height / title / loading / sandbox / allow
  • title 属性は必須級 — スクリーンリーダーが iframe の内容を識別する
  • sandbox 属性で実行できる機能を制限 — XSS や悪意あるリダイレクトを防ぐ
  • 遅延読み込み: loading="lazy" でスクロールするまでロードしない — ページ高速化

iframe 要素とは

iframe (inline frame) は別の HTML 文書を現在のページ内の領域に埋め込むための要素です。YouTube 動画、Google Maps、SNS の埋め込みウィジェット、広告など、外部コンテンツを取り込む用途で広く使われています。

基本構文

<iframe
    src="https://example.com/page.html"
    width="600"
    height="400"
    title="サンプル埋め込みページ"
    loading="lazy">
</iframe>

主な属性

属性用途例
src埋め込む URLhttps://example.com
srcdocHTML 文字列を直接埋め込む<p>Hello</p>
width / heightサイズ (px)600 / 400
titleアクセシビリティ用ラベル「YouTube 動画」
loading読み込みタイミングlazy / eager
sandboxセキュリティ制限allow-scripts 等
allow許可する機能fullscreen; camera
referrerpolicyリファラ送信ポリシーno-referrer
nameフレーム名 (target で参照)preview
allowfullscreen全画面表示許可 (旧仕様)allowfullscreen

sandbox 属性 — セキュリティ制限

sandbox を指定すると iframe 内で多くの機能が無効化されます。許可したい機能だけを値として列挙します。

<!-- 全機能を制限 (最も厳格) -->
<iframe src="..." sandbox></iframe>

<!-- スクリプトとフォーム送信のみ許可 -->
<iframe src="..." sandbox="allow-scripts allow-forms"></iframe>
値許可される機能
allow-scriptsJavaScript 実行
allow-same-origin同一オリジン扱い
allow-formsフォーム送信
allow-popupsポップアップ表示
allow-top-navigation親ページのナビゲーション
allow-modalsalert / confirm 等のモーダル

注意: allow-scripts と allow-same-origin を両方付けると sandbox が事実上無効になります。信頼できないコンテンツには絶対に併用しないこと。

遅延読み込み (loading="lazy")

iframe 内のコンテンツは重いことが多いので、ファーストビューに入らないものは遅延読み込みでページ表示を高速化します。

<!-- スクロールして近づいてからロード -->
<iframe src="..." loading="lazy"></iframe>

<!-- すぐにロード (デフォルト) -->
<iframe src="..." loading="eager"></iframe>

YouTube 動画の埋め込み例

<iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write;
           encrypted-media; gyroscope; picture-in-picture;
           web-share"
    referrerpolicy="strict-origin-when-cross-origin"
    allowfullscreen
    loading="lazy">
</iframe>

レスポンシブな iframe (16:9 アスペクト比)

iframe は幅 100% にしても高さが追従しません。アスペクト比を維持するために CSS のトリックが必要です。

<div class="iframe-wrapper">
    <iframe src="..." title="..."></iframe>
</div>
/* 古典的な padding-top トリック (16:9 = 56.25%) */
.iframe-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}
.iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* モダンブラウザなら aspect-ratio で 1 行 */
.modern-iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

親ページとの通信 (postMessage)

クロスオリジンの iframe と親ページは直接プロパティを触れません。postMessage でメッセージをやり取りします。

// 親 -> iframe
const iframe = document.querySelector('iframe');
iframe.contentWindow.postMessage(
    { type: 'hello', payload: 123 },
    'https://child.example.com'   // 送信先オリジンを必ず指定
);

// iframe 側で受信
window.addEventListener('message', (event) => {
    // 必ず origin を検証!
    if (event.origin !== 'https://parent.example.com') return;
    console.log(event.data);
});

セキュリティとプライバシー

リスク対策
クリックジャッキングサーバー側で X-Frame-Options: DENY や Content-Security-Policy: frame-ancestors
悪意あるコンテンツ実行sandbox 属性で機能制限
Cookie トラッキングブラウザの第3者 Cookie 制限が進行中。SameSite=Lax/Strict が事実上必須
リファラ漏洩referrerpolicy 属性で制御

FAQ

Q: 高さを中身に合わせて自動調整したい
A: 同一オリジンなら iframe.contentDocument.body.scrollHeight を取得して高さ設定。クロスオリジンは postMessage で高さを通知してもらう。

Q: iframe と embed / object の違い
A: iframe はHTML 文書専用。embed / object は PDF や Flash 等の任意リソース埋め込み (現代は使われない)。

Q: SEO への影響は？
A: Google は iframe 内のコンテンツも一部クロールするが、親ページのコンテンツとして扱われない。重要コンテンツは iframe ではなく直接記述する。

関連要素

  • frame / frameset — 旧仕様、HTML5 で廃止
  • embed / object — 一般リソース埋め込み
  • picture-in-picture API / iframe.contentWindow — 操作用 DOM API