|
インラインフレーム（iframe
）要素
とは、ウィンドウを分割する通常のフレームではなく、同じページウィンドウ内に
独立したリンクページを、複数の覗き窓のように表示させるフレームページです。
通常のフレームとは異なり、フレーム設定文書を用意しなくてよいので
<body>
</body>
の範囲に自由に記述出来ます。
<iframe>〜</iframe>
の範囲には、インラインフレームに対応していないブラウザに対応した、メッセージやリンク先などを記述します。
インラインフレーム未対応ブラウザでは記述内容が表記されますが、インラインフレーム対応ブラウザでは、
記述内容は無視され表記されず、インラインフレームが適用されます。
|
|
|
|
iframeでは、個々にname="属性を指定しておくと、
複数のインラインフレームを表示出来ます。
|
|
<iframe src="
リンク先URL
name="
フレーム名
" width="" height="">
〜</iframe>
|
|
|
|
上記をタグで具体的に記述すると
|
|
<iframe src="
sample.html"
width="300" height="150" name="sample">
sampleの表示
</iframe>
|
このように、表示させたいsample.html
インラインフレームに表示させるファイルが必要になります。
表示ファイルの記述タグはテーブルで最低限表示範囲の横幅を指定して、高さは表示情報量に合わせ適宜指定します。
|
|
|
|
なお、インラインフレームの表示位置は通常テーブルで指定しますが、
|
|
<iframe src="
sample.html"
width="300" height="150" name="sample" align="center">
|
のように、インラインフレームで表示位置（align="center"）を指定することが出来ます。
|
|
|
|
インラインフレームサンプル表示と、タグを記述 スクロールバーが表示されている
|
|
|
サンプル インラインフレーム指定画像ページタグ
下記タグで、表示させたい画像のファイルを作成する。
（例）photo01.html
|
|
<img src="photo01.jpg" alt="photo01" width="240" height="140">
|
|
|
インラインフレーム表示のサイズ
width="" height=""と
リンク先ファイルのサイズが、同じ表示例。
|
|
<iframe src="photo01.html"
name=
"iframe1"
width="240" height="140">
インラインフレーム表示サンプル
</iframe>
|
|
|
|
|
サンプル表示と、タグを記述 スクロールバーが表示されていない
|
|
|
リンク先ページの表示画像サイズが決まれば、
表示インラインフレームを大きめに指定する。
インラインフレームの。
表示しているタグでサイズを、確認してみて下さい。
インラインフレーム枠が張り付いて表示されている
|
|
インラインフレームのサイズを表示画像サイズより大きくする（適宜）
<iframe src=
"photo01.html"
name=
"iframe2"
width="250" height="150">
インラインフレーム表示サンプル
</iframe>
|
|
|
|
|
サンプル表示と、タグを記述 インラインフレーム枠が消えている
|
|
|
フレーム枠を消した設定 frameBorder="no"
インラインフレームで設定します。
|
|
<iframe src=
"photo01.html"
name="iframe3"
frameBorder="no"
width="300" height="150">
インラインフレーム表示サンプル
</iframe>
|
|