iframeタグ・とは？初心者向けに使い方と注意点を徹底解説共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

iframeタグ・とは？

iframeタグは、ウェブページの中に別のウェブページを表示するためのHTMLタグです。src属性で表示するURLを指定し、widthとheightで表示領域の大きさを決めます。表示される外部ページは、親ページの中に「窓のような枠」を作って見せるイメージで、実際には別のドキュメントとして読み込まれます。つまり、同じページ内に別のページを貼り付けて表示する仕組みです。

使い方の基本

使い方の基本はとてもシンプルです。次のように記述します。<iframe src='https://example.com' width='600' height='400' title='外部ページの埋め込み'></iframe>。この例では、https://example.com の内容が横600px×縦400pxの窓に表示されます。title属性はアクセシビリティの観点から重要です。スクリーンリーダーを使う人にも、どんな内容を表示しているのか伝えやすくなります。

埋め込みの注意点

iframeにはいくつかの注意点があります。セキュリティの観点から、埋め込むページの挙動を制限するためのsandbox属性を使うことが推奨されます。sandboxを設定すると、ポップアップの表示やスクリプトの実行、フォームの送信などを制限できます。必要な機能だけを許可するには、allow属性を組み合わせて使います。さらに、referrerpolicyで参照元の情報の送信方法を制御することも可能です。

パフォーマンスと検索エンジン最適化

iframe内の内容は親ページとは別のドキュメントとして読み込まれるため、親ページのSEOには直接影響しにくい点に注意しましょう。iframeの読み込みが遅いと、ページ全体の表示が遅く感じることもあります。読み込みを遅くしない工夫として、lazy loading（遅延読み込み）を活用する方法があります。必要な場合だけ iframe を読み込むと、性能が改善されることがあります。

具体的な応用例

地図や動画、資料の公開など、外部ソースを同じページに見せたい場面でiframeは活躍します。地図を埋め込む場合の例を挙げると、<iframe src='https://maps.google.com/?output=embed' width='600' height='450' title='地図の埋め込み'></iframe>のように記述します。動画やプレゼン資料を表示する場合も、同様の構文で表示領域を用意します。ページの内容を伝える説明文を併せて用意しておくと、情報が伝わりやすくなります。

代替手段と注意点

iframeを使わずに情報を伝える方法として、リンクを設置して外部ページへ直接訪問してもらう方法や、公開したい情報を自ページ内に直接表示できる別の仕組みを検討するのも良いです。また、第三者のページを埋め込む場合は、そのページの利用規約や権利関係にも気をつけましょう。検索エンジンのクローラーは、iframe 内の内容を必ずしも親ページと同じように評価しないことがあります。ユーザーに必要な情報を、iframe の外にもきちんと用意することが大切です。

属性	説明
src	表示する外部ページのURLを指定します。必須です。
width	表示領域の横幅を指定します。例: 600
height	表示領域の縦幅を指定します。例: 400
title	代替テキストとして機能し、アクセシビリティの改善に役立ちます。
loading	lazy など、読み込み動作の指定ができます。現代のブラウザで \"lazy\" が推奨されます。
sandbox	iframe 内の挙動を制限します。複数の値を組み合わせて使います。
allow	外部機能の使用を許可します。例: allow=\"fullscreen\"
referrerpolicy	参照元情報の送信方法を制御します。

まとめとして、iframeタグは外部コンテンツを自分のページに埋め込む強力なツールですが、セキュリティとアクセシビリティを意識して使うことが大切です。必要な場合だけ使用し、可能な限り代替手段を検討しましょう。

iframeタグの同意語

インラインフレーム: HTML文書内に別のHTMLを埋め込んで表示する要素。外部ページを現在のページ内の枠として表示します。
インラインフレーム要素: iframe要素と同義の表現。インラインフレームとして、外部ページを枠の中に表示します。
iframe要素: iframeというタグ名を指す正式な呼び方。外部ページを埋め込む機能を持つHTML要素です。
iframe: 英語名で、HTMLのインラインフレーム要素を指します。実務ではこの名称がよく使われます。
外部ページを埋め込む要素: 現在のページ内に外部サイトのページを表示するための要素の総称です。

iframeタグの対義語・反対語

直接埋め込み: 外部のHTMLファイルを読み込まず、ページの中に直接コンテンツを埋め込むこと。
同一ドキュメント内表示: 別ファイルをロードせず、同じドキュメント内で表示すること。
インライン表示: 要素が文書の流れに直接組み込まれ、別のドキュメントとして読み込まれないこと。
iframeを使わない表示: iframeを用いず、外部文書の読み込みを回避する表示形式。
外部リソース読み込みなし: 初期表示時に外部のHTMLやメディアを読み込まない構成。
同一オリジン内での統合: 外部オリジンの文書を読み込まず、同一オリジン内のコンテンツだけを結合すること。
サーバーサイドレンダリング (SSR): クライアント側で外部文書を読み込むのではなく、サーバー側でHTMLを組み立てて返す方法。

iframeタグの共起語

src: iframe が埋め込む外部ドキュメントのURLを指定します。別ドメインのページを表示する際に使用します。
width: iframe の横幅をピクセルや割合で指定します。デザインに合わせてサイズを調整します。
height: iframe の縦方向のサイズを指定します。
srcdoc: iframe に直接HTMLを埋め込む場合に使う属性。外部URLを使わずHTMLを記述できます。
sandbox: iframe 内のコンテンツに対する安全制約を設定する属性。値を組み合わせて機能を許可/制限します。
allowfullscreen: iframe 内のコンテンツが全画面表示を許可されるようにします。通常はユーザー操作が必要です。
loading: 遅延読み込みを指定します。ページの初期表示を速くするために使われます。
referrerpolicy: iframe から送信される参照元情報の取り扱い方を指定します（参照元の送信を制御します）。
title: アクセシビリティ向上のため、iframe の説明を提供します。
frameborder: 枠線の表示有無を古い属性で制御します（現代の仕様では非推奨です）。
scrolling: iframe 内部のスクロールバーの表示を制御します（現在は非推奨です）。
allow: sandbox の代替のように、iframe 内で何を許可するかを複数の機能として指定します。
aria-label: 視覚障害者向けに iframe の内容を説明するラベルを設定します。
aria-labelledby: 他の要素を参照して iframe のラベルを設定します。
aria-describedby: 追加の説明を指し示す要素を指定します。
同一オリジンポリシー: 同一オリジンからのリソース取得のみを許可するセキュリティ要件。クロスオリジンには制限があります。
クロスオリジン: 別のオリジンのコンテンツを埋め込む際の制限や挙動を指します。
Content-Security-Policy: 埋め込み先のセキュリティポリシーを指示する HTTP ヘッダーまたはメタタグ。frame-ancestors などの設定に影響します。
X-Frame-Options: 外部サイトが自サイトのページを iframe で表示できるかを制御する古いセキュリティ設定。
allow-scripts: sandbox 属性の値の一つ。スクリプトの実行を許可します。
allow-same-origin: sandbox の値。同一オリジンとして扱い、クッキーやストレージの共有を許可します。
allow-forms: sandbox の値。フォームの送信を許可します。
allow-popups: sandbox の値。ポップアップの表示を許可します。
allow-top-navigation: sandbox の値。トップレベルのナビゲーションを許可します。
allow-popups-to-escape-sandbox: sandbox の値。サンドボックス外へポップアップが抜け出せるようにします。
レスポンシブデザイン: 画面サイズに応じて iframe の表示を調整する設計手法。
埋め込み代替: iframe で表示する代わりに他の要素（embed や object）を使う選択肢。
セキュリティ: iframe の利用時に意識するべき安全対策や潜在的なリスク。

iframeタグの関連用語

iframeタグ: HTMLの要素で、別のウェブページを現在のページに埋め込むための枠を作る。
src属性: 埋め込むコンテンツのURLを指定する属性。外部ページを読み込む入口。
srcdoc属性: iframe内に直接HTMLコードを埋め込むときに使う属性。外部URLを使わない場合に便利。
width属性: iframeの横幅をピクセルなどで指定する属性。CSSと併用して使われることが多い。
height属性: iframeの縦幅をピクセルなどで指定する属性。
title属性: アクセシビリティの向上のため、iframeの内容を説明する名前を付ける属性。
name属性: iframeに名前を付けて、リンクのターゲット指定に利用する。
sandbox属性: iframe内実行環境を制限するセキュリティ機能。デフォルトは制約が強く、必要に応じてフラグを追加する。
allow属性: sandbox内の許可リストを設定する属性。例: allow-scripts, allow-forms など。必要に応じて複数指定。
allowfullscreen属性: iframe内のコンテンツが全画面表示できるようにするブール属性。
loading属性: 遅延読み込みを指定する属性。lazyに設定すると画面外の時に読み込みを遅らせる。
referrerpolicy属性: iframeが送信するRefererヘッダのポリシーを指定する属性。
srcdocの利点: 外部URLを読み込まないため通信回数を減らせる。一方で動的な更新が難しくなる場合がある。
同一オリジンポリシー: 親ページとiframe内のドキュメントが同一オリジンかどうかを制御するセキュリティルール。
クロスオリジン: 異なるオリジン間でデータを共有する際の制限と通信方法の総称。
X-Frame-Options: サーバーのレスポンスヘッダで、他サイトからのiframe埋め込みの可否を制御する設定。
Content-Security-Policy frame-ancestors: CSP設定の一部で、iframeの親ページを制限する。
postMessage: 親ページとiframe間で安全に情報をやり取りするためのJavaScript API。
セキュリティ上の注意点: 信頼できるソースのみを埋め込み、必要に応じてsandboxを適用する等の対策。
sandboxフラグ: sandbox属性に指定する具体的な許可フラグ。例: allow-scripts, allow-same-origin, allow-forms など。
アスペクト比: 表示領域の縦横比を保つ工夫。例: 16:9 を維持するためのCSSテクニック。
レスポンシブ対応: 親要素の幅に合わせてiframeのサイズを自動調整するデザイン手法。
frameborder属性: 枠線の表示を制御する古い属性。現代はCSSで代替する。
scrolling属性: スクロールバーの表示を制御する古い属性。現代はCSS/overflowで対応。
seamless属性: 親とiframeの境界をなくす意図の古い属性。現在は非推奙（廃止）された機能。