iframeタグの使い方と外部コンテンツの埋め込み方法をわかりやすく解説

INDEX

iframeの概要

別のWebページやコンテンツを埋め込む HTMLタグ

<iframe src=”URL”></iframe>

概要 iframeタグは、別のWebページや動画、地図、広告などのコンテンツを現在のページに埋め込むためのタグです。

属性	説明	使用例
`src`	埋め込むコンテンツのURL	`<iframe src="https://ja.wikipedia.org/wiki/"></iframe>`
`width`	iframeの幅（pxまたは%）	`<iframe width="600"></iframe>`
`height`	iframeの高さ（pxまたは%）	`<iframe height="400"></iframe>`
`frameborder`	枠線の表示（0: 非表示、1: 表示）※非推奨	`<iframe frameborder="0"></iframe>`
`allowfullscreen`	動画などのフルスクリーン表示を許可	`<iframe allowfullscreen></iframe>`
`loading`	読み込みの遅延（lazy: 遅延読み込み、eager: 即時読み込み）	`<iframe loading="lazy"></iframe>`
`sandbox`	セキュリティ制限を設定	`<iframe sandbox="allow-scripts"></iframe>`

以下の例では、外部サイトをiframe内に埋め込んでいます。

<iframe src="https://ja.wikipedia.org/wiki/" width="600" height="400"></iframe>

実行例：

YouTube動画を埋め込む場合、YouTubeが提供する埋め込み用のURLを使用します。

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

Googleマップの共有機能を使って、特定の場所をiframeで埋め込むことができます。

<iframe width="600" height="450" src="https://www.google.com/maps/embed?pb=..." allowfullscreen></iframe>

Q: iframeタグを使って埋め込めないサイトがありますが、なぜですか？: A: 多くのサイトはX-Frame-Optionsヘッダーを設定しており、iframeによる埋め込みを防止しています。
Q: iframeのスクロールバーを非表示にできますか？: A: CSSのoverflow: hidden;を使用することで非表示にできます。
Q: iframeタグをレスポンシブ対応させる方法は？: A: CSSのwidth: 100%;とheight: auto;を指定し、親要素のサイズに応じて調整します。
Q: iframeの代わりに使えるタグはありますか？: A: objectタグやembedタグも外部コンテンツの埋め込みに使用できますが、iframeほど広く使われていません。
Q: iframeを使うとSEOに悪影響がありますか？: A: 一般的に、iframe内のコンテンツは検索エンジンにインデックスされにくく、SEOにはあまり良い影響を与えません。