iframeの使い方についてまとめ

iframeの概要

iframeとはインラインフレームを作る要素です。インラインフレームとは文書内に別の文書などの閲覧コンテンツを入れ子に配置したもののことです。

iframeのカテゴリー

コンテンツカテゴリー

iframeに入れられるタグ一覧

タグ早見表

なし（空要素）

入れられるタグのカテゴリー・モデル

  • コンテンツカテゴリなし
  • コンテンツモデルなし

iframeに使える属性

属性とは<iframe> タグ内に入れることのできるものです。属性をあてはめることにより、CSS・JavaScriptなどで操作する際に識別させることが可能になります。

よく使うグローバル属性

id 概要 要素に対してID固有の識別名を付けることができます。
属性の値 英字から始まる英数字
class 概要 要素に対して分類名を付けることができます。
属性の値 英字から始まる英数字
style 概要 要素に対して直接スタイルを指定することができます。
属性の値 スタイルシートのコード
グローバル属性一覧はこちら

iframeで使う属性

src 概要 埋め込むコンテキストのパスを指定する属性です。
属性の値 埋め込むページのURL
importance 概要 src属性内のリソースのダウンロード優先度を定義できます。
属性の値 auto,high,low
srcdoc 概要 src属性を上書きします。ブラウザーがsrcdocに対応しない場合はsrc属性のURLが表示されます。
属性の値 埋め込むページのURL
width 概要 フレームの横幅を指定できます。
属性の値 数値
height 概要 フレームの高さを指定できます。
属性の値 数値
name 概要 フレームの名称を指定できます。
属性の値 文字列
sandbox 概要 指定をなしにするとCookieなどへのアクセス、ポップアップ、プラグインなどが無効化されます。
属性の値 allow-forms、allow-modals、allow-orientation-lock、allow-pointer-lock、allow-popups、allow-popups-to-escape-sandbox、allow-presentation、allow-same-origin、allow-scripts、allow-top-navigation、allow-top-navigation-by-user-activation
referrerpolicy 概要 リソースにアクセスした際の送信するリファラーを指定できます。
属性の値 no-referrer、no-referrer-when-downgrade、same-origin、origin、strict-origin、origin-when-cross-origin、strict-origin-when-cross-origin、unsafe-url

スポンサードサーチ

<iframe>の使い方

外部コンテンツの埋め込み

ブラウザ対応状況

ブラウザの対応（PC)
Chrome あり
Safari あり
Internet Explorer あり
Edge あり
Firefox あり
Opera あり
ブラウザの対応（SP)
Chrome あり
Safari あり
Samsung Internet あり