インラインフレームは、ページの行内に配置できるフレームで、そのフレーム内に別のページを表示します。W3Cが勧告する仕様においてインラインフレームは、XHTML1.0では移行型DTD(Transitional)または、フレーム設定型DTD(Frameset)で定義します。

例)

<iframe src="aaa.htm" id="aaa" name="aaa" style="float: left;" width="270" height="30" frameborder="0" scrolling="yes" marginwidth="0" marginheight="0" title="">
インラインフレーム非対応環境への代替内容を記述します。
</iframe>
○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○

○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○

※親要素に450pxの幅を指定しています。


iframe要素

インラインフレームを定義します。インラインフレーム未対応のブラウザの為に開始タグと終了タグの間にインラインフレームの使用、代替内容または、内容となるファイルへのURIを記述します。

例)

<iframe src="aaa.htm" id="aaa" name="aaa" style="float: left;" width="270" height="30" frameborder="0" scrolling="yes" marginwidth="0" marginheight="0" title=""></iframe>


src属性

インラインフレームに表示させるファイルのURIを指定します。

例)

<iframe src="aaa.htm" id="aaa" name="aaa" style="float: left;" width="270" height="30" frameborder="0" scrolling="yes" marginwidth="0" marginheight="0" title=""></iframe>


id属性とname属性

インラインフレームに名前を付けます。a要素, area要素, base要素, form要素, link要素の target属性でリンク先に特定のインラインフレームを参照します。なお、アンカー名の指定は、name属性ではなくid属性で行なう方向にW3Cは移行させており、 XHTML1.0では移行的な措置としてどちらでも機能するように同じ値で両方を指定する事が推奨されています。

例)

<iframe src="aaa.htm" id="aaa" name="aaa" style="float: left;" width="270" height="30" frameborder="0" scrolling="yes" marginwidth="0" marginheight="0" title=""></iframe>


width属性とheight属性

インラインフレームの横幅と高さ を指定します。値は単位(ピクセル)をつけない数値、またはパーセンテージ( % )値。

例)

<iframe src="aaa.htm" id="aaa" name="aaa" style="float: left;" width="270" height="30" frameborder="0" scrolling="yes" marginwidth="0" marginheight="0" title=""></iframe>

※代替指定
width属性とheight属性はそれぞれスタイルシートのwidthプロパティとheightプロパティで代替指定できます。

例)

width: 270px;
height: 30px;

frameborder属性

frameborder属性は、フレームとフレームの境界線に関する指定をします。frameborder属性の指定が無い場合は、境界線が表示されます。

値)

例)

<iframe src="aaa.htm" id="aaa" name="aaa" style="float: left;" width="270" height="30" frameborder="0" scrolling="yes" marginwidth="0" marginheight="0" title=""></iframe>


scrolling属性

インラインフレームの画面をスクロールする、しない、ウインドウサイズに応じてのスクロールバーの表示、非表示を指定します。また、scrolling属性の指定が無い場合の初期値はautoです。

値)

例)

<iframe src="aaa.htm" id="aaa" name="aaa" style="float: left;" width="270" height="30" frameborder="0" scrolling="yes" marginwidth="0" marginheight="0" title=""></iframe>


インラインフレームとテキストの回り込み floatプロパティ

floatプロパティの値にleft rightを指定する事でテキストを回り込ませる位置を指定できます。

値)

例)

<iframe src="aaa.htm" id="aaa" name="aaa" width="270" height="30" frameborder="0" scrolling="yes" style="float: left;" marginwidth="0" marginheight="0" title=""></iframe>


clearプロパティ

br要素にclearプロパティを指定することで途中で回り込みを解除することができます。

値)

floatプロパティ , clearプロパティ

例)

float: left;
clear: both;


インラインフレームとテキストの上下位置 vertical-alignプロパティ

vertical-alignプロパティの値に以下の値を指定する事でインラインフレームとテキストの上下方向の揃え方を指定できます。また、指定しない場合の初期値はbaselineです。

例)

vertical-align: middle;


marginwidth属性とmarginheight属性

インラインフレーム内に表示するページの余白をframe要素に指定します。marginwidth属性はインラインフレーム内の左右の余白、marginheight属性はインラインフレーム内の上下の余白を指定します。値は単位(ピクセル)をつけない数値。

例)

<iframe src="aaa.htm" id="aaa" name="aaa" style="float: left;" width="270" height="30" frameborder="0" scrolling="yes" marginwidth="0" marginheight="0" title=""></iframe>

※代替指定
marginwidth属性とmarginheight属性は、スタイルシートのmarginプロパティで代替指定できます。

例)

margin: 0px;


title属性

音声出力環境のブラウザへの配慮からiframe要素にtitle属性でページの簡単な内容を記述する事が推奨されています。

例)

<iframe src="aaa.htm" id="aaa" name="aaa" width="270" height="30" frameborder="0" scrolling="yes" marginwidth="0" marginheight="0" title=""></iframe>


ページトップへ戻る



RAWで撮ろうLife with a cameraLife with a camera 2


inserted by FC2 system