iframe要素
Updated / Published
iframe
要素(inline frame)はページの表示域を分割するのではなく、ページの行内(インライン)に配置できるフレームで、そのフレーム内に別のリソース(情報資源)を表示させることができます。ただし、iframe
要素に対応していない環境(iframe
要素には Internet Explorer 3.0, Netscape 6.0 のバージョンより対応)や何かしらの不具合等でiframe
要素の内容を表示できない場合のために、要素内にはフレームを使用していること・通常のリンクから行内のページにアクセスする方法などの代替内容を記述しておく必要があります。代替内容はフレーム内のリソースが表現している情報と完全に等価なものであることが重要です(「ご利用の環境では表示できません」などの記述では代替内容の意味がありません)。
iframe
要素はインライン要素だけでなくブロックレベル要素も内包することができるので、ブロックレベル要素・インライン要素の両方を取ることができます。ただし、両方同時は不可能なため、インライン要素しか内包できないブロックレベル要素またはインライン要素の中で使われた場合は、インライン要素として扱われます。
iframe
要素は非推奨ではありませんが、HTML4.01 Strict, XHTML1.0 Strict, XHTML1.1では認められていません。HTML5では、Webアプリケーション用途での活用が見込まれることから、いくつかの新しい概念が取り込まれて公認されています。
align属性
- バージョン
- HTML4.01(T,F)
- XHTML1.0(T,F)
- 指定要素
- iframe
- 必須
- -
- 非推奨
- 非推奨
- HTML4.01 strict 廃止
- XHTML1.0 strict 廃止
- XHTML1.1 廃止
- 属性値
- top
- middle
- bottom
- left
- right
インラインフレームの位置とその後に続くテキストの揃え方を指定します(Safari では無効)。値には次の5つのキーワードがあります。キーワードは半角アルファベットの大文字・小文字が区別されません(case-insensitive)。
- top
- フレームの上辺に合わせてテキスト(1行)を上揃えに表示
- middle
- フレームの垂直方向の長さの中央にテキスト(1行)を表示
- bottom
- フレームの下辺に合わせてテキスト(1行)を下揃えに表示
- left
- フレームは左に配置、その右にテキスト(複数行)が回り込む
- right
- フレームは右に配置、その左にテキスト(複数行)が回り込む
align
属性は非推奨属性のため、CSS の float
プロパティで左右の配置とその後に続くテキスト(複数行)の揃え方を、vertical-align
プロパティでテキスト(1行)との垂直方向の並びをそれぞれ代替することが推奨されています。また、回り込んだテキストを途中で解除したい場合は br
要素に clear
属性を指定すれば良いのですが、clear
属性も非推奨属性のため、インラインフレームの後に続く要素に clear
プロパティを指定すると良いでしょう。HTML5では廃止されました。
height属性
- バージョン
- HTML4.01(T,F)
- XHTML1.0(T,F)
- 指定要素
- iframe
- 必須
- -
- 非推奨
- -
- 属性値
- 整数(pixels)
- パーセンテージ値(%)
インラインフレームの高さを指定します。CSS の height
プロパティで代替が可能です。
frameborder属性
- バージョン
- HTML4.01(T,F)
- XHTML1.0(T,F)
- 指定要素
- frame
- iframe
- 必須
- -
- 非推奨
- -
- 属性値
- 1
- 0
インラインフレームの境界線の表示・非表示を指定します。値には "1
"、または "0
" を指定します。
- (半角数字の)1
- 境界線を表示する
- (半角数字の)0
- 境界線を非表示しない
frameborder
属性の指定がない場合、初期値は境界線を表示する設定になっています。CSS の border
プロパティで代替が可能です。
ただし、IE8以下で境界線を非表示にしたい場合は、CSSで境界線を非表示にするborder : 0 ;
やborder : none ;
の指定を加えても非表示にはなりません。<iframe frameborder="0" ...>
を加える必要があります。
frameborder
属性はHTML5では廃止されました。
longdesc属性
- バージョン
- HTML4.01(T,F)
- XHTML1.0(T,F)
- 指定要素
- frame
- iframe
- 必須
- -
- 非推奨
- -
- 属性値
- URI
インラインフレームに関する詳細な説明がある URI を示します。非視覚環境に対して有効なものです。title
属性はあくまでも端的な説明を行うためのものであって、詳しい説明をするために長々としたテキストを指定するのは現実的ではありません。そこで longdesc
属性の値に行内のフレームに関する詳しい説明のあるページを指定し、そちらに誘導します。UAはa
要素のリンクとは異なる形式で提供してくれることが期待できます。
次のサンプルはインラインフレームでお知らせを表示しており、「site_descript.html」のページにはお知らせのコンテンツについての詳しい説明がある想定です。
<iframe src="news.html"
name="inline" width="350" height="300" frameborder="1"
scrolling="yes" align="center" marginwidth="25" marginheight="25"
longdesc="site_descript.html#news" title="お知らせ">
<a href="news.html">お知らせ</a>
</iframe>
他にlongdesc
属性を指定できる要素にimg
要素があり、img
要素の場合は内容をもたない空要素であるためlongdesc
属性は有効な場面も想定されますが、iframe
要素においてはlongdesc
属性を使わずとも要素内に普通にインラインフレームへのページと説明が必要であれば説明ページへのリンクを記述すれば良いだけなので、HTML5においてはlongdesc
属性は廃止されました。
marginheight属性
- バージョン
- HTML4.01(T,F)
- XHTML1.0(T,F)
- 指定要素
- frame
- iframe
- 必須
- -
- 非推奨
- -
- 属性値
- 整数(pixels)
インラインフレームと周りのテキストとの間に上下の余白を設けます。値は整数(ピクセル数で解釈)で指定します。CSS の margin
プロパティで代替が可能です。HTML5では廃止されました。
marginwidth属性
- バージョン
- HTML4.01(T,F)
- XHTML1.0(T,F)
- 指定要素
- frame
- iframe
- 必須
- -
- 非推奨
- -
- 属性値
- 整数(pixels)
インラインフレームと周りのテキストとの間に左右の余白を設けます。値は整数(ピクセル数で解釈)で指定します。CSS の margin
プロパティで代替が可能です。HTML5では廃止されました。
name属性
- バージョン
- HTML4.01(T,F)
- XHTML1.0(T,F)
- 指定要素
- frame
- iframe
- 必須
- -
- 非推奨
- -
- 属性値
- インラインフレーム名
インラインフレームに名前を付けて、(a要素, area要素, base要素, form要素, link要素の)target
属性でリンク先に特定のリソースを参照させることができます。インラインフレーム名は半角アルファベットの大文字・小文字が区別されません(case-insensitive)。
scrolling属性
- バージョン
- HTML4.01(T,F)
- XHTML1.0(T,F)
- 指定要素
- frame
- iframe
- 必須
- -
- 非推奨
- -
- 属性値
- auto
- yes
- no
インラインフレームにスクロールバーを付けるかどうかを指定します。値には次の3つのキーワードがあります。キーワードは半角アルファベットの大文字・小文字が区別されません(case-insensitive)。
- yes
- 常にスクロールを許可
- no
- 常にスクロールを禁止
- auto
- 必要に応じてスクロールを許可(ページ内容よりもインラインフレームのサイズが小さい場合)
スクロールを許可する場合は、フレームの右または下にスクロールバーが表示されます。スクロールを禁止した場合は、フレームページの内容がはみだしてフレーム外に隠れてしまってもスクロールバーは表示されません。なお、scrolling
属性の指定がない場合は、初期値の "auto
" が適用され、ページ内容よりもインラインフレームのサイズが小さい場合にスクロールバーを表示します。CSS の overflow
プロパティでも代替が可能です。HTML5では廃止されました。
src属性
- バージョン
- HTML4.01(T,F)
- XHTML1.0(T,F)
- 指定要素
- frame
- iframe
- 必須
- -
- 非推奨
- -
- 属性値
- URI
インラインフレームに一番最初に表示させるページ、または画像ファイルなどのリソースの所在を URI で指定します。
width属性
- バージョン
- HTML4.01(T,F)
- XHTML1.0(T,F)
- 指定要素
- iframe
- 必須
- -
- 非推奨
- -
- 属性値
- 整数(pixels)
- パーセンテージ値(%)
インラインフレームの横幅を指定します。CSS の width
プロパティで代替が可能です。