HTML <iframe> タグ

前へ 完全なHTM リファレンス 次へ

インラインフレームは次のようにマークアップします:

<iframe src="http://www.w3schools.com"></iframe>
Try it Yourself ❯

定義と用法

<iframe> タグは、インラインフレームを指定します。

インラインフレームは、現在の HTML 文書内に他の文書を埋め込むために使用します。


ブラウザ・サポート

要素
<iframe> Yes Yes Yes Yes Yes

チップスと注意事項

チップ: <iframe> をサポートしていないブラウザへの対応として、開始タグ <iframe> と 終了タグ </iframe> の間にテキストを追加します。

チップ: <iframe> のスタイルには CSS を使用してください (スクロール・バーをも含まて)。


HTML 4.01 と HTML5 の相違点

HTML5 には、新規属性が追加されましたが、HTML 4.01 の属性の一部は、HTML5 から削除されています。


HTML と XHTML との相違点

XHTML では、name 属性は非推奨になり、削除されています。代わりに global id 属性を使用してください。


属性

= HTML5 で新規追加。

属性 説明
align left
right
top
middle
bottom
HTML5 ではサポート対象外。
<iframe> 内の要素の配置を指定する/td>
frameborder 1
0
HTML5 ではサポート対象外。
<iframe> の周囲にボーダーを表示するかどうかを指定する
height pixels <iframe> の高さを指定する
longdesc URL HTML5 ではサポート対象外。
<iframe> のコンテンツに対する長い説明があるページを指定する
marginheight pixels HTML5 ではサポート対象外。
<iframe> のコンテンツに対する上と下マージンを指定する
marginwidth pixels HTML5 ではサポート対象外。
<iframe> のコンテンツに対する左と右マージンを指定する
name text <iframe> の名前を指定する
sandbox allow-forms
allow-pointer-lock
allow-popups
allow-same-origin
allow-scripts
allow-top-navigation
<iframe> のコンテンツへの特別な制約を可能にする
scrolling yes
no
auto
HTML5 ではサポート対象外。
<iframe> のスクロールバーを表示するかどうかを指定する
src URL <iframe> に埋め込む文書のアドレスを指定する
srcdoc HTML_code <iframe> に表示するページの HTM Lコンテンツを指定する
width pixels <iframe> の幅を指定する

グローバル属性

<iframe> タグは、HTML のグローバル属性もサポートします。


イベント属性

<iframe> タグは、HTML のイベント属性もサポートします。


関連ページ

HTML チュートリアル:HTML Iframes

HTML DOM リファレンス:IFrame オブジェクト


デフォルトの CSS 設定

ほとんどのブラウザは、次のデフォルト値を使用して <iframe> 要素を表示しています:

iframe:focus {
    outline: none;
}

iframe[seamless] {
    display: block;
}


前へ 完全なHTM リファレンス 次へ