インラインフレーム(iframe)は、HTML文書内に別のHTML文書を埋め込むための要素です。これを使用すると、別のウェブページやコンテンツを現在のページ内に表示することができます。たとえば、外部サイトのコンテンツや動画、広告バナーなどを埋め込む際に便利です。
使い方と例
以下は、インラインフレームを使用するための基本的なサンプルコードです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>インラインフレームの例</title> </head> <body> <h1>インラインフレームの例</h1> <iframe src="https://www.naana.co.jp/" width="100%" height="600" title="Example Site"></iframe> </body> </html>
上記の例では、iframe要素を使用して、外部サイト(https://www.naana.co.jp/)のコンテンツを現在のページ内に表示しています。
表示例
属性
インラインフレームには、以下のような属性を指定できます:
src: 埋め込むコンテンツのURLを指定します。
widthとheight: フレームの幅と高さを指定します。
title: フレームのタイトルを指定します。アクセシビリティの観点から推奨されます。
frameborder: フレームの境界線の表示/非表示を指定します。値は0(非表示)または1(表示)です。
allowfullscreen: フレーム内のコンテンツを全画面表示可能にします。
注意点
インラインフレームを多用すると、ページの読み込み速度に影響を与える可能性がありますので、使用には注意が必要です。
セキュリティの観点から、埋め込む外部コンテンツが信頼できるものであることを確認してください。
一部のブラウザやセキュリティ設定によっては、外部サイトの埋め込みが制限される場合があります。