iframeジェネレーター

このツールについて

Iframe Generatorは、そのまま使えるHTML `<iframe>` 埋め込みコードを作成します。ソースURL、サイズ、タイトル、スクロール動作、遅延読み込み、フルスクリーン許可、sandbox属性を設定し、出力結果をコピーしてください。

すべての項目はリアルタイムで生成コードに反映されます。データはサーバーに送信されません。title属性はアクセシビリティのために必須です。スクリーンリーダーがこれを読み上げ、埋め込みコンテンツを説明します。

使い方

1. URLフィールドに埋め込みたいURLを入力します。
2. 幅、高さ、タイトル、ボーダー、スクロール、読み込みオプションを設定します。
3. 必要に応じてallowfullscreenとsandboxを切り替え、sandboxが有効な場合は付与する権限を選択します。
4. 生成されたiframeコードをコピーし、HTMLに貼り付けます。

活用事例

開発者はYouTubeやVimeoの動画を正確なピクセルサイズで埋め込みます。フロントエンドエンジニアは、sandboxによるセキュリティを確保しながら地図、ウィジェット、サードパーティ製ツールを埋め込みます。デザイナーは外部コンテンツをインラインで含むポータルページを作成します。

よくある質問

• sandbox属性とは何ですか？ — sandboxは、埋め込まれたページが実行できる操作(スクリプトの実行、フォームの送信、ポップアップの表示など)を制限します。セキュリティのため、実際に必要な権限のみを有効にしてください。
• title属性が重要なのはなぜですか？ — スクリーンリーダーはtitleを使用して、視覚に障害のあるユーザーに埋め込みコンテンツを説明します。WCAG 2.1では、すべてのiframeに意味のあるtitleを設定することが求められています。
• すべてのウェブサイトが埋め込みを許可していますか？ — いいえ。サイトによってはX-Frame-OptionsやContent-Security-Policyヘッダーを送信し、埋め込みをブロックする場合があります。埋め込みが明示的に許可されているページのみ埋め込むことができます。