HTML Living Standard/iframe
iframe 要素
編集<iframe> 要素は、現在の文書内に別のHTML文書を埋め込むために使用されます。この要素を使用すると、外部コンテンツを統合したり、他のウェブページを表示したりできます。
カテゴリ
編集- フローコンテンツ
- 置換コンテンツ
- インタラクティブコンテンツ（タブインデックスが設定されている場合）
使用される文脈
編集- フローコンテンツ内で使用可能。
コンテンツモデル
編集- フローコンテンツまたは空。
- フローコンテンツは、要素がサポートされていない場合に表示される代替コンテンツとして機能します。
タグの省略
編集- 開始タグおよび終了タグは省略できません。
属性
編集<iframe> 要素には以下の属性が使用できます：
- グローバル属性 — すべてのHTML要素で共通の属性。
- src — 埋め込む文書のURL。
- srcdoc — 直接埋め込むHTML文書（
srcより優先される）。 - name — フレーム名。ターゲット属性で参照可能。
- sandbox — フレーム内のコンテンツの制限を設定。
- allow — 特定の機能を許可（例: フルスクリーン、ジオロケーション）。
- allowfullscreen — フルスクリーンモードを許可。
- width — フレームの幅（CSSピクセル単位）。
- height — フレームの高さ（CSSピクセル単位）。
- referrerpolicy — フレーム内のリソースへのリファラーの送信方法を指定。
- loading — フレームの読み込み方法（
lazyまたはeager）。
使用例
編集基本的な使用例
編集<iframe src="https://example.com" width="600" height="400" title="Example Website"></iframe>
埋め込みドキュメントの直接指定
編集<iframe srcdoc="<p>Hello, world!</p>" width="300" height="200"></iframe>
sandbox 属性での制限
編集<iframe src="https://example.com" sandbox="allow-scripts allow-same-origin"></iframe>
フルスクリーンモードを許可
編集<iframe src="https://example.com" allowfullscreen></iframe>
遅延読み込み
編集<iframe src="https://example.com" loading="lazy" width="600" height="400"></iframe>
使用上の注意
編集- セキュリティ: 外部コンテンツを埋め込む場合、
sandbox属性を使用してセキュリティリスクを軽減してください。 - アクセシビリティ:
title属性を設定し、埋め込まれたコンテンツの目的を明確に伝えるようにしましょう。 - レスポンシブデザイン: CSSを使用してレスポンシブなフレームを作成することを検討してください。
非推奨の使用法
編集- コンテンツが動的に生成されない場合は、
<iframe>の使用を避け、代替手段を検討してください。
関連仕様
編集参考情報
編集<iframe>要素は、コンテンツ統合やサードパーティウィジェットの埋め込みに適しています。sandbox属性を使用することで、埋め込まれたコンテンツが実行できる操作を細かく制御できます。- 遅延読み込み（
loading="lazy"）を活用してページのパフォーマンスを向上させることができます。