【HTML】iframe埋め込み：外部コンテンツ表示のポイント

HTML

1. iframeとは何か？

<iframe>（インラインフレーム）は、Webページの中に別のHTMLドキュメントを表示するための「窓」を作るタグです。

  • 役割: 外部の情報を自分のサイトの一部としてシームレスに表示する。
  • メリット: 外部サイトの機能を、自分のサイトを離れることなくユーザーに提供できる。

2. 具体的な実装手順（例：Googleマップ）

ここでは、多くのサイトで活用されている「Googleマップの埋め込み」を例に、基本的な構造を確認します。

基本の記述

HTML
<iframe 
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.7479746645863!2d139.7454329!3d35.6585805!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1782376636660!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="strict-origin-when-cross-origin">
  width="600" 
  height="450" 
  style="border:0;" 
  loading="lazy">
</iframe>

属性の役割（備忘録）

  • src: 埋め込みたいコンテンツのURLを指定する（今回は東京タワーのマップURLを例示）。
  • width / height: 表示する「窓」のサイズを決定する。
  • style=”border:0;”: 枠線を非表示にして、デザインをすっきりさせる。
  • loading=”lazy”: 画面に近づいた時に読み込む設定。表示速度の最適化に必須。

3. 実装のポイント

「iframeを使う」ということは、別のWebサイトを自分のページに表示するということです。以下の点に留意してください。

  1. URLの正確性: src に指定するURLが正しいかを確認する（埋め込み専用のURL形式である必要がある）。
  2. 表示制限: サイトによってはセキュリティ設定（X-Frame-Options）により、埋め込みを禁止している場合がある。
  3. レスポンシブへの配慮: 固定サイズ（px）で指定するとスマホで見づらくなるため、CSSで width: 100% を当てて調整するのが一般的。

4. まとめ

iframeは、動画、マップ、SNS投稿など、様々な外部ツールを埋め込むための非常に汎用的なタグです。まずは簡単なURLを埋め込む練習から始めて、Webサイトの表現の幅を広げていきましょう。

コメント