Movatterモバイル変換


[0]ホーム

URL:


W3 Watch Reference - Web クリエイターのための HTML & CSS クイックリファレンスReference

サイト内検索

HTML Tag Reference

iframe 要素

他の文書を埋め込む

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

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

iframe 要素の仕様

詳細説明

src 属性

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

srcdoc 属性

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

name 属性

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

sandbox 属性

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

width 属性

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

height 属性

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

referrerpolicy 属性

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

loading 属性

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

iframe 要素のサンプルソース

<aside> <h1>広告</h1> <iframe src="ad.html" width="300" height="300" title="広告"></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>
<!--  sandbox 属性を使用した例 --><iframe src="sample.html" sandbox></iframe>
<!-- XML として妥当な書き方 --><iframe src="sample.html" sandbox="sandbox"></iframe>
<!-- iframe 要素のコンテンツモデルは「空」なので、内容を持つことはできません --><iframe src="sample.html" width="300" height="300"> × このような記述は構文エラーです</iframe>

主要ブラウザの対応

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

関連する要素

仕様書の該当箇所

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

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

最新著書のご案内

できるポケット Web制作必携 HTML&CSS全事典 改訂4版

ロングセラー中。3度目の大幅改定となる改訂4版は 2024年12月24日 インプレスより発売。

コンパクトサイズの B6 判で、手元に置いておきやすい HTML / CSS のリファレンス本です。

Amazon で購入
アクセシビリティ対応、アクセシビリティガイドラインに準拠・配慮したウェブサイトの構築ならバーンワークス株式会社へ
詳しく見る

[8]ページ先頭

©2009-2025 Movatter.jp