【HTML Living Standard】iframe要素の使い方
iframe要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
iframeオブジェクトは、現在のHTML文書内に別のHTML文書を埋め込むためのオブジェクトです。この要素を使用することで、一つのウェブページの中に、独立した別のウェブページやコンテンツを表示させることができます。例えば、外部の地図サービス、動画プレーヤー、広告、または他のサイトの特定の情報を自身のページに組み込む際に活用されます。
この要素の最も基本的な機能は、src属性によって埋め込みたいHTML文書のURLを指定することです。表示されるフレームのサイズは、width属性とheight属性を用いてピクセル単位やパーセンテージで設定することができます。
<iframe>を利用する上でセキュリティは特に重要です。sandbox属性を使用することで、埋め込まれたコンテンツが実行できるスクリプト、フォーム送信、ポップアップ表示などの機能を制限し、悪意のあるコードから自身のサイトを保護することが可能です。また、allow属性を設定することで、埋め込まれたコンテンツがカメラやマイクといったデバイス機能にアクセスする権限を細かく制御できます。
アクセシビリティの観点からは、title属性にフレームの内容を簡潔に説明するテキストを指定することが推奨されます。これにより、スクリーンリーダーなどの支援技術を利用するユーザーがコンテンツの内容を理解しやすくなります。
<iframe>は、異なるドメインのコンテンツを安全に表示したり、分離された環境でスクリプトを実行したりするための強力なツールですが、その特性を理解し、適切なセキュリティ対策を講じることが不可欠です。
構文(syntax)
1<iframe src="url" title="description"></iframe>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
iframeとは？別HTMLを埋め込む
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>iframe要素のサンプル</title> 7 <style> 8 /* iframeの見た目を調整するCSS（任意） */ 9 iframe { 10 border: 1px solid #007bff; /* 枠線を設定 */ 11 border-radius: 5px; /* 角を丸くする */ 12 box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1); /* 影を追加 */ 13 } 14 body { 15 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 16 margin: 20px; 17 color: #333; 18 } 19 h1, h2 { 20 color: #0056b3; 21 } 22 p { 23 line-height: 1.6; 24 margin-bottom: 15px; 25 } 26 </style> 27</head> 28<body> 29 <h1>iframe要素とは何か？</h1> 30 <p> 31 <code><iframe></code>要素は、現在のHTMLドキュメント（親ページ）内に 32 別のHTMLドキュメント（子ページや外部ウェブページ）を埋め込むために使用されます。 33 これにより、外部のコンテンツを自身のページの一部として表示できます。 34 </p> 35 36 <h2>サンプル: srcdoc属性を使ったiframeの埋め込み</h2> 37 <!-- 38 srcdoc属性は、iframe内に表示するHTMLコンテンツを直接記述する際に使用します。 39 これにより、外部ファイルを用意することなく、このHTMLファイル単体でiframeの動作を確認できます。 40 通常は、src属性を使って外部のURL（例: src="https://www.example.com"）を指定します。 41 title属性は、スクリーンリーダーなどの補助技術のための説明を提供し、アクセシビリティを向上させます。 42 --> 43 <iframe 44 srcdoc="<!DOCTYPE html><html><head><title>埋め込みコンテンツ</title><style>body{font-family:sans-serif;background-color:#e6f7ff;margin:20px;text-align:center;color:#0056b3;}</style></head><body><h3>このコンテンツはiframe内部で表示されています！</h3><p>これは親ページとは独立した別のHTMLドキュメントです。</p></body></html>" 45 width="700" 46 height="400" 47 title="iframeの埋め込みコンテンツサンプル" 48 > 49 <!-- iframeがサポートされていないブラウザ向けに代替コンテンツを記述できますが、現代ではほとんどのブラウザがiframeをサポートしています。 --> 50 お使いのブラウザはiframeをサポートしていません。 51 </iframe> 52 53 <p> 54 上記サンプルでは、<code>srcdoc</code>属性を使ってiframe内にシンプルなHTMLコンテンツを埋め込んでいます。 55 <code>width</code>と<code>height</code>属性でiframeの表示サイズをピクセル単位で指定できます。 56 </p> 57 58 <p> 59 多くのウェブサイトはセキュリティ上の理由（<code>X-Frame-Options</code>ヘッダなど）で 60 外部からの埋め込みを許可していないため、<code>src</code>属性で外部サイトを指定しても表示されない場合があります。 61 ご自身で作成した別のHTMLファイルを<code>src</code>属性に指定して試すのが最も確実です。 62 例: <code><iframe src="my_other_page.html" width="..." height="..."></iframe></code> 63 </p> 64</body> 65</html>
iframe要素は、現在のHTMLドキュメント内に別のHTMLドキュメントを埋め込むために使用されます。これにより、自身のウェブページの一部として外部のコンテンツや他のウェブページを表示することが可能になります。
このサンプルコードでは、<iframe>要素がページ内に組み込まれており、通常は埋め込むコンテンツのURLをsrc属性で指定するところを、srcdoc属性を使ってHTMLコンテンツを直接記述しています。この方法は、外部ファイルを用意せずにiframeの動作を単体で確認する際に便利です。width属性とheight属性は、iframeが表示される幅と高さをピクセル単位で設定します。また、title属性は、スクリーンリーダーなどの補助技術向けにiframeの内容を説明し、アクセシビリティを高める上で重要な役割を果たします。
iframe要素自体は、プログラミング言語の関数のように引数を直接受け取ったり、特定の値を戻り値として返したりすることはありません。しかし、srcやsrcdoc、width、height、titleといった「属性」を通じて表示内容や振る舞いを設定します。これらの属性は、要素の動作を定義するための設定値であり、プログラミングにおける引数に似た役割を果たします。
なお、多くの外部ウェブサイトはセキュリティ上の理由（X-Frame-Optionsヘッダなど）から、他のページへの埋め込みを許可していない場合があります。そのため、src属性で外部サイトを指定しても表示されないことがありますのでご注意ください。ご自身で作成した別のHTMLファイルをsrc属性に指定して試すのが最も確実な方法です。
<iframe>要素は現在のHTMLドキュメント内に別のHTMLドキュメントを埋め込む際に用いますが、いくつかの注意点があります。最も重要なのはセキュリティです。src属性で外部ウェブサイトを指定する場合、そのサイトのセキュリティポリシー（X-Frame-Optionsなど）によって表示が拒否されることが多いため、まずはご自身で作成したHTMLファイルを指定して動作確認することをお勧めします。サンプルにあるsrcdoc属性は、テスト用途でHTMLコンテンツを直接記述する際に便利ですが、通常はsrc属性で外部URLやファイルパスを指定します。アクセシビリティのためには、必ずtitle属性で埋め込むコンテンツの内容を具体的に説明し、widthとheight属性で適切な表示サイズを指定してください。これらを守ることで、安全かつ正しく<iframe>を利用できます。
HTML iframe 別のページを埋め込む
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>iframe要素のサンプルコード</title> 7</head> 8<body> 9 <h1>iframe要素の基本的な使い方</h1> 10 11 <!-- iframeは、現在のHTMLページ内に別のウェブページを埋め込むために使用されます。 --> 12 <!-- src属性には、埋め込みたいウェブページのURLを指定します。 --> 13 <!-- widthとheight属性は、埋め込まれるフレームの幅と高さをピクセル単位で指定します。 --> 14 <!-- title属性は、アクセシビリティのためにiframeの内容を簡潔に説明します。これは必須属性です。 --> 15 <iframe 16 src="https://www.example.com" 17 width="800" 18 height="600" 19 title="example.comのウェブサイトを表示するフレーム" 20 style="border: 1px solid #ccc;"> 21 </iframe> 22 23 <p> 24 上記は、iframe要素を使って「https://www.example.com」のウェブサイトを埋め込んだ例です。 25 埋め込みたいウェブサイトによっては、セキュリティ上の理由（例: X-Frame-Optionsヘッダー）により、 26 iframe内での表示が拒否される場合があります。 27 </p> 28</body> 29</html>
<iframe>要素は、現在のHTMLドキュメントの中に、別のウェブページやドキュメントを枠（フレーム）として埋め込んで表示するために使用されます。プログラミング言語のリファレンス情報にある通り、この要素自体に引数や戻り値という概念はありません。単体で動作し、属性によってその表示内容や挙動を制御します。
サンプルコードでは、<iframe>要素を使って「https://www.example.com」という外部のウェブサイトを埋め込む例を示しています。
最も基本的な属性はsrcです。この属性には、埋め込みたいウェブページのURLを正確に指定します。
また、width属性とheight属性は、埋め込まれるフレームの表示領域の幅と高さをそれぞれピクセル単位で設定するために使用されます。これにより、レイアウトに合わせて埋め込みコンテンツのサイズを調整できます。
特に重要なのはtitle属性です。これは必須属性であり、スクリーンリーダーなどの支援技術を利用するユーザーが、埋め込まれたコンテンツの内容を理解できるように、その目的や内容を簡潔に説明するテキストを指定します。ウェブページのアクセシビリティを確保するために不可欠です。
このコードを実行すると、現在のウェブページ内に、指定されたURLのウェブページが、幅800ピクセル、高さ600ピクセルの枠で表示されます。ただし、外部のウェブページを埋め込む際には注意が必要です。埋め込みたいウェブサイトによっては、セキュリティ上の理由（例えば、HTTPヘッダーの「X-Frame-Options」など）により、他のウェブページ内での表示が拒否される場合があります。<iframe>は、外部コンテンツを柔軟に組み込む強力な手段ですが、これらのセキュリティ上の制約を理解して利用することが重要です。
iframe要素は、現在のHTMLページ内に別のウェブページを埋め込むために使用されます。src属性には埋め込みたいウェブページのURLを正確に指定してください。フレームのサイズはwidthとheight属性で設定できます。特に重要なのは、アクセシビリティのためにフレームの内容を簡潔に説明するtitle属性です。これは必須属性ですので必ず記述しましょう。埋め込みたいウェブサイトによっては、セキュリティ上の理由（X-Frame-Optionsヘッダーなど）により、iframe内での表示が拒否される場合があります。また、多くのiframeを配置するとページの読み込み速度が低下する可能性があるため、パフォーマンスにも注意してください。