第14回 IFrameを使って他のページを埋め込む – 他のウェブサイトやコンテンツを埋め込む – HTML入門講座

はじめに

HTMLの<iframe> 要素を使うと、他のウェブページを現在のページ内に埋め込むことができます。IFrameは、外部のコンテンツや別のページの一部を表示したい場合に非常に便利です。今回は、<iframe> 要素の基本的な使い方とその属性について学び、表示例も交えて解説します。

IFrameとは？

<iframe> は、”inline frame” の略で、別のHTMLドキュメントを現在のページ内に表示するための要素です。外部のウェブページや動画、マップなどのコンテンツを簡単に埋め込むことができ、同じドメイン内のページだけでなく、異なるドメインのページも表示できます。

IFrameの基本的な使い方

IFrameを使うためには、<iframe> タグを使用し、src 属性で表示したいページのURLを指定します。以下が基本的なIFrameの例です。

<iframe src="https://www.google.com" width="600" height="400">
  お使いのブラウザはIFrameをサポートしていません。
</iframe>

上記のコードでは、指定したURLのウェブページが600ピクセルの幅と400ピクセルの高さで埋め込まれます。

IFrameの属性

<iframe> タグには、表示を調整するためのさまざまな属性があります。ここでは、主な属性を紹介します。

※セキュリティーの関係で表示が拒否されることがあります。

src属性

src 属性は、埋め込みたいページのURLを指定します。必須の属性であり、このURLに基づいてIFrame内に表示されるコンテンツが決定されます。

<iframe src="https://www.google.com"></iframe>

widthとheight属性

width と height 属性は、IFrameの表示サイズをピクセルまたはパーセンテージで指定します。指定がない場合、デフォルトサイズで表示されます。

<iframe src="https://www.google.com" width="800" height="600"></iframe>

title属性

title 属性は、IFrame内のコンテンツを説明するための属性で、アクセシビリティ向上のために重要です。視覚障害のあるユーザーがスクリーンリーダーを使用する際に、IFrameの内容を理解するために使われます。

<iframe src="https://www.google.com" title="サンプルページ"></iframe>

allow属性

allow 属性は、IFrame内のコンテンツに対して許可される機能（カメラやマイクの使用、フルスクリーン表示など）を指定するために使用します。

<iframe src="https://www.google.com" allow="fullscreen"></iframe>

frameborder属性

frameborder 属性は、IFrameの枠線を表示するかどうかを指定します。0を設定すると枠線が非表示になり、1を設定すると枠線が表示されます。現在はCSSで管理されることが一般的です。

<iframe src="https://www.google.com" frameborder="0"></iframe>

IFrameの活用例

動画の埋め込み

IFrameを使って、YouTubeなどの動画をウェブページに埋め込むことができます。YouTubeでは、共有ボタンを使ってIFrameの埋め込みコードを取得できます。

<iframe width="560" height="315" src="https://www.youtube.com/embed/zmEa7KX6D00" 
  title="YouTube動画プレーヤー" frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
  allowfullscreen></iframe>

例: YouTubeの動画が埋め込まれ、ページ上で再生可能になります。

Googleマップの埋め込み

GoogleマップもIFrameを使って埋め込むことができます。特定の場所を表示する地図を簡単にウェブページに追加できます。

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.8354345097743!2d144.95373531544802!3d-37.81627944202159!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad65d43f1b0c0db%3A0xc0bb7b3a65f1c67f!2sFederation%20Square!5e0!3m2!1sja!2sjp!4v1618194587081!5m2!1sja!2sjp" 
  width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

例: 以下に、Googleマップの埋め込み表示を示します。

まとめ

IFrameを使えば、他のページやコンテンツを簡単に自分のページに埋め込むことができます。動画やマップの埋め込みはもちろん、外部サービスやコンテンツの統合にも非常に便利です。次回は、CSSを使ってIFrameの表示をさらにカスタマイズし、デザイン性を高める方法について学びましょう！