lHTML フレーム フローティングフレーム '96.12.12
l.お知らせ 内容 LINK FILE   HTML Win PC Unix MS-DOS C C++ Mfc Java 
.全般_ .文字 _配置   _リンク .フレ-ム  CGI .タグ一覧.
登録_ .音・画. .スタイル .--. .ActiveX.  ---  .名前. _一覧
 フレ-ム   簡単な例   詳細   フロ-ティング   レイヤ ( 詳細 ) 
フロ-ティング フレ-ム   例 ( 基本的な例   表示フレームを指定   フレーム内でリンクを記述 )
ページ内  ( bih-h_g0.htm )  ( bih-h_g1.htm ) → bih-h_g2.htm  ( bih-h_g5.htm ) → bih-h_g6.htm

T フローティングフレーム ( IExplore専用 ? )
ウィンドウの一部分だけを使って、別なページを表示します。

フローイィング
 フレーム

<IFRAME
NAME="FL1"
SRC="abc.htm"
WIDTH="200"
HEIGHT="80"
FRAMEBORDER="0"
>
フローティングフレームに
未対応です。

</IFRAME>
 
フローティングフレームの名前。
表示するソースファイル名。
フローティングフレームの幅。%でも可。
フローティングフレームの高さ。
フローティングフレームの 縁取りを表示しません。
 
必要に応じて、未対応ブラウザ
に表示する内容を書きます。
 
NAME : 表示場所を指定するための、フローティングフレームの名前です。
  フローティングフレームへのリンクを書かない場合は、使う必要はありません。
SRC 
: 最初から表示するファイルを指定します。
  これを書かないと、最初は何も表示されません。
  SRC="" のように書くと、最初は枠だけが表示されます。
WIDTH, HEIGHT 
: フローティングフレームの幅と縦幅を指定します。
  これを書かないと、300×150 になるようです。


T 具体例

まず、フローティングフレームの中に表示するページを用意します。
 aaa.htm 
<HTML><HEAD><TITLE></TITLE><HEAD>
<BODY BGCOLOR="#80FFC0">

<NOBR>
ページA aaaaaaaaaaaaaaa<WBR><BR>
</NOBR>

</BODY></HTML>
<NOBR>は、スクロールバーを表示して、フローティングフレームをはっきりさせるためです。

新しいファイルを作らないで、作成済みのファイルを使用することもできます。
その場合は 下記のフローティングテーブルのページに、
aaa.htm ではなく、作成済みのファイルを指定します。


次に、上記のページを表示するための、フローティングフレームのページを作ります。
 fl.htm 
<HTML><HEAD><TITLE></TITLE><HEAD><BODY>
フローティングフレーム<BR>
の表示例です。<BR>
<IFRAME
SRC="aaa.htm"
WIDTH="150"
HEIGHT="80"
>
<BR>フローティングフレームに<BR>
未対応です。<BR>
</IFRAME><BR>
</BODY></HTML>

次のように表示されます。
フローティングフレーム対応ブラウザ 
フローティングフレーム
の表示例です。
フローティングフレーム未対応ブラウザ 
フローティングフレーム
の表示例です。

フローティングフレームに
未対応です。



T リンクの例 ( ページ内のフレームを指定する。)

フローティングフレーム名を指定して リンクを書く例です。

まず、フローティングフレームの中に表示するページを用意します。
 aaa.htm 
<HTML><HEAD><TITLE></TITLE><HEAD>
<BODY BGCOLOR="#80FFC0">

ページA<BR>
</BODY></HTML>
 bbb.htm 
<HTML><HEAD><TITLE></TITLE><HEAD>
<BODY BGCOLOR="#80FFFF">

ページB<BR>
</BODY></HTML>

次に、上記のページを表示するための、フローティングフレームのページを作ります。
 fl.htm 
<HTML><HEAD><TITLE></TITLE><HEAD><BODY>
クリックして下さい。<BR>
<A HREF="aaa.htm">ページ A</A><BR>
<A HREF="bbb.htm">ページ B</A><BR>
<IFRAME
SRC="aaa.htm"
WIDTH="200"
HEIGHT="80"
NAME="FL1"
>
<TABLE WIDTH="150" HEIGHT="80"><TR><TD BGCOLOR=WHITE>
この文章が表示されているときは
クリックしないで下さい。
<BR>
</TD></TR></TABLE>
</IFRAME><BR>
</BODY></HTML>

次のように表示されます。
フローティングフレーム対応ブラウザ 
クリックして下さい。
ページ A
ページ B

 
フローティングフレーム未対応ブラウザ 
クリックして下さい。
ページ A
ページ B
この文章が表示されているときは、クリックしないで下さい。

もし、未対応ブラウザで上記のリンクをクリックすると、
表示する場所 FL1 がないので、新しいウィンドウに表示されます。

フローティングフレームの中に表示できるページに制限はありません。
フレームのページなども表示できます。


T リンクの例 ( フレーム内にリンクを書く。)

フローティングフレームの中のページに、リンクを書く例です。
まず、中に表示するページのソースファイルを二つ作成します
 aaa.htm 
<HTML><HEAD><TITEL>フレーム</TITEL></HEAD>
<BODY BGCOLOR="#80FFC0">
ページ A<BR>
<A HREF="aaa.htm" TARGET="F2">AAA</A><BR>
<A HREF="bbb.htm" TARGET="F2>BBB</A><BR>
</BODY></HTML>
 bbb.htm 
<HTML><HEAD><TITEL>フレーム</TITEL></HEAD>
<BODY BGCOLOR="#80FFFF">
ページ B<BR>
<A HREF="aaa.htm" TARGET="F1>AAA</A><BR>
<A HREF="bbb.htm" TARGET="F1>BBB</A><BR>
</BODY></HTML>
TARGET で、表示するフレームを指定します。
( フレームの名前は、下記の フレームページで設定します。)

次に、フレームページの ソースファイルを作成します
フローティングフレームは、横に並べるために 表の中に配置します。
 fl.htm 
<HTML><HEAD>
<TITEL>フローティングフレーム</TITEL>
</HEAD><BODY>
フローティングフレームの例です。<BR>
<TABLE><TR><TD>
<IFRAME
NAME="FL1"
SRC="aaa.htm"
WIDTH="200" HEIGHT="80"
>
</IFRAME><BR>
</TD><TD>
<IFRAME
NAME="FL2"
SRC=""
WIDTH="200" HEIGHT="80"
>
</IFRAME><BR>
</TD></TR></TABLE>
</BODY></HTML>
 
 
 
 
配置のための表
左側フローティングフレーム
フレーム名=FL1
最初に aaa.htm を表示します
幅=200 高さ=80
 
 
 
右側フローティングフレーム
フレーム名=FL2
最初は枠だけ表示します。
 
 
 
 
 

次のように表示されます。
フローティングフレーム対応のブラウザでは、実際にクリックできます。
未対応のブラウザでは、代りに 表を表示しているので、クリックできません。
( 上記のソースコードには、未対応ブラウザ用の部分は 省略されています。)

フローティングフレームの例です。
 

未対応ブラウザには次のように表示されます。
フローティングフレームの例です。     

 
 
フローティングフレーム以外の部分だけが表示されます。
( 未対応専用の記述があれば、それも表示されます。)


T
  mtoga@sannet.ne.jp   登録日 '96. 6.15
URL : http://www.page.sannet.ne.jp/mtoga/index.html