iframeとは
iframeはインラインフレームの略で、あるWebページの中に別のページを枠として埋め込むためのHTMLタグです。ページの中に小さな別のブラウザ画面を開くようなイメージです。
地図サービスや動画、外部の予約フォームなどを自分のサイトに表示したいとき、相手が用意した埋め込み用のiframeを貼り付けるだけで利用できます。手軽に外部コンテンツを取り込める便利な仕組みです。
基本的な書き方
iframeを使うときは、タグに表示したいページのアドレスを指定します。あわせて枠の大きさを整えると、レイアウトに収まりよく配置できます。
多くのサービスは「埋め込みコード」としてiframeのタグを用意しています。そのままコピーして貼り付ければ表示できるので、HTMLに慣れていなくても使い始めやすいのが特徴です。
- 埋め込みたいサービスで「埋め込みコード」を取得する
- 表示したいHTMLの位置にそのコードを貼り付ける
- 枠の幅と高さをページのレイアウトに合わせて調整する
- 実行できる動作を絞る属性を付けて安全性を高める
- ブラウザで実際に表示と動きを確認する
実務ではどこで関係する？
iframeは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。
iframeについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。
- 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
- 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
- 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
- 運用の話: 期限、差し替え、削除、共有メッセージまで決める
よく使われる場面
iframeが活躍する代表的なケースを挙げます。自分で一から作らなくても、外部の機能を取り込めるのが利点です。
- 地図サービスを記事や店舗ページに埋め込む
- 動画プレーヤーを自分のサイトで再生できるようにする
- 外部の問い合わせフォームや予約システムを表示する
- 別ページのプレビューを枠内に表示する
セキュリティ上の注意点
iframeは外部のページを取り込むため、信頼できない相手のページを埋め込むのは避けるべきです。埋め込んだ先で意図しない動きが起きると、利用者に影響が及ぶおそれがあります。
現在は、iframeにできることを制限する仕組みが用意されています。実行できる動作を絞る属性を付けることで、安全性を高められます。提供元が信頼できるかを確認したうえで使うのが基本です。
表示で起きやすい問題
サイトによっては、他のページからiframeで読み込まれることを拒否する設定をしている場合があります。その場合は埋め込もうとしても表示されず、空白になります。
また、iframeの中身は親ページとは別のページなので、見た目の調整やスマートフォン対応が思いどおりにいかないことがあります。枠のサイズ指定やレイアウトの工夫で見え方を整える必要があります。
埋め込みより共有URLが向く場面
iframeは外部コンテンツを取り込める便利なタグですが、信頼性や表示の制約を理解して使うことが大切です。何を埋め込むのか、相手が許可しているのかを確認する習慣を持ちましょう。
一方で、完成したページそのものを関係者に見てもらいたいときは、埋め込みよりも一時的な共有URLを渡す方が手軽です。ギガサイト便はHTMLやZIPをドロップするだけで共有URLを発行でき、関係者以外に見せたくない場合は認証を併用して限定公開できます。
よくある質問
iframeとリンクはどう違いますか？
リンクはクリックすると別ページへ移動しますが、iframeは別ページを現在のページの枠内にそのまま表示します。ページを離れずに外部の内容を見せたいときにiframeが使われます。
どんなサイトでもiframeで埋め込めますか？
いいえ。サイト側が他ページからの埋め込みを拒否する設定をしている場合、表示できず空白になります。これはなりすましなどを防ぐための安全策で、相手の設定に左右されます。
iframeはSEOに影響しますか？
iframeで埋め込んだ中身は別ページの内容として扱われるため、自分のページの本文として評価されにくい傾向があります。重要な文章は本文に直接書き、iframeは補助的な表示にとどめるのが無難です。
iframeの中身の見た目を変えられますか？
埋め込んだページが別サイトのものである場合、外側から中の見た目を自由に変えることは基本的にできません。枠のサイズや配置は調整できますが、中身のデザインは提供元に依存します。
実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？
細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。