<<PREV | TOP | NEXT>>

Inline FRAME Element

last modified 8th/Oct. 2000

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

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

iframe 要素は行内に別ページを挿入する事が出来ます。例えば、 という事になります。

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

上の表示例のソース;

<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]
name = cdata [CI]
width = length [CN]
Inline フレームの幅。
height = length [CN]
Inline フレームの高さ。
align = %Ialign; [CI]
scrolling = auto|yes|no [CI]
フレームウィンドウに関するスクロールの有無を指定します。
frameborder = 1|0 [CN]
フレームのボーダーの有無を指定します。
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 属性で浮動化する事が出来ます。 浮動化した要素の脇に流れ込んだテキストの周り込みを中断したい場合は、 br 要素に clear 属性を与えます。 今は、左に浮動化した要素に対する周り込みを中断したいので、 clear="left" になります。
この行以降は、周り込みが中止されているので、新たな行から始まります。

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

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

指定内容HTML の属性CSS のプロパティ
表示サイズwidth, heightwidth, height
浮動化alignfloat
フレーム周囲の余白marginwidth, marginheightmargin
フレーム周囲のボーダーframeborderborder
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 要素は置換インライン要素です。画像要素と同様に浮動化してみましょう。 ここでは、 CSS プロパティである 'float' プロパティを指定することで右端に浮動化することにします。

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

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

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

clear: right

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

<<PREV | TOP | NEXT>>

SEO [PR] [ Windows7 f ^T[o[ Cu`bg SEO