iframe 要素他の文書を埋め込む

iframe 要素は入れ子になったブラウジング・コンテキスト (Browsing Contexts) を表します。文書内に他の文書を埋め込むことができます。

アクセシビリティの観点から、iframe 要素には title 属性を使用して適切な名前を付与することを推奨します。

詳細説明

src 属性

src 属性には iframe 要素で埋め込む HTML 文書の URI を指定します。src 属性が指定されている場合、その値に空白文字列は認められず、かつ妥当な URI が指定される必要があります。もし itemprop 属性が iframe 要素に指定されている場合、src 属性は必ず指定されている必要があります。

srcdoc 属性

srcdoc 属性には iframe 要素で埋め込む HTML 文書の内容を指定します。つまり、表示したい HTML を属性値として直接入力します。詳細は srcdoc 属性のページをご覧ください。

name 属性

埋め込まれたブラウジング・コンテンツに名前を付与します。この名前はリンクターゲットとして利用することもできます。

sandbox 属性

sandbox 属性を指定することで、iframe 要素によって埋め込まれた HTML 文書に制限をかけることができます。指定できる値など詳細は sandbox 属性のページをご覧ください。

seamless 属性

seamless 属性を指定された iframe 要素は、境界線などがなく、あたかも親となる文書の一部のように埋め込まれます。また、親となる文書から埋め込まれた文書に対してスタイルを適用したりできます。seamless 属性は論理属性です。

width 属性

iframe 要素の横幅を指定します。

height 属性

iframe 要素の高さを指定します。

referrerpolicy 属性

リンク先にアクセスする際、あるいは画像など外部リソースをリクエストする際にリファラ(アクセス元の URL 情報)を送信するか否か(リファラポリシー)を指定します。

loading 属性

ユーザエージェントに画像取得のヒントを提供します。iframe 要素、および img 要素に指定可能で、ブラウザネイティブ実装の遅延読み込み(Lazy loading)を実現します。

iframe 要素のサンプルソース

<aside>
 <h1>広告</h1>
 <iframe src="ad.html" width="300" height="300"></iframe>
</aside>
<!-- srcdoc 属性を使用した例 。値の中の「"」と「&」は文字参照にする必要があります -->
<iframe srcdoc="<p><dfn><abbr title=&quot;HyperText Markup Language&quot;>HTML</abbr></dfn>とは…</p>"></iframe>
 
<!-- XML として扱う場合は、属性値の「<」「>」も文字参照にします -->
<iframe srcdoc="&lt;p&gt;&lt;dfn&gt;&lt;abbr title=&quot;HyperText Markup Language&quot;&gt;HTML&lt;/abbr&gt;&lt;/dfn&gt;とは…&lt;/p&gt;"></iframe>
<!-- seamless 属性や sandbox 属性を使用した例 -->
<iframe src="sample.html" seamless sandbox></iframe>
<!-- XML として妥当な書き方 -->
<iframe src="sample.html" seamless="seamless" sandbox="sandbox"></iframe>
<!-- HTML 文書においては、iframe 要素の内容テキストがフォールバックになります -->
<iframe src="sample.html" width="300" height="300">
 ここにはサンプル文字列が表示されています。
</iframe>

主要ブラウザの対応

IE11
Edge(EdgeHTML)
Edge(Chromium)
Chrome
Firefox
Safari
iOS Safari
Android Chrome

仕様書の該当箇所

4.8.5 The iframe element

用途から目的の要素を探す

用途から HTML5 の要素を逆引きできます。

テキストに対する意味づけを行いたい
テキストの編集を示したい
改行や折り返しを指定したい
上付きや下付きを指定したい
テキストの書字方向を制御したい
テキストにルビをふりたい
箇条書きなどリストを表したい
セクションを定義したい
コンテンツをグループ化したい
画像や映像などを埋め込みたい
スクリプトやスタイルを埋め込みたい
フォーム関連の要素
テーブル関連の要素
ドキュメントにメタデータを付与したい
インタラクティブな要素
その他

このページの上部へ