🪟 iFrame生成器

iFrame生成器について

このiFrame生成器は、すべてブラウザ内で完結します。ソースURL、サイズ、オプション属性（title、loading、allow、sandbox、class、id、style）を入力すると、そのまま貼り付けられる <iframe> タグをライブプレビュー付きで生成します。サーバーへのアップロードは一切なく、JavaScript によってあなたのデバイス上で瞬時に処理されます。

主な属性

• src —— 埋め込むページのURL。iframeに何かを表示するには必須です。
• width と height —— iframeの寸法。ピクセル（例：560）またはパーセント（例：100%）で指定。
• title —— iframeコンテンツを説明するアクセシブルなラベル。スクリーンリーダーユーザーに重要。
• loading —— lazy はユーザーが近くまでスクロールするまでiframeの読み込みを遅延します。eager は即時読み込み。
• allow —— 埋め込みページが使用できる機能ポリシーのリスト。例：fullscreen、geolocation、camera。
• sandbox —— セキュリティのため埋め込みページの能力を制限。allow-scripts や allow-same-origin などのトークンを必要に応じて組み合わせ。
• frameborder —— 枠のためのレガシー属性。現代のサイトは style="border:0;" を使うべき。
• class、id、style —— スタイルと識別のための標準HTML属性。

使い方

1. ソースURL を入力——これは唯一の必須フィールドです。
2. 幅 と 高さ を設定します。レスポンシブ埋め込みにはパーセントを使用。
3. アクセシビリティのため タイトル を追加（推奨）。
4. iframeが折りたたみ領域の下にある場合、ページ読み込み性能向上のため loading="lazy" を選択。
5. allow で特定の権限を付与（例：動画プレーヤーに fullscreen）。
6. コピー をクリックし、生成されたHTMLをページに貼り付け。

よくある質問

データはアップロードされますか？ いいえ。すべてローカルブラウザで行われ、入力がデバイスから外に出ることはありません。

iframeが読み込まれないのはなぜ？ 多くのサイト（Google、Facebook、X/Twitterなど）は X-Frame-Options や Content-Security-Policy ヘッダーを送信し、埋め込みを防ぎます。これはサーバー側の選択であり、iframeタグ自体は正しいが、リンク先がレンダリングを拒否しています。

allow と sandbox の違いは？ allow は埋め込みページに追加の権限（フルスクリーンやカメラなど）を付与します。sandbox は埋め込みページの能力を制限します（スクリプト実行やフォーム送信など）。両者は補完関係にあります。

sandbox は常に使うべき？ 信頼できないコンテンツの場合はい——コンテンツが機能する範囲で最も厳しい sandbox を適用します。信頼できるファーストパーティコンテンツの場合、sandbox は通常不要です。