iframe タグ

タグ iframe は、あるサイトのコンテンツを別のサイトに埋め込むことを可能にします。新しいウィンドウやタブを開くことなく、動画、画像、記事などのコンテンツを表示するために使用されます。

埋め込まれるサイトのコンテンツは、そのサイト自身のデザインを保持します。このため、当方のサイトのCSSスタイルやJavaScriptコードは、 iframe タグのコンテンツに影響を与えません。

iframe のコンテンツに当方のJavaScriptを適用することは可能ですが、そのためには特別な方法を用いる必要があります。

iframe タグは、YouTubeなどのプラットフォームからの動画の埋め込みや、他のソースからの記事や画像の表示など、ウェブサイトで広く使用されています。

属性

属性	説明
`src`	埋め込むページのアドレスを指定します。
`srcdoc`	iframe のコンテンツを属性内に直接記述することを可能にします。
`frameborder`	iframe の周囲に枠線を設定します。値 `yes` は枠線を設定し（デフォルト）、値 `no` は枠線を削除します。
`scrolling`	iframe 内のスクロールバーを設定します。値 `auto` - 必要に応じてスクロールバーを表示（デフォルト）、値 `yes` - 常にスクロールバーを表示、値 `no` - スクロールバーなし。

当方のサイトに他のサイト（例としてを使用）の iframe を埋め込んでみましょう：

html<iframe src="/" width="600" height="400"></iframe>

Результат:

当方のサイトに YouTube の動画を埋め込みます：

html<iframe
  src="https://www.youtube.com/embed/KzQrHpB1H8U"
  allowfullscreen
  width="400"
  height="400">
</iframe>

Результат:

iframe のコンテンツを直接記述します：

html<iframe
  srcdoc="<h1>見出し</h1><p>テキスト</p>"
  width="300"
  height="200">
</iframe>

Результат: