※スタイルシート、スタイル属性の詳しい解説は、「HTMLの解説」にあります。

■ iframe(インラインフレーム、アイフレーム)について

あるページの中に別ページの情報を表示させたい場合には、SSIを使用する方法もありますが、サーバーによってはSSIが使用できない場合があります。

iframeを利用すれば ページの中に窓を作るような雰囲気で別ページを表示することができます。
iframeIE(Internet Explorer)3.0以上にしか対応してなかったので、解説は控えてましたが、NN(Netscape Navigator)6.0以上なら表示可能なので解説することにしました。

ただし、ブラウザIE、NNだけではありませんから、iframeに対応していないブラウザに対する回避策も考えておいたほうがよいでしょう。

◆iframeの記述方法

iframeの簡単な記述方法は次のようなものです。
<iframe src="../intro.html" width="500" height="160" ></iframe>
ページには次のように表示されます。

それでは、iframeタグの細かい属性などを見ていきましょう。

◆iframeの属性

【記述例】 【解  説】
src="intro.html" iframeで表示したいページのソースを記述します。
相対指定絶対指定など間違えないように正しく指定します。
width="400" iframeを表示する幅を指定します。
単位はピクセルです。
height="200" iframeを表示する高さを指定します。
単位はピクセルです。
marginwidth="20" iframe内側の左右の余白幅。
単位はピクセルです。
marginheight="10" iframe内側の上下の余白幅。
単位はピクセルです。
scrolling="yes"
scrolling="no"
スクロールバーを表示する、しないを指定します。
「yes」はスクロールバーを表示します。
「no」はスクロールバーを表示しません。
frameborder="1"
frameborder="0"
フレーム枠を表示する、しないを指定します。
「1」はフレーム枠を表示します。
「0」はフレーム枠を表示しません。
align="top"
align="middle"
align="bottom"
align="left"
align="right"
iframeの表示位置を指定します。
「top」は、上寄せ、「middle」は上下中央揃え、「bottom」は下寄せです。
「left」は、左寄せ、「right」は右寄せです。
この属性を指定しますと、文字が回りこみます。

では、上記の属性をほとんど指定した場合のサンプルを記述してみます。

【記述サンプル】
<iframe src="intro.html" width="500" height="160" marginwidth="20" marginheight="10" scrolling="yes" frameborder="1" align="right">
iframeでの表示ができません。<br>
<a href="intro.html">こちら</a>をご参照ください。
</iframe>





page update:2019/01/09 19:55

Copyright (c) 2000-2009, all Rights Reserved & Produced by atom