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