<iframe>

『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	フレームの内容を説明するテキストを指定します。スクリーンリーダー対応に重要です。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>iframeサンプル</title>
  <style>
    iframe {
      border: 1px solid #ccc;
      border-radius: 4px;
    }
  </style>
</head>
<body>

  <p>外部ページの埋め込みサンプル</p>

  <!-- 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>

</body>
</html>

実行結果

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

┌─────────────────────────────────────┐
│  [Google マップが表示される領域]    │
│                                     │
│  ← 外部コンテンツがここに表示される │
│                                     │
└─────────────────────────────────────┘

概要

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

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

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