<IFRAME> | NN 6 IE 3 HTML 4 | ||||||||||||||
<IFRAME>...</IFRAME> | HTML 終了タグ : 必要 | ||||||||||||||
iframe 要素は、ドキュメントコンテンツ内の流れの中にインラインフレームを作成します。フレームは四角形の領域であり、この中に他の HTML ドキュメント (またはスクリプトを使用して領域に動的にコンテンツを書き込むことも可能) を挿入できます。iframe 要素の name 属性に値を指定すると、その名前を a、form、またはリンク先や返されるドキュメントのターゲットを定義できる要素の target 属性の値として使用できます。 iframe 要素の領域は、その前のコンテンツの直後から始まりますが (テキストの行を含む)、終了タグに続くすべてのコンテンツはフレームの領域の後の行から始まります。iframe 要素の前のテキストは img 要素や object 要素の周辺と同様に位置揃えすることができます。 iframe 要素をサポートするブラウザでは、開始タグと終了タグとの間のコンテンツは無視されます。その他のブラウザでは、そのようなコンテンツはインライン HTML コンテンツとして (欠如している部分をユーザーに知らせたり、関連情報へのリンクを提供する方法として) 表示されます。iframe 要素に最も近い機能やビヘイビアを持つ Navigator 4 要素は ilayer 要素です。 iframe 要素は別のサーバーファイルからのコンテンツを描画するので、クライアント側の "インクルード" を実行する方法として使用できます (第 5 章を参照)。多くの点で、iframe は frame 要素と同様に機能しますが、フレームセットは必要ありません。実際、フレーム参照構文 (window.frameName) によってこの要素を参照する場合、この要素はフレームと同様に機能し、返されるオブジェクトのタイプは frame 要素オブジェクトではなく、window 要素オブジェクトです。 iframe 要素は frame および frameset 要素と共に Transitional HTML 4 DTD で妥当性が検証されますが、Transitional XHTML DTD で妥当性が検証されるのは iframe のみです。iframe は HTML 4 および XHTML の Frameset DTD で妥当性が検証されます。 |
|||||||||||||||
例 | |||||||||||||||
<IFRAME src="quotes.html" width="150" height="90"> <A href="quotes.html" target="new" style="color:darkred"> Click here to see the latest quotes </A> </IFRAME> |
|||||||||||||||
オブジェクト参照 | |||||||||||||||
[window.]document.getElementById(elementID)
|
|||||||||||||||
要素固有の属性 | |||||||||||||||
|
|||||||||||||||
要素固有のイベントハンドラー属性 | |||||||||||||||
なし |
align | NN 6 IE 3 HTML 4 |
align="alignmentConstant" | オプション |
周りのコンテンツのコンテキストで iframe 要素の領域を位置揃えする方法を指定します。この要素の属性の定義については、本章の 8.1.5 項を参照してください。 |
|
例 | |
<IFRAME src="quotes.html" width="150" height="90" align="center"></IFRAME> |
|
値 | |
大文字と小文字を区別しない定数値 |
|
既定値 | |
left |
|
オブジェクト参照 | |
[window.]document.getElementById(elementID).align
|
datafld | NN なし IE 4 HTML なし |
datafld="columnName" | オプション |
IE のデータバインディングと共に使用して、iframe 要素の src 属性の代わりにリモートデータソース列名を関連付けます。データソース列には有効な絶対または相対 URI が必要です。この要素には datasrc 属性も設定する必要があります。Macintosh 版 IE 5 ではテキストファイルのデータソースに対してのみ機能します。 |
|
例 | |
<IFRAME datasrc="DBSRC3" datafld="newsURL"></IFRAME> |
|
値 | |
大文字と小文字を区別する識別子 |
|
既定値 | |
なし |
|
オブジェクト参照 | |
[window.]document.getElementById(elementID).dataFld
|
datasrc | NN なし IE 4 HTML なし |
datasrc="dataSourceName" | オプション |
IE のデータバインディングと共に使用して、リモートデータアクセス用にデータソースオブジェクトを読み込むページの object 要素の ID を示します。データソースからのコンテンツは datafld 属性によって設定されます。Macintosh 版 IE 5 ではテキストファイルのデータソースに対してのみ機能します。 |
|
例 | |
<IFRAME datasrc="DBSRC3" datafld="newsURL"></IFRAME> |
|
値 | |
大文字と小文字を区別する識別子 |
|
既定値 | |
なし |
|
オブジェクト参照 | |
[window.]document.getElementById(elementID).dataSrc
|
frameborder | NN 6 IE 3 HTML 4 |
frameborder="borderSwitch" | オプション |
iframe 要素のボーダーを表示するかどうかを制御します。メインドキュメントの一部として埋め込まれているようにリンクされているドキュメントを表示する場合は、frameborder 属性を無効にします。 |
|
例 | |
<IFRAME src="quotes.html" width="150" height="90" frameborder="no"></IFRAME> |
|
値 | |
この属性を有効または無効にする値はソースによって異なります。HTML 4 では、1 が有効、0 が無効に指定されています。Internet Explorer 4 および Netscape 6 では、HTML の値と yes または no を使用できます。 |
|
既定値 | |
1 |
|
オブジェクト参照 | |
[window.]document.getElementById(elementID).frameBorder
|
height、width | NN 6 IE 4 HTML 4 |
height="length" width="length" | オプション |
これらの要素は iframe 要素の寸法を設定します。Macintosh 版 IE 4.5 以降では必要です。HTML 4 では、いずれの要素の使用も推奨されておらず、代わりに CSS の height および width スタイル属性が使用されます。 |
|
例 | |
<IFRAME src="news.html" height="200" width="200"> |
|
値 | |
ピクセル数で示す長さの値または使用可能な領域のパーセント値 |
|
既定値 | |
幅 300 ピクセル、高さ 150 ピクセル |
|
オブジェクト参照 | |
[window.]document.getElementById(elementID).height [window.]document.getElementById(elementID).width |
hspace、vspace | NN なし IE 4 HTML なし |
hspace="pixelCount" vspace="pixelCount" | オプション |
コンテンツ内の iframe 要素の周りに余白を設定します。hspace 属性は左右の端の余白 (横方向の余白) を制御し、vspace 属性は上下の端の余白 (縦方向の余白) を制御します。このような余白を追加すると、フレームの周りに空のクッションができます。もう 1 つの方法として (またブラウザ間の互換性を保つために)、さまざまなマージンはスタイルシートで指定することもできます。特に 1 つの端のみに余白を追加する場合にこの方法が便利です。 |
|
例 | |
<IFRAME src="news.html" hspace="20" vspace="10"> |
|
値 | |
正の整数 |
|
既定値 | |
0 |
|
オブジェクト参照 | |
[window.]document.getElementById(elementID).hspace [window.]document.getElementById(elementID).vspace |
longdesc | NN 6 IE 6 HTML 4 |
longdesc="URL" | オプション |
title 属性のコンテンツよりも長い要素の説明があるドキュメントの URL を示します。今後のブラウザにおけるこの属性の用途の 1 つは、ブラウザ画面を読むことができないユーザーのために、要素の説明を抽出することです。Netscape 6 でこの要素のコンテキストメニューに表示される [プロパティ] をクリックすると、この属性に指定された URL へのアクティブなリンクが小さなウィンドウに表示されます。バージョン 6 のブラウザでは、この属性にその他の機能はありません。 |
|
例 | |
<IFRAME longdesc="newsDesc.html" title="Navigation Bar" src="news.html"> </IFRAME> |
|
値 | |
絶対 URL または相対 URL を含む有効な URI |
|
既定値 | |
なし |
marginheight、marginwidth | NN 6 IE 3 HTML 4 |
marginheight="pixelCount" marginwidth="pixelCount" | オプション |
フレーム内部の端とフレーム内に表示されるコンテンツとの間のピクセル数を指定します。marginheight 属性はフレームの上下 (スクロールした場合) の端に沿ったスペースを制御し、marginwidth 属性はフレームの左右の端に沿ったスペースを制御します。HTML 4 仕様ではブラウザの既定値が使用されます。 ブラウザはフレームの内側に 8 ~ 14 ピクセルのデフォルトのマージンを挿入します。ただしデフォルトの動作を変更する場合には、どちらかの属性を設定すると、もう一方の属性に 000 が設定されるので注意が必要です。したがって、フレームの端に余白を置かずにコンテンツを表示する場合を除き、この両方の属性に値を設定する必要があります。 |
|
例 | |
<IFRAME src="news.html" marginheight="20" marginwidth="14"></IFRAME> |
|
値 | |
正の整数値または 0 |
|
既定値 | |
ブラウザや OS によって異なります。 |
|
オブジェクト参照 | |
[window.]document.getElementById(elementID).marginHeight [window.]document.getElementById(elementID).marginWidth |
name | NN 6 IE 3 HTML 4 |
name="elementIdentifier" | オプション |
リンクやフォームがリンク先または返されたドキュメントを、リンクやフォームのあるフレーム以外のフレームに読み込む場合、この要素の target 属性には新しいコンテンツを読み込むフレームを指定します。そのようなコンテンツをフレームに送るには、そのフレームの name 属性に値が指定されている必要があります。その同じ値が a または form 要素の target 属性に指定されます。 |
|
例 | |
<IFRAME name="news" id="news" src="news.html"></IFRAME> |
|
値 | |
大文字と小文字を区別する識別子 |
|
既定値 | |
なし |
|
オブジェクト参照 | |
[window.]document.getElementById(elementID).name
|
scrolling | NN 6 IE 3 HTML 4 |
scrolling="featureSwitch" | オプション |
デフォルトでは、インラインフレームに読み込まれたコンテンツが表示されている要素のコンテンツ領域を越える場合に、ブラウザによって垂直や水平のスクロールバーが追加されます。スクロールバーは通常、コンテンツの専用領域に表示されるためレイアウトに影響が出ます。つまり、スクロールバーを表示するためにその分フレームは拡張されません。また、ブラウザと OS のバージョンによってデフォルトフォントサイズが異なることから、テキストコンテンツはクライアントごとに表示が異なる場合があります。フレームにスクロールバーが表示されないようにするには scrolling 属性に no を設定し、常にフレーム内にスクロールバーを表示するにはこの属性に yes を設定します。後者の場合、コンテンツにスクロールが必要ないときでもスクロールバーは表示されますが、使用できないようになっています。 あらゆるブラウザやプラットフォームでテストを行い、重要なコンテンツが常にフレーム内に完全に表示されることを確認した場合にのみ、scrolling 属性に no を設定します。これにより、フレームがスクロールなしに設定されたためにコンテンツを表示できなくなる状況を回避できます。 この属性の代わりに CSS の overflow スタイル属性を使用することもできます。Microsoft では、スクロールバーに対する軸ごとの制御もできるように overflow-x および overflow-y スタイル属性が用意されています。 |
|
例 | |
<IFRAME src="news.html" scrolling="no"></IFRAME> |
|
値 | |
定数値 : auto | no | yes |
|
既定値 | |
auto |
|
オブジェクト参照 | |
[window.]document.getElementById(elementID).scrolling
|
security | NN なし IE 6 HTML なし |
security="restricted" | オプション |
この属性を有効にすると、インラインフレームのセキュリティレベルが Windows の [セキュリティ] の設定の [制限付き] レベルに上がります。このようなフレームのコンテンツではスクリプトを実行できません。 |
|
例 | |
<IFRAME src="news.html" security="restricted"> |
|
値 | |
定数値 : restricted |
|
既定値 | |
なし |
src | NN 6 IE 3 HTML 4 |
src="URL" | オプション |
iframe 要素に読み込まれるコンテンツの URL を定義します。URL は、絶対 URL またはフレームセット仕様があるドキュメントの URL に対する相対 URL です。javascript: 擬似 URL を使用して、スクリプトの戻り値をフレームに表示することもできます。src 属性を省略すると、空のフレームが開きます。 |
|
例 | |
<IFRAME src="news.html"></IFRAME> |
|
値 | |
絶対 URL または相対 URL、または javascript: 擬似 URL |
|
既定値 | |
なし |
|
オブジェクト参照 | |
[window.]document.getElementById(elementID).src
|
style | NN 4 IE 4 HTML 4 |
style="styleSheetProperties" | オプション |
この属性を使用すると、現在の要素のスタイルシート規則プロパティ割り当てを設定できます。スタイル属性の割り当てには、CSS または JavaScript (Navigator 4 のみ) 構文を使用できます。style 属性は表示可能な要素についてのみ使用します。 |
|
例 | |
<SPAN style="color:green; font-size:18px">Big, green, and bold</SPAN> |
|
値 | |
CSS 構文のスタイルシート規則全体は引用符によって囲まれます。複数のスタイル属性設定はセミコロンで区切られます。スタイルシート属性の詳細については、第 11 章を参照してください。 |
|
既定値 | |
なし |
|
オブジェクト参照 | |
[window.]document.getElementById(elementID).style
|
vspace | |
hspace を参照してください。 |
width | |
height を参照してください。 |