iframeとは？

<iframe>（インラインフレーム）は、別のウェブページまたはドキュメントを現在のページに埋め込むHTML要素です。ページの矩形領域内に独立した閲覧コンテキストを作成し、地図、動画、サードパーティウィジェットなど、異なるURLからのコンテンツをユーザーがページから離れることなく表示できます。

iframeは、YouTubeの動画、Googleマップ、決済フォーム、ソーシャルメディアウィジェット、広告バナーを埋め込むために一般的に使用されます。埋め込まれたコンテンツは独立したコンテキストで実行されるため、sandboxやallowなどの属性を使用して、埋め込まれたページが実行できる操作を厳密に制御できます。

ツール説明

このツールは、シンプルなフォームから、すぐに貼り付けられる<iframe> HTMLコードを生成します。ソースURL、寸法、スクロール動作、読み込み戦略、権限、サンドボックス制限を設定すると、ツールは対応するタグを即座に出力します。手動で属性を記述したり、サンドボックスフラグの構文を暗記する必要はありません。

例

最小限のiframe：

<iframe
  src="https://example.com"
  width="600"
  height="400"
  allowfullscreen
  style="border: none;"
></iframe>

遅延読み込みとサンドボックス付きiframe：

<iframe
  src="https://example.com"
  width="800"
  height="500"
  loading="lazy"
  allowfullscreen
  style="border: none;"
  sandbox="allow-scripts allow-same-origin"
></iframe>

カメラとマイク権限付きiframe：

<iframe
  src="https://meet.example.com"
  width="960"
  height="540"
  allowfullscreen
  style="border: none;"
  allow="camera; microphone; display-capture"
></iframe>

機能

  • ビジュアルフォームから有効な<iframe>コードを生成 — HTMLの知識は不要
  • 権限（allow）とサンドボックス制限を完全に制御
  • オプションを変更すると、ライブプレビューがリアルタイムで更新

オプション説明

オプション 説明
URL src属性 — 埋め込むページのアドレス
幅 / 高さ iframeのピクセル寸法
タイトル アクセシビリティラベル（title属性）— スクリーンリーダーが読み上げ
名前 name属性、リンクターゲットとして使用
スクロール スクロールバーを制御：自動、常にオン、常にオフ
読み込み eagerは即座に読み込み；lazyはビューポート近くまで遅延
フルスクリーン許可 allowfullscreenを追加して、埋め込まれたコンテンツをフルスクリーン化可能に
枠線 チェック解除時、style="border: none;"を追加してデフォルト枠線を削除
機能許可 埋め込まれたページに特定のブラウザAPI権限を付与
サンドボックスフラグ 埋め込まれたページが実行できる操作を制限；各フラグで特定の機能を再度有効化

ヒント

  • アクセシビリティのため、常にtitle属性を指定してください — スクリーンリーダーはiframeにフォーカスしたときにそれを読み上げます。
  • ページの下部にあるiframeにはloading="lazy"を使用してページ読み込みパフォーマンスを向上させてください。
  • sandbox属性をフラグなしで追加すると、コンテンツは完全にロックダウンされます；実際に必要なフラグのみを追加してください。