Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

Chrome 154 のレスポンシブ iframe

Sebastian Benz

Bramus

公開日: 2026 年 9 月 16 日

Chrome 154 では、レスポンシブサイズの iframe のサポートが追加され、<iframe> が埋め込みドキュメントの固有サイズに基づいてサイズを調整できるようになりました。これは、サードパーティのコメントウィジェット、高さが異なるソーシャルメディアの埋め込み、<iframe> を使用するその他のタイプの埋め込みをシームレスに埋め込む場合に最適です。

Browser Support

Source

レスポンシブサイズの iframe は、デベロッパーが iframe コンテンツを手動で測定し、postMessage() でディメンションを送信し、埋め込みページの iframe サイズを手動で更新するという一般的なパターンを置き換えます。

この録画では、iframe を使用してページに埋め込まれたコメントフォームが表示されています。ユーザーがコメントを追加すると、埋め込みページ内の iframe の高さが動的に更新され、スクロールバーのないシームレスな視覚体験が実現します。

iframe のサイズをコンテンツに合わせる

デフォルトでは、iframe には独自のビューポートがあります。埋め込みドキュメントがビューポートよりも長い場合、ユーザーにスクロールバーが追加で表示されることがあります。レスポンシブ iframe サイズ設定を使用すると、埋め込みページでコンテンツベースのサイズ設定を使用できます。

.embed {
  width: 100%;
  frame-sizing: content-height;
}

埋め込みドキュメントはオプトインする必要があります。

<meta name="responsive-embedded-sizing" content="allow-origins=*">

完全な例を次に示します。

<style>
  .embed {
    width: 100%;
    frame-sizing: content-height;
  }
</style>
<iframe class="embed" src="/comments.html" title="Comments">
</iframe>

/comments.html では次のようになります。

<!doctype html>
<html>
  <head>
    <meta name="responsive-embedded-sizing" content="allow-origins=*">
  </head>
  <body>
    ...
  </body>
</html>

iframe は、固定高さのビューポートのように動作するのではなく、埋め込みドキュメントのコンテンツの高さを利用できるようになりました。

`frame-sizing` を使用する

新しい frame-sizing プロパティは、iframe のコンテンツからどのディメンションを取得するかを制御します。

次の値がサポートされています。

frame-sizing: auto;
frame-sizing: content-width;
frame-sizing: content-height;
frame-sizing: content-inline-size;
frame-sizing: content-block-size;

auto は、既存の iframe のサイズ設定動作を維持します。

ほとんどの横書きモードでは、content-height と content-block-size は、埋め込みを垂直方向に拡大するのに最も便利な値です。

frame-sizing は他の CSS 制約と組み合わせることもできます。

.embed {
  width: 100%;
  max-height: 80vh;
  frame-sizing: content-height;
}

動的コンテンツの変更後のサイズ変更

ブラウザは、埋め込みドキュメント内のすべてのレイアウト変更を継続的に監視しません。

iframe のコンテンツが最初のレイアウト後に変更された場合（コメントの読み込みやパネルの展開など）、埋め込みドキュメントは window.requestResize() を使用して新しいサイズの計算をリクエストできます。

async function loadMore() {
  const items = await fetchMoreItems();
  renderItems(items);
  window.requestResize();
}

レイアウトの前に window.requestResize() を呼び出すのが最適です。ドキュメントに対するすべての変更が完了した後で呼び出します。この明示的な更新モデルは、iframe のサイズを変更するとビューポートが変更され、コンテンツが変更され、サイズが再び変更されるというリサイズループを回避するのに役立ちます。

クロスオリジン埋め込み

レスポンシブサイズ設定は、クロスオリジン iframe でも使用できます。埋め込みドキュメントでは、許可されるオリジンを制限できます。

<meta
  name="responsive-embedded-sizing"
  content="allow-origins=https://publisher.example">

これにより、レスポンシブサイズ設定は https://publisher.example のみに制限されます。複数のオリジンはスペースで区切ります（content="allow-origins=https://publisher1.example https://publisher2.example"）。

サードパーティ製ウィジェットの場合は、必要なオリジンにのみアクセスを制限します。このメカニズムは、どのサイトがページを埋め込むことができるかを制御するコンテンツセキュリティポリシーの frame-ancestors ディレクティブなど、既存の iframe セキュリティ制御を補完します。

プログレッシブエンハンスメント

機能クエリを使用すると、frame-sizing をサポートしていないブラウザの既存のフォールバックを維持できます。

.widget {
  width: 100%;
  height: 500px;
}

@supports (frame-sizing: content-height) {
  .widget {
    height: auto;
    frame-sizing: content-height;
  }
}

埋め込みドキュメントが動的に更新される場合は、requestResize() の機能検出もできます。

if ("requestResize" in window) {
  window.requestResize();
}

そのため、サポートが拡大する間、既存の iframe サイズ設定コードをフォールバックとして残しておくことができます。

試してみる

次のデモで、レスポンシブな iframe のサイズ設定をお試しください。