<iframe>: IFRAME 要素
最終更新：2026-10-13
<iframe>IFRAME 要素
別の Web ページやリソースをインラインで埋め込みます（ピクチャー・イン・ピクチャー）。地図・動画・ウィジェットなどに使われます。
| カテゴリ | スクリプトと埋め込み |
|---|---|
| コンテンツモデル | フローコンテンツ |
| 許可される親要素 | フローコンテンツを受け入れる要素 |
| 閉じタグ | 必要 </iframe> タグ |
| ステータス | 標準 |
📝 構文
<iframe src="https://example.com"></iframe>⚙️ 属性
この要素はグローバル属性に加え、以下の属性をサポートします：
| 属性 | 値 | 説明 |
|---|---|---|
src | URL of the page to embed. | |
srcdoc | Inline HTML string as the embedded content (overrides src). | |
width | Width of the embedded area. | |
height | Height of the embedded area. | |
title | Accessible title describing the embed (required). | |
sandbox | Restricts embedded content permissions. |
▶ サンプル
下のコードを編集して、playground でリアルタイム結果を確認：
🌐 ブラウザサポート
| ブラウザ |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <iframe> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザでサポート | |||||
ヒント： アクセシビリティのため title を必ず付けましょう。sandbox で埋め込みコンテンツのセキュリティリスクを軽減できます。
❓ よくある質問
Qiframe は SEO にペナルティを与えますか？
Aiframe の中の内容は親ページのものではありません。検索エンジンがクロールしてランク付けするのは、iframe の src にある文書そのものです。地図や動画など少しの埋め込みは無害ですが、中心的な内容を iframe に入れると、親ページのランキングに貢献できません。メインコンテンツの読み込みに iframe を使うのは避けましょう。
Qiframe の sandbox 属性は何のためですか？
A
sandbox は埋め込み内容に安全ロックをかけます。デフォルトではスクリプト・フォーム・同一オリジンアクセスが禁止され、ホワイトリストの値で項目ごとに解放できます（sandbox='allow-scripts allow-same-origin' など）。サードパーティの内容を埋め込むときは、リスクを最小化するために必ず sandbox を付けましょう。Qiframe でレスポンシブな 16:9 動画はどう作りますか？
A定番は外側コンテナ方式です：
div { position: relative; padding-top: 56.25%; } に iframe { position: absolute; inset: 0; width: 100%; height: 100%; } を組み合わせます。現代のブラウザなら aspect-ratio: 16/9 を iframe に直接指定する方法もあります。🏷️ 関連タグ
💡 関連ケース
今後さらにケーススタディを追加予定です。
📚 関連チュートリアル
