<iframe> - インラインフレーム

トップ > HTMLリファレンス > <iframe>

■ 概要

項目説明
形式<iframe src="...">~</iframe>
サポートH5 / H4T / e3 / Ch1 / Fx1 / Sa1 / Op1 / N6
カテゴリフローコンテンツ, フレージングコンテンツ, エンベデッドコンテンツ, インタラクティブコンテンツ, パルパブルコンテンツ
親要素エンベデッドコンテンツ を子要素に持てるもの
子要素テキスト (条件あり)
タグの省略開始タグ:必須 / 終了タグ:必須

■ 説明

iframe は Inline FRAME の略です。src で指定した他のドキュメントを画面中にインラインで表示することができます。<iframe>~</iframe> の間には、<iframe> に対応していないブラウザのためのメッセージを記述します。

HTML4.01 Transitional には採用されたものの、HTML4.01 Strict には採用されませんでしたが、HTML5 には採用されています。

■ 属性

【個別属性】
属性意味
src=urlH5/H4T/e3/Ch/Fx/Sa/Op/N6。フレームの中身に表示する文書のURLを指定します。
srcdoc=contentsH5/Ch/Fx/Op。フレームに表示するコンテンツを src属性で別ファイルから指定するのではなく、直接 srcdoc属性で指定します。IE11, Safari 5.1 ではまだサポートされていません。
name=nameH5/H4T/e3/Ch/Fx/Sa/Op/N6。フレームの名前を指定します。
sandbox=sandboxH5/e10/Ch/Fx/Sa/Op。sandbox 属性を値なしで指定すると、iframeで表示されるコンテンツは別サイトのものと見なされ、フォームのサブミット、スクリプト、トップレベルコンテンツへの操作(window.top.location など)、Cookieなどへのアクセス、ポップアップ(<a target="_blank"> や window.open())、プラグインなどが無効化されます。sandbox="allow-xxx" のように値を指定すると、一部の機能を許可することができます。allow-xxx には、下記の値をスペースで区切って複数指定することが可能です。
  allow-forms:フォームのサブミットを許可
  allow-scripts:ポップアップを除くスクリプトを許可
  allow-top-navigation:トップレベルコンテンツへの操作を許可
  allow-same-origin:Cookieなどへのアクセスを許可
【表示関連】
属性意味
width=nH5/H4T/e3/Ch/Fx/Sa/Op/N6。フレームの横幅をピクセルまたはパーセンテージで指定します。
height=nH5/H4T//e3/Ch/Fx/Sa/Op/N6。フレームの高さをピクセルまたはパーセンテージで指定します。
align=alignH4T-4T/e3/Ch/Fx/Sa/Op/N6。フレームを表示する位置を指定します。
hspace=ne3-10。フレームの周りの横方向の余白をピクセル単位で指定します。
vspace=ne3-10。フレームの周りの縦方向の余白をピクセル単位で指定します。
marginheight=nH4T-4T/e3/Ch/Fx/Sa/Op//N6。フレームの上下の余白をピクセル単位で指定します。
marginwidth=nH4T-4T/e3/Ch/Fx/Sa/Op/N6。フレームの左右の余白をピクセル単位で指定します。
allowtransparency=boole55-9?。フレームを透明色にする場合は true を指定します。既定値は false です。この機能を有効にするには、フレーム内に表示するドキュメントの <body> の背景色(bgcolor)が "transparent" である必要があります。最近のブラウザでは、デフォルトで透明色になるようです。
【ボーダー関連】
属性意味
border=ne4-?。フレームの枠線の太さをピクセル単位で指定します。
bordercolor=colore4-?。フレームの枠線の色を指定します。
frameborder=frameborderH4T/e3-?/N6。フレームの枠線を表示する場合は 1 を、表示しない場合は 0 を指定します。IEでは yesno も指定可能です。
【その他の属性】
属性意味
datafld=dataflde4-?。データバインド機能を用いる際の、データソースの列名を指定します。
datasrc=datasrce4-?。データバインド機能を用いる際の、データソースの ID を指定します。
framespacing=framespacinge4-?。フレーム間の隙間をピクセル単位で指定します。
longdesc=longdescH4T-4T。このフレームに関する説明が TITLE 属性で示せないくらいに長文の場合に、その説明ページのURLを指定します。
scrolling=scrollingH4T/e3/Ch/Fx/Sa/Op/N6。スクロールバーの表示を制御します。
  yes:常に表示
  no:常に非表示
  auto:自動(既定値)
seamlessH5d。フレームコンテンツがシームレスに表示されます。フレームの境界線は無く、CSS等も、あたかもフレーム内コンテンツがフレーム外のコンテンツの一部であるように適用されます。HTML5 の草案で検討されていましたが、最終勧告では破棄されました。
【一般属性】
属性意味
accesskey=keyH4/e4/Ch2/Fx2/Sa3/Op12/N6/i1。アクセスキーを指定します。
class=classH4/e3/Ch1/Fx1/Sa1/Op1/N4。クラスを指定します。
contenteditable=boolH5/e55/Ch11/Fx3/Op10.6/Sa3.2。要素を編集可能にします。
dir=dirH4/e5/Ch5/Fx4/Sa6/Op25/N6。文字の表示方向を指定します。
hiddenH5/e/Ch/Fx/Sa/Op。要素を非表示にします。
id=idH4/e3/Ch/Fx/Sa/Op/N4。ID を指定します。
lang=langH4/e4/Ch/Fx/Sa/Op/N6。言語を指定します。
spellcheck=boolH5。スペルをチェックします。
style=styleH4/e3/Ch/Fx/Sa/Op/N4。スタイルシートを指定します。
tabindex=nH4/e4/Ch/Fx/Sa/Op/N6。タブインデックスを指定します。
title=titleH2/e2/Ch/Fx/Sa/Op/N6。タイトルを指定します。
translate=titleH5。翻訳可否を指定します。

■ 使用例

HTML
<iframe src="sample.html" height=300 width=300>
 この部分は iframe 対応のブラウザで見てください。
</iframe>

Copyright (C) 1996-2015 杜甫々
初版:1996年9月10日 最終更新:2015年1月24日
http://www.tohoho-web.com/html/iframe.htm