レスポンシブ iframe
— iframe がコンテンツのサイズに自動で追従する

従来の iframe は既定でサイズが固定のため、内容がはみ出せばスクロールバーが出て、 少なければ余白が残ります。新しい仕組みでは「埋め込まれる側がサイズの公開を許可」し、 「埋め込み側が CSS でそのサイズを採用する」という 2 ステップで、クロスオリジンでも postMessage なしにサイズが同期されます。

同じ子ページ child-basic.html を、固定高さの iframe と frame-sizing: content-block-size を指定した iframe にそれぞれ埋め込んだ比較です。 右側はスクロールバーなしで文書全体が収まり、iframe の高さが内容の高さと一致します。

<!-- 従来: 高さが固定なので、内容が多いとスクロールバーが出る -->
<iframe class="traditional" src="child-basic.html"></iframe>

<!-- 新仕様: 高さが子文書のレイアウトサイズに自動追随 -->
<iframe class="fit" src="child-basic.html"></iframe>

<style>
  .traditional { height: 320px; }

  .fit {
    width: 100%;
    height: 480px;                        /* 未対応ブラウザ向けフォールバック */
    frame-sizing: content-block-size;     /* 高さを子文書に合わせる(既定値は auto) */
  }
</style>

子ページ側には次の 1 行を入れておく必要があります(理由はデモ 02 へ)。

<!-- child-basic.html 内 -->
<meta name="responsive-embedded-sizing" content="allow-origins=*">

どちらの iframe にも同じ CSS(frame-sizing: content-block-size)を指定しています。 しかし右側の子ページには responsive-embedded-sizing メタタグがないため、 サイズは公開されず、従来どおり固定サイズで表示されます。 「親が子のサイズを勝手に測る」ことはできない、というセキュリティ設計です。

<style>
  .opt-frame {
    width: 100%;
    height: 480px;                      /* フォールバック */
    frame-sizing: content-block-size;
  }
</style>

<iframe class="opt-frame" src="child-basic.html"></iframe>    <!-- 子: meta あり → 自動リサイズ -->
<iframe class="opt-frame" src="child-no-meta.html"></iframe>  <!-- 子: meta なし → 固定のまま -->

読み込み時(DOMContentLoaded / load)のサイズはブラウザが自動で報告してくれますが、 それ以降に JavaScript で内容が変わった場合は、子ページの中から window.requestResize() を呼んで「レイアウトサイズが変わった」ことを伝える必要があります。 下の iframe 内のボタンで行を増減してみてください。iframe の高さが追従します。

addButton.addEventListener('click', () => {
  list.appendChild(createItem());
  window.requestResize();   // レイアウトサイズが変わったことを親に通知
});

removeButton.addEventListener('click', () => {
  list.lastElementChild?.remove();
  window.requestResize();
});

// 初回のサイズ報告はブラウザが DOMContentLoaded / load のタイミングで
// 自動で行うため、読み込み時に呼ぶ必要はない

高さだけでなく幅も合わせられます。子文書側が width: max-content で固有の幅を持つようにレイアウトし、 iframe には frame-sizing: content-inline-size を指定すると、 iframe の幅が子文書の幅に追従します。iframe 内のボタンでパネル幅を変更してみてください。

<!-- 親ページ -->
<style>
  .wfit {
    width: 100%;                        /* フォールバック */
    height: 250px;
    frame-sizing: content-inline-size;  /* 幅を子文書に合わせる */
  }
</style>
<iframe class="wfit" src="child-inline.html"></iframe>

<style>
  /* 子ページ(child-inline.html): 文書自体に固有の幅を持たせる */
  html, body { width: max-content; }
</style>

<script>
  // 子ページ内: ボタンでパネル幅を変更したら通知
  panel.style.width = '480px';
  window.requestResize();
</script>

frame-sizing の値

iframe などの埋め込み要素に指定します。値は 1 つだけ指定でき、対応する方向の width / height を上書きします。

※ content-inline-size / content-block-size は iframe 自身の writing-mode を参照します(子文書の書字方向ではありません)。

responsive-embedded-sizing メタタグ(埋め込まれる側)

<!-- (1) 最もシンプルなオプトイン -->
<meta name="responsive-embedded-sizing">

<!-- (2) すべてのオリジンからの埋め込みを許可 -->
<meta name="responsive-embedded-sizing" content="allow-origins=*">

<!-- (3) 許可するオリジンを個別に指定(スペース区切りで複数可) -->
<meta name="responsive-embedded-sizing"
      content="allow-origins=https://example.com https://partner.example">

許可されていないオリジンから埋め込まれた場合、frame-sizing は機能せず固定サイズのままになります。 クロスオリジンの埋め込みで使う場合は、この許可リストがセキュリティの境界になります。

window.requestResize()(埋め込まれる側)

• 読み込み時の初回サイズはブラウザが DOMContentLoaded / load のタイミングで自動報告します。
• それ以降に要素の追加・削除や折りたたみの開閉などでサイズが変わったときに呼びます。返り値は undefined です(プロミスではありません)。
• トップレベルの文書、iframe 以外の埋め込み要素の中、meta でオプトインしていない文書から呼ぶと NotAllowedError が発生します。

ブラウザ対応(2026 年 9 月時点)

仕様は CSS Box Sizing Module Level 4 / HTML Standard で議論中の実験的な機能です。Production ではフォールバックを必ず用意します。

/* CSS の場合 */
iframe.embed {
  width: 100%;
  height: 480px;   /* 未対応ブラウザ向けフォールバック */
}
@supports (frame-sizing: content-block-size) {
  iframe.embed { frame-sizing: content-block-size; }
}

/* JS の場合 */
if (CSS.supports('frame-sizing', 'content-block-size')) {
  // 対応している
}