HTML iframeタグの使い方｜外部ページ埋め込みの基本を初心者向けに解説

HTML iframeタグの使い方｜外部ページ埋め込みの基本

先生と生徒の会話形式で理解しよう

生徒

「HTMLのiframeタグって、何をするためのタグなんですか？」

先生

「iframeタグは、別のWebページを今見ているページの中に表示するためのHTMLタグです。」

生徒

「自分のページの中に、他のページをそのまま入れられるんですか？」

先生

「そうです。地図や動画、別サイトのページなどを埋め込むときによく使われます。基本から順番に見ていきましょう。」

1. HTMLのiframeタグとは？

iframeタグは、HTMLで外部ページを埋め込むための要素です。自分が作っているWebページの中に、別のWebページを小さな画面のように表示できます。イメージとしては、ノートに他の紙を貼り付ける感覚に近いです。HTML iframeは、地図表示、動画表示、社内システム画面の表示など、さまざまな場面で使われています。

2. iframeタグの基本構文を理解しよう

iframeタグはとてもシンプルな書き方をします。表示したいページのURLを指定することで、そのページが埋め込まれます。HTML初心者の方でも、コピーして使いやすいのが特徴です。Webページ埋め込みの第一歩として覚えておくと便利です。


<iframe src="https://example.com"></iframe>

ブラウザ表示

3. iframeのサイズを指定する方法

iframeは初期状態だと小さく表示されることがあります。その場合は、横幅や高さを指定します。サイズを指定することで、見やすいレイアウトになります。数字はピクセルという単位で指定され、画面上の大きさを表します。


<iframe src="https://example.com" width="600" height="400"></iframe>

ブラウザ表示

4. iframeでよく使われる埋め込み例

iframeタグは、特定のサービスを表示するときによく使われます。代表的な例として、地図、動画、PDFファイルの表示があります。自分で難しい仕組みを作らなくても、外部サービスの画面をそのまま利用できる点が大きなメリットです。


<iframe src="/img/sample150-100.jpg" width="150" height="100"></iframe>

ブラウザ表示

5. iframeが使えない場合がある理由

すべてのWebページがiframeで表示できるわけではありません。セキュリティ対策として、埋め込みを禁止しているサイトもあります。その場合、iframeを使っても画面が表示されません。これは安全にWebを利用するための仕組みなので、エラーではありません。

6. iframe利用時の注意点

iframeを使うと便利ですが、使いすぎには注意が必要です。ページの読み込みが遅くなったり、スマートフォンで見づらくなることがあります。また、埋め込む外部ページの内容が変わると、自分のページの表示も変わります。HTML iframeは必要な場面に絞って使うことが大切です。

7. iframeとSEOの関係

iframeで表示される外部ページの内容は、基本的に自分のサイトの検索評価には直接反映されません。そのため、iframeだけに頼ったページ構成はSEOの面で不利になることがあります。説明文や見出しなど、自分の言葉で書かれたHTML要素と組み合わせることで、検索エンジンにも伝わりやすいページになります。