HTML要素辞書 by Sentaro

<iframe>

インラインフレーム（Inline Frame）要素。現在のHTMLドキュメント内に、別のHTMLドキュメントを埋め込みます。

info

概要

<iframe> 要素は、現在のページ内に**別のウェブページ（外部コンテンツ）**を埋め込むために使用されます。地図の埋め込み（Google Maps）、動画プレーヤーの埋め込み（YouTube）、外部の広告などの表示によく利用されます。
セキュリティとパフォーマンスの観点から、その利用には注意が必要です。

play_circle

デモ (静的表示)

HTML (Source)

Preview (Result)

list

属性 (Attributes)

属性名	説明
src	埋め込むドキュメントのURL。この属性は必須です。
width	フレームの幅を指定します。ピクセル（px）またはパーセント（%）で指定できます。
height	フレームの高さを指定します。ピクセル（px）またはパーセント（%）で指定できます。
name	フレームの名前を指定します。フォームの送信先や `<a>` 要素の `target` として参照できます。
sandbox	埋め込まれたコンテンツに適用する制限を指定します。セキュリティ対策として非常に重要です。値がない場合は、最も制限の厳しい設定が適用されます。
loading	ブラウザにフレームの遅延読み込みを指示します。 `lazy`: 遅延読み込み（ブラウザの判断） `eager`: 即時読み込み（デフォルト）
allow	埋め込まれたコンテンツが使用できる機能を指定します（Feature Policy）。例: `geolocation`, `microphone`, `fullscreen`。

code

実用例

1. YouTube動画の埋め込み (最小限の指定)

<iframe 
 width="560" height="315"
 src="https://www.youtube.com/embed/XXXXXX"
 title="YouTube video player" 
 frameborder="0" 
 allowfullscreen
></iframe>

2. セキュリティを強化した埋め込み

<iframe 
 src="https://external.data.com" 
 sandbox="allow-scripts allow-same-origin" 
 loading="lazy"
 title="外部データ"
></iframe>
<!-- sandboxで許可する操作を制限し、loading="lazy"で遅延読み込みを指示 -->

3. リンクのターゲットとしての利用

<iframe name="myframe" src="default.html" width="300" height="200"></iframe>
<a href="page2.html" target="myframe">フレーム内にページ2を表示</a>

lightbulb

知っておくべき重要事項

security

セキュリティと sandbox 属性
外部サイトを埋め込む際は、埋め込んだコンテンツから親ページへの悪意のある攻撃（クリックジャッキングなど）を防ぐために、**必ず sandbox 属性**を使用して機能を制限すべきです。この属性がない場合、セキュリティ上のリスクが非常に高まります。

accessibility_new

アクセシビリティ
<iframe> 要素には、スクリーンリーダー利用者に内容を伝えるために、**必ず title 属性**を設定し、フレームの内容を簡潔かつ具体的に説明することが推奨されます。

speed

パフォーマンス
埋め込まれたコンテンツは、親ページとは独立してロードされるため、ページ全体のパフォーマンスに影響を与える可能性があります。コンテンツがすぐに必要でない場合は、loading="lazy" 属性の使用を検討してください。

私について利用規約プライバシーポリシー