Inline FRAME Element

last modified 8th/Oct. 2000

iframe 要素は、ページ内に他のページを挿入します。 %Special; に含まれるインライン要素です。

iframe 要素は、「浮動レイヤー」、「サマンサの魔法の鏡」とも呼ばれます。まずは実例を見てください。

iframe 要素は行内に別ページを挿入する事が出来ます。例えば、「サポートされているブラウザには、ここに<a href="./index.html" target="_blank">別文書</a>が挿入されています」という事になります。

表示されるイメージは画像に近いものです。

上の表示例のソース；

<p>
iframe 要素は行内に別ページを挿入する事が出来ます。
例えば、
<iframe src="./index.html" width="60%" height="150">「サポートされているブラウザには、
ここに<a href="./index.html" target="_blank">別文書</a>が挿入されています」</iframe>
という事になります。
</p>

フレームですが、 DTD は Transitional で定義されていますので、通常のインライン要素と同様に利用できます。

Transitional DTD の抜粋；

<!ELEMENT IFRAME - - (%flow;)*         -- inline subwindow -->
<!ATTLIST IFRAME
  %coreattrs;                          -- id, class, style, title --
  longdesc    %URI;          #IMPLIED  -- link to long description
                                          (complements title) --
  name        CDATA          #IMPLIED  -- name of frame for targetting --
  src         %URI;          #IMPLIED  -- source of frame content --
  frameborder (1|0)          1         -- request frame borders? --
  marginwidth %Pixels;       #IMPLIED  -- margin widths in pixels --
  marginheight %Pixels;      #IMPLIED  -- margin height in pixels --
  scrolling   (yes|no|auto)  auto      -- scrollbar or none --
  align       %IAlign;       #IMPLIED  -- vertical or horizontal alignment --
  height      %Length;       #IMPLIED  -- frame height --
  width       %Length;       #IMPLIED  -- frame width --
  >

iframe 要素の内容には、 iframe 要素をサポートしていないブラウザが代わりに表示する内容を記述します。 iframe 要素はインライン要素ですが、内容には任意のブロック要素と、任意のインライン要素を記述する事が出来ます。不思議な定義だなぁ。

属性定義

src = uri [CT]

当該フレームに最初に表示する内容の所在位置を示す。
フレームの内容はリンクで変更可能。
自分自身を再帰的に読みこむことは出来ません。

longdesc = uri [CT]

当該フレームに関する詳細記述へのリンクを指定する。
この記述は、 title 属性が提供する短文記述を補足する。

name = cdata [CI]

当該フレームの名前を示す。
この名称は、当該フレームへのリンクの target 属性の値となる。

width = length [CN]

Inline フレームの幅。

height = length [CN]

Inline フレームの高さ。

align = %Ialign; [CI]

廃止予定の非推奨属性
Inline フレームの水平方向、垂直方向の位置を指定する。
許される値は、次の五つ；
- top|middle|bottom|left|right
left | right は Inline フレームを浮動化する。

scrolling = auto|yes|no [CI]

フレームウィンドウに関するスクロールの有無を指定します。

auto: 初期値です。必要が有ればスクロールバーを出すように指定します。
yes: 常にスクロールバーを出す指定です。
no: スクロールバーを出さない指定です。

frameborder = 1|0 [CN]

フレームのボーダーの有無を指定します。

1: 初期値です。当該フレームと隣接する他のフレームとの間にボーダーを表示します。
0: 当該フレームの境界にボーダーを表示しません。隣接する他のフレームのボーダーが表示されるように指定されていれば、当該フレームの隣接辺にもボーダーが表示されるかもしれません。

marginwidth = pixels [CN]

フレーム内容の左右マージンを指定します。値はゼロより大きい必要があり、初期値はブラウザに依存します。

marginheight = pixels [CN]

フレーム内容の上下マージンを指定します。値はゼロより大きい必要があり、初期値はブラウザに依存します。

iframe 要素で最初に挿入するリソースの所在地を示す src 属性と、当該フレーム枠の名前を指定する name 属性は事実上必ず指定することになります。その他の属性は CSS でより柔軟に指定できます。

align 属性を与えたインライン・フレームの例；

<p>
iframe 要素は置換インライン要素ですから、 align 属性で浮動化する事が出来ます。
<iframe src="./index.html" width="60%" height="200" name="smp"
  align="left">「ここは iframe 要素です。
読みこんでいるファイルは
<a href="./index.html">Tips for HTML DOcuments</a>
です。」</iframe>
浮動化した要素の脇に流れ込んだテキストの周り込みを中断したい場合は、
br 要素に clear 属性を与えます。
今は、左に浮動化した要素に対する周り込みを中断したいので、
clear="left" になります。<br clear="left">
この行以降は、周り込みが中止されているので、新たな行から始まります。
</p>

iframe 要素は置換インライン要素ですから、 align 属性で浮動化する事が出来ます。「ここは iframe 要素です。読みこんでいるファイルは Tips for HTML DOcuments です。」浮動化した要素の脇に流れ込んだテキストの周り込みを中断したい場合は、 br 要素に clear 属性を与えます。今は、左に浮動化した要素に対する周り込みを中断したいので、 clear="left" になります。
この行以降は、周り込みが中止されているので、新たな行から始まります。

CSS による見栄えの指定の例

src 属性と name 属性以外の属性による指定は、 CSS を利用すればより柔軟に指定できます。

指定内容	HTML の属性	CSS のプロパティ
表示サイズ	width, height	width, height
浮動化	align	float
フレーム周囲の余白	marginwidth, marginheight	margin
フレーム周囲のボーダー	frameborder	border

iframe { width: 50%; height: 200px;
  float: right;
  margin: 10px 20px ;
  border: 10px inset silver }

上の例で指定している値
スタイル宣言	意味
width: 50%; height: 200px	幅 50% 、高さ 200px
float: right	右端に浮動化
margin: 1px 20px	周囲の余白を上下に 10px 、左右に 20px
border: 10px inset silver	ボーダーを 10px 幅、種類を inset 、色を silver

iframe 要素は置換インライン要素です。画像要素と同様に浮動化してみましょう。「ここは iframe 要素です。読みこんでいるファイルは <a href="./index.html">Tips for HTML DOcuments</a> です。」ここでは、 CSS プロパティである 'float' プロパティを指定することで右端に浮動化することにします。

ここでは他に、周囲の余白、ボーダー、表示サイズを CSS プロパティを利用して指定しています。これらは上の表にまとめられているので、目を通しておいてください。

CSS では、浮動化要素に対する後続要素の周り込みを中止したい場合は、中止したい要素に対して、 'clear' プロパティを与えます。

右端に浮動化した要素の左脇への周り込みを禁止したい場合は、

clear: right

となります。詳しくは、「CSS による浮動化」を参照ください。

<<PREV | TOP | NEXT>>

FC2>		モビット