<iframe>

対応:		HTML 4（1997）

『iframe』は別のHTMLページや外部コンテンツをページ内にインラインフレームとして埋め込むための要素です。

構文

<!-- 基本的な使い方 -->
<iframe src="https://example.com" width="600" height="400"></iframe>

<!-- YouTubeの動画を埋め込む -->
<iframe
  src="https://www.youtube.com/embed/動画ID"
  width="560"
  height="315"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope"
  allowfullscreen>
</iframe>

主な属性

属性	概要
src	埋め込むページのURLを指定します。
width	フレームの横幅をピクセルまたはパーセントで指定します。
height	フレームの縦幅をピクセルで指定します。
allow	フレーム内で許可する機能（カメラ・位置情報・自動再生など）をスペース区切りで指定します。
sandbox	フレーム内のコンテンツに制限を加えます。値を空にすると全制限が有効になり、「allow-scripts」などで個別に解除できます。
loading	読み込みタイミングを指定します（eager: 即時 / lazy: 遅延読み込み）。
title	フレームの内容を説明するテキストを指定します。スクリーンリーダー対応に重要です。

サンプルコード

sample_iframe.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>iframeサンプル</title>
</head>
<body style="margin: 20px;">

  <!-- YouTube動画の埋め込み -->
  <iframe
    src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    width="560"
    height="315"
    title="YouTube動画"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen>
  </iframe>

  <!-- Googleマップの埋め込み（遅延読み込み） -->
  <iframe
    src="https://www.google.com/maps/embed?pb=!1m18..."
    width="600"
    height="450"
    style="border: 0;"
    loading="lazy"
    title="Googleマップ">
  </iframe>

  <!-- sandboxで制限を加えたフレーム（スクリプトのみ許可） -->
  <iframe
    src="sandbox-content.html"
    width="400"
    height="200"
    sandbox="allow-scripts"
    title="制限付きコンテンツ">
  </iframe>

  <!-- srcdoc: HTMLを直接文字列として埋め込む -->
  <iframe
    srcdoc="<p style='font-family:sans-serif;padding:16px'>iframeに直接HTMLを書ける</p>"
    width="300"
    height="80"
    title="srcdocサンプル">
  </iframe>

</body>
</html>

実行結果

ページ内に外部のWebページが埋め込まれた形で表示されます。枠線がある場合はフレームの境界がわかります。

サンプルページはこちら

レスポンシブ対応（アスペクト比固定）

『iframe』は幅・高さをピクセルで固定指定するため、そのままではレスポンシブに対応できません。CSSの『aspect-ratio』プロパティまたはパディングトリックを使うと、幅に合わせて高さが自動調整されます。

<style>
  /* aspect-ratio を使った方法（モダンブラウザ推奨） */
  .responsive-iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
  }

  /* パディングトリック（aspect-ratio非対応ブラウザ向け） */
  .iframe-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 9/16 = 56.25%（16:9の比率） */
    overflow: hidden;
  }
  .iframe-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
  }
</style>

<!-- aspect-ratio を使った方法 -->
<iframe
  class="responsive-iframe"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="YouTube動画"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen>
</iframe>

<!-- パディングトリックを使った方法 -->
<div class="iframe-wrapper">
  <iframe
    src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    title="YouTube動画"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen>
  </iframe>
</div>

JavaScriptからiframeに通信する（postMessage）

同一オリジンの『iframe』はJavaScriptから直接アクセスできます。異なるオリジンでは『postMessage』APIを使ってメッセージを送受信します。

<!-- 親ページ側 -->
<iframe id="childFrame" src="child.html" width="400" height="200"></iframe>

<script>
var frame = document.getElementById('childFrame');

// iframeが読み込まれたらメッセージを送信
frame.addEventListener('load', function() {
  frame.contentWindow.postMessage(
    { type: 'greeting', text: 'こんにちは' },
    '*' // 実際は送信先のオリジンを明示する（例: 'https://example.com'）
  );
});

// iframeからのメッセージを受信
window.addEventListener('message', function(event) {
  // 信頼できるオリジンかチェック
  if (event.origin !== 'https://example.com') return;
  console.log('受信:', event.data);
});
</script>

概要

『iframe』はYouTube動画・Googleマップ・SNSの埋め込みウィジェットなど、外部サービスのコンテンツをページに組み込む際によく使われます。埋め込む外部サービスのサイトが提供する「埋め込みコード」をそのままコピーして使うのが一般的です。

セキュリティ上の理由から、信頼できないコンテンツを『iframe』で埋め込む場合は必ず『sandbox』属性を指定してください。『sandbox』を空にするとスクリプト実行・フォーム送信・ポップアップなどほぼすべての操作が制限されます。必要な機能だけ「allow-scripts」「allow-forms」のように個別に解除します。

アクセシビリティの観点から、『title』属性でフレームの内容を説明するテキストを必ず指定しましょう。スクリーンリーダーがフレームの内容を読み上げる際に使用されます。また、遅延読み込み（『loading="lazy"』）を活用するとページの初期読み込みを高速化できます。