: IFRAME 要素</h1> <p class="page-updated">最終更新：2026-09-12</p> <h2><iframe>IFRAME 要素</h2> <p class="tutorial-intro">別の Web ページやリソースをインラインで埋め込みます（ピクチャー・イン・ピクチャー）。地図・動画・ウィジェットなどに使われます。</p> <div class="tag-quickinfo"><table class="ref-detail-table"><tbody> <tr><th>カテゴリ</th><td><span class="tag-badge badge-cat">スクリプトと埋め込み</span></td></tr> <tr><th>コンテンツモデル</th><td>フローコンテンツ</td></tr> <tr><th>許可される親要素</th><td>フローコンテンツを受け入れる要素</td></tr> <tr><th>閉じタグ</th><td>必要 <code></iframe></code> タグ</td></tr> <tr><th>ステータス</th><td><span class="tag-badge badge-stable">標準</span></td></tr> </tbody></table></div> <h2 id="syntax">📝 構文</h2> <pre class="ref-syntax-block"><code class="language-html"><iframe src="https://example.com"></iframe></code></pre> <h2 id="attributes">⚙️ 属性</h2> <p class="ref-attr-intro">この要素はグローバル属性に加え、以下の属性をサポートします：</p> <table class="ref-detail-table"><thead><tr><th>属性</th><th>値</th><th>説明</th></tr></thead><tbody> <tr><td><code>src</code></td><td></td><td>URL of the page to embed.</td></tr> <tr><td><code>srcdoc</code></td><td></td><td>Inline HTML string as the embedded content (overrides src).</td></tr> <tr><td><code>width</code></td><td></td><td>Width of the embedded area.</td></tr> <tr><td><code>height</code></td><td></td><td>Height of the embedded area.</td></tr> <tr><td><code>title</code></td><td></td><td>Accessible title describing the embed (required).</td></tr> <tr><td><code>sandbox</code></td><td></td><td>Restricts embedded content permissions.</td></tr> </tbody></table> <div class="ref-attr-links"> <a href="/ja/html/reference/global-attributes.html" class="ref-attr-link">すべてのグローバル属性を見る →</a> <a href="/ja/html/reference/event-attributes.html" class="ref-attr-link">すべてのイベント属性を見る →</a> </div> <h2 id="example" class="example-heading">▶ サンプル</h2> <p class="tryit-intro">下のコードを編集して、playground でリアルタイム結果を確認：</p> <div class="tryit-wrapper"><iframe class="tryit-iframe" src="/html/editor.html?lang=ja&mode=playground&embed=1&code=%7B%22html%22%3A%20%22%3C%21--%20%E3%82%A4%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%82%92%E5%9F%8B%E3%82%81%E8%BE%BC%E3%82%80%20--%3E%5Cn%3Ciframe%20srcdoc%3D%5C%22%3Ch1%20style%3D%27color%3Atomato%27%3Eiframe%20%E5%86%85%E3%81%AE%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%3C%2Fh1%3E%5C%22%5Cn%20%20%20%20%20%20%20%20width%3D%5C%22300%5C%22%20height%3D%5C%22120%5C%22%20title%3D%5C%22%E4%BE%8B%5C%22%3E%3C%2Fiframe%3E%22%2C%20%22css%22%3A%20%22%22%2C%20%22js%22%3A%20%22%22%7D" sandbox="allow-scripts allow-modals allow-same-origin allow-forms" title="Try It playground">

🌐 ブラウザサポート

ブラウザ	Chrome	Edge	Firefox	Safari	Opera
<iframe>	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザでサポート

ヒント： アクセシビリティのため title を必ず付けましょう。sandbox で埋め込みコンテンツのセキュリティリスクを軽減できます。

📚 関連チュートリアル

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

🌐 ブラウザサポート