HTML <iframe> タグ

  • 前のページ <i>
  • 次のページ <img>

コース推薦：

<iframe> 定義と用法

インラインフレームタグは、インラインフレーム（内連フレーム）を定義します。

のスタイル（以下の例を参照してください）。インラインフレームは、現在のHTMLドキュメントに別のドキュメントを埋め込むために使用されます。 <iframe> CSSを使用して設定してください。

のスタイル（以下の例を参照してください）。ヒント： <iframe> 常に title 属性を持たせると良いでしょう。スクリーンリーダーはこの属性を使用して、 <iframe> コンテンツの説明。

も参照してください：

HTML 教程：HTML Iframe

HTML DOM リファレンスマニュアル：IFrame オブジェクト

例

例 1

インラインフレームタグは以下の通りです：

<iframe src="https://www.codew3c.com" title="CodeW3C.com オンラインチュートリアル"></iframe>

自分で試してみてください

例2

iframeの枠を追加または削除します（CSSを使用して）：

<iframe src="/index.asp" width="100%" height="300" style="border:1px solid black;">
</iframe>
<iframe src="/index.asp" width="100%" height="300" style="border:none;">
</iframe>

自分で試してみてください

属性

属性 値 説明
allow <iframe>の機能ポリシーを定義します。
allowfullscreen
  • true
  • false
 iframeがrequestFullscreen()メソッドを呼び出してフルスクリーンモードをアクティブにできる場合はtrueに設定します。
allowpaymentrequest
  • true
  • false
 クロスオリジンでのiframeに対するPayment Request APIの呼び出しを許可する場合はtrueに設定します。
高さ ピクセル <iframe>の高さを定義します。デフォルトの高さは150ピクセルです。
loading
  • eager
  • lazy
 ブラウザがiframeを即座にロードするか、ある条件を満たすまでロードを遅らせるかを定義します。
name テキスト <iframe>の名前を定義します。
referrerpolicy
  • リファラー情報を無効にします。
  • downgrade時のリファラー情報を無効にします。
  • origin
  • origin-when-cross-origin
  • same-origin
  • strict-origin-when-cross-origin
  • unsafe-url
 iframeを取得する際に送信する参照情報を定義します。
sandbox
  • allow-forms
  • allow-pointer-lock
  • allow-popups
  • allow-same-origin
  • allow-scripts
  • allow-top-navigation
 <iframe>内の内容に対する一連の追加制限を有効にします。
src URL <iframe>に埋め込むドキュメントのURLを定義します。
srcdoc HTMLコード <iframe>内に表示するページのHTML内容を定義します。
幅 ピクセル <iframe>の幅を定義します。デフォルトの幅は300ピクセルです。

グローバル属性

<iframe> タグは以下のイベント属性もサポートしています HTMLのグローバル属性。

イベント属性

<iframe> タグは以下のイベント属性もサポートしています HTMLのイベント属性。

デフォルトの CSS 設定

ほとんどのブラウザは以下のデフォルト値で表示します <iframe> 要素：

iframe:focus {
  outline: none;
}
iframe[seamless] {
  display: block;
}

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート
  • 前のページ <i>
  • 次のページ <img>