<iframe> | HTML5タグ辞典

<iframe src=”読み込むファイルのパス”></iframe>

iframe要素は他のHTMLファイルを読み込むための要素です。iframeの領域内に読み込んだHTMLが表示されます。

googleマップやyoutubeの埋め込みや、利用規約の表示などに利用されることが多いです。

記述例

<iframe src="https://webya-san.com/iframe_sample.html" width="100%" height="200"></iframe>

src属性で読み込むファイルを指定します。ファイルの指定は相対パスでも可能です。
iframeには閉じタグもありますが、閉じタグとの間には何も記載しません。

iframeの幅と高さはwidth属性とheight属性で指定しています。％指定とピクセル指定が可能です。
ピクセル指定の場合は単位を省略できます。幅と高さはCSSでも指定可能です。

表示

読み込んだコンテンツがiframeの領域からはみ出す場合はスクロールバーが表示されます。
スクロールバーの表示はCSSの overflow で制御可能です。

属性

src属性

iframe要素で読み込むファイルをURLで指定します。相対パスでも指定できます。

width属性

iframe表示領域の幅を指定します。

height属性

iframe表示領域の高さを指定します。

name属性

iframeの名前を指定します。
iframeにname属性で名前をつけ、その名前をa要素の target に指定することでそのiframe内にリンク先のページを表示することができます。

sandbox属性

iframe要素で読み込んだHTMLに対してセキュリティーの制限をかけることができます。sandbox属性の値は半角スペースで複数指定が可能です。

sandbox属性を指定しなければ全ての動作が許可されます。

sandbox属性で値を指定すると、その値の動作のみが許可され、その他の値の動作は制限されます。

sandbox属性を記述して値を一つも指定しない場合、全ての動作が制限されます。