iframeタグ -別のWebページやコンテンツを埋め込む｜HTML辞典

<iframe>タグとは？

<iframe> タグは、HTML文書内に別のWebページやコンテンツを埋め込むためのタグ です。
YouTube動画の埋め込み、Googleマップの表示、外部Webページの表示などに利用されます。

基本情報

コンテンツモデル

フローコンテンツ（Flow Content）、インタラクティブコンテンツ（Interactive Content）、エンベッデッドコンテンツ（Embedded Content）、パルパブルコンテンツ（Palpable Content）。

閉じタグの有無

<iframe> は単独タグ（空要素）ではなく、開始タグ（<iframe>）と閉じタグ（</iframe>）の両方が必要です。

基本的な記述方法

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

使用できる主な属性

<iframe> タグには多くの属性がありますが、以下は代表的なものです。

属性名	説明	例
src	埋め込むページのURLを指定	<iframe src="https://example.com"></iframe>
width	フレームの幅を指定（pxまたは%）	<iframe width="600">...</iframe>
height	フレームの高さを指定（pxまたは%）	<iframe height="400">...</iframe>
title	埋め込まれたページの説明（アクセシビリティ向上）	<iframe title="YouTube動画"></iframe>
frameborder	枠線の有無（0で枠線なし、1で枠線あり）	<iframe frameborder="0">...</iframe>
allowfullscreen	フルスクリーンモードの許可	<iframe allowfullscreen>...</iframe>
loading	遅延読み込み設定（lazy で遅延読み込み）	<iframe loading="lazy">...</iframe>
sandbox	セキュリティ制限を適用	<iframe sandbox="allow-scripts">...</iframe>

CSSを使ったデザイン変更

<iframe> のスタイルを調整したい場合は、CSSを活用できます。

iframe {
    border: none;
    width: 100%;
    max-width: 800px;
    height: 400px;
}

適切な使用例

✅ Webページを埋め込む

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

✅ YouTube動画を埋め込む

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

✅ Googleマップを埋め込む

<iframe 
    src="https://www.google.com/maps/embed?pb=..."
    width="600" height="450" 
    style="border:0;" 
    allowfullscreen="" 
    loading="lazy">
</iframe>

適切でない使用例（誤った使い方）

❌ src を指定しないのはNG

<!-- NG: src属性なし -->
<iframe width="600" height="400"></iframe>

✅ 正しい書き方（src を指定）

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

❌ allowfullscreen を使わないとYouTube動画のフルスクリーン表示ができない

<!-- NG: フルスクリーン表示が許可されていない -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>

✅ 正しい書き方（allowfullscreen を追加）

<iframe width="560" height="315" 
    src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
    allowfullscreen>
</iframe>

<iframe>タグと他のタグの違い

タグ	役割	特徴	適切な用途
<iframe>	Webページを埋め込む	src でURLを指定	YouTube動画、Googleマップ、外部ページの埋め込み
<embed>	外部コンテンツを埋め込む	type 属性で指定	Flash、PDF、その他メディアの埋め込み
<object>	外部ファイルを埋め込む	data 属性で指定	PDFやアプリケーションの埋め込み
<video>	動画を埋め込む	controls で再生可能	動画コンテンツの埋め込み

使用上の注意点

✅ title 属性を設定する（アクセシビリティ向上）

• <iframe title="埋め込まれたページの説明"> を設定すると、スクリーンリーダー対応が向上する。

✅ sandbox を使用してセキュリティを強化する

• sandbox="allow-scripts" を使うと、埋め込んだページのスクリプト実行を制限できる。

✅ loading="lazy" を使用してページのパフォーマンスを向上させる

• loading="lazy" を設定すると、画面に表示されるまで <iframe> の読み込みを遅延できる。

関連タグ

• <embed> – 外部コンテンツの埋め込み
• <object> – PDFやFlashの埋め込み
• <video> – 動画の埋め込み
• <audio> – 音声の埋め込み

まとめ

<iframe>タグは、HTML文書内で別のWebページやコンテンツを埋め込むためのタグ です。 YouTube動画の埋め込み、Googleマップの表示、外部サイトの埋め込みなどに広く活用されます。