lHTML　フレーム レイヤ(詳細) '98. 3. 5
l.お知らせ　内容　LINK　FILE 　 HTML　Win　PC　Unix　MS-DOS　C　C++　Mfc　Java　
.全般_ .文字 _配置 　表 _リンク .フレ-ム 　ＣＧＩ .タグ一覧.
登録_ .音・画. .スタイル .マ-キ-. .ActiveX. 　---　 .色の名前. _色一覧
　フレ-ム 　 簡単な例 　 詳細 　　フロ-ティング 　 レイヤ ( 詳細 )　
LAYER 　 大きさ 　 位置 ( ページを基準 　親を基準 ) 　 重ね表示 ( 　番号で順番を指定 　他のレイヤを基準 ) 　 重なり具合 　 レイヤの後に表示する 　 クリップ領域 　
ページ内 　bih-hfr2.htm, r3, r4, r5, r6, 　bih-h_30.htm 　
T⇔ 絶対位置指定表示 LAYER ( Netscape4.0 のみ )
まとまった内容の 表示位置を 指定できます。

<LAYER
VISIBILITY="SHOW"
ID="L1"
Z-INDEX="0"
ABOVE="L3"
BELOW="L2"
PAGEY="200"　
TOP="200"
PAGEX="100"
LEFT="100"
WIDTH="300"　
HEIGHT="100"
BGCOLOR="YELLOW"　
BACKGROUND="abc.gif"
SRC="aaa.htm"　
>
表示する内容
</LAYER>
<NOLAYER>
未対応ブラウザ用の内容　
</NOLAYER>
　
表示します。( デフォルト )　HIDE=非表示　INHERIT=親と同じ
他のレイヤと重ねる場合に、順番を指定するためのＩＤ記号。
　〃　　順番を表わす番号。3, 5, 7 など。 ( 0 が一番下。)
　〃　　L2 が上になるように表示します。( L2 の下に表示。)
　〃　　L3 が下になるように表示します。( L3 の上に表示。)
ページの上端から 200 の位置に表示します。　
　〃　( 親のレイヤがある場合は、親の上端から 200 の位置 )
ページの左端から 100 の位置に表示します。
　〃　( 親のレイヤがある場合は、親の左端から 100 の位置 )
横幅を 300 にします。　
縦幅を 100 にします。
背景色を黄色にします。　
背景を abc.gif で描きます。
レイヤの中に、aaa.htm を表示します。　
　
レイヤの中に表示する、文字や絵など。
　

レイヤの中の 文字や絵なども、そのまま表示されます。
( レイヤの背景や、指定した別ページは表示されません。)


T⇔ 大きさの指定 (１)
位置を指定しない場合は、コードを書いた位置に表示されます。
例です <LAYER WIDTH="300" HEIGHT="50" BGCOLOR="BurlyWood" >大きさ</LAYER>
例です 大きさ　( 300×50 )
( これは 表による擬似表現です。)　
表示内容が レイヤに納まらないときは、レイヤが広げられます。


T⇔ 位置の指定 (１)　. . . そのページを基準に指定する
位置の指定は、ページ左上が原点です。
<LAYER WIDTH="300" HEIGHT="50" BGCOLOR="Bisque"
TOP="920" LEFT="80"> 位置 </LAYER>
↑
920　　　　　　このページ
↓
← 80 →
位置
( これは 表による擬似表現です。)
　
レイヤが二重になっている場合は、外側レイヤの左上が原点になります。
二重になっていても、
PAGEY=920 PAGEX=80
のように指定すると、ページの左上が原点になります。


T⇔ 位置の指定 (２)　. . . 親のレイアを基準にする
ページの途中にレイヤを配置する場合は、
その位置を原点にするためだけのレイヤを設けると、位置が決めやすくなります。
レイヤよりも前に表示する内容 <BR>
<LAYER>
<LAYER WIDTH="110" HEIGHT="70" TOP="10" LEFT="80"> レイヤ１ </LAYER>
<LAYER WIDTH="110" HEIGHT="70" TOP="10" LEFT="220"> レイヤ2 </LAYER>
</LAYER>
レイヤよりも前に表示する内容
←ここが原点　　　レイヤ０

← 80 →　⇔10　　　　　→220
　　　　　┌─────┐　┌─────┐
　　　　　│レイヤ１　│　│レイヤ２　│
　　　　　│　　　　　│　│　　　　　│
　　　　　│　　　　　│　│　　　　　│
　　　　　└─────┘　└─────┘
　　　　　 ( 110×70 )　　 ( 110×70 )


T⇔ 重ね表示 ( １ )
レイヤを重ねる場合は、後に書いたものほど上に表示されます。
<LAYER>
<LAYER WIDTH="200" HEIGHT="70" TOP="0" LEFT="20" BGCOLOR="WHITE"> レイヤ１ </LAYER>
<LAYER WIDTH="200" HEIGHT="70" TOP="10" LEFT="120" BGCOLOR="AQUA"> レイヤ２ </LAYER>
<LAYER WIDTH="200" HEIGHT="70" TOP="20" LEFT="220" BGCOLOR="YELLOW"> レイヤ３ </LAYER>
</LAYER>



T⇔ 重ね表示 ( ２ )　. . . 番号を付けて、重なる順番を指定する
<LAYER Z-INDEX="10" BGCOLOR="#F0FFFF">
レイヤ０
<LAYER Z-INDEX="11" WIDTH="110" HEIGHT="70" TOP="30" LEFT="30"
BGCOLOR="WHITE"> レイヤ１ </LAYER>
<LAYER Z-INDEX="13" WIDTH="110" HEIGHT="70" TOP="60" LEFT="60"
BGCOLOR="AQUA"> レイヤ２ </LAYER>
<LAYER Z-INDEX="12" WIDTH="110" HEIGHT="70" TOP="90" LEFT="90"
BGCOLOR="YELLOW"> <BR><BR>　レイヤ３ </LAYER>
</LAYER>
番号が大きいほど、上に表示されます。



T⇔ 重ね表示 (３)　. . . 他のレイヤの上または下にする
基準に使うレイヤには、あらかじめＩＤ記号を付けておきます。
<LAYER BGCOLOR="#F0F0D0">
<LAYER ID="白" WIDTH="110" HEIGHT="70" TOP="30" LEFT="30"
BGCOLOR="WHITE"> レイヤ１ </LAYER>
<LAYER ABOVE="白" WIDTH="110" HEIGHT="70" TOP="60" LEFT="60"
BGCOLOR="AQUA"> レイヤ２ </LAYER>
<LAYER BELOW="白" WIDTH="110" HEIGHT="70" TOP="90" LEFT="90"
BGCOLOR="YELLOW"> <BR><BR>　レイヤ３ </LAYER>
</LAYER>



T⇔ 重ね表示 (４)　. . . 重なり具合
上記の例では 背景を使用したので、下の内容が見えません。
背景を使用しなければ、重なったまま表示されます。

<FONT COLOR="SILVER" SIZE="6">
◇ <LAYER> <FONT COLOR="YELLOW"> AAA </LAYER>
◇ <LAYER> <FONT COLOR="ORANGE"> BBB </LAYER>
◇
</FONT>
◇　　　が表示されます。 AAA は後で表示されます。
◇◇　　が表示されます。 BBB は後で表示されます。
◇◇◇　が表示されます。( レイヤの部分は、一番最後に表示されます。)
◇↑これと同じ位置に、
◇AAA　が表示されます。
◇◇◇
◇◇↑これと同じ位置に、
◇◇BBB　が表示されます。

レイヤの後に書いた内容は、レイヤと同じ位置に表示されます。

T⇔ レイヤの後に表示するには
例えば、レイヤの縦幅と同じだけ<BR>を書いておきます。
次の例は、<BR>だけではわかりにくいので、_2<BR>と書いています。
<LAYER> A<BR> B<BR> C<BR> </LAYER>
_2<BR> _2<BR> _2<BR> _2<BR>
次の表示内容<BR>
A2
B2　　( 擬似表現です。)
C2
 2
 次の表示内容

レイヤと同じ大きさの 空の表を配置しても、レイヤの下端位置を特定できます。


T⇔ クリップ領域
レイアの一部分だけを表示します。
クリップされない部分は透明になります。
<LAYER CLIP="20,20,140,80">
あめつちのうた　<BR>
雨土星空山川峰谷<BR>
雲霧室苔人犬上末<BR>
硫黄猿生ふせよ　<BR>
榎の柄を馴れ居て<BR>
</LAYER>
 左上座標( 20,20 )は省略できます。
省略すると、0,0 になります。
( 140,80 ) → ( 0,0, 140,80 )

T⇔ クリッピングが必要な場合
大きさを指定しても、内容の方が大きければ 縦幅の指定は無視されます。
例えば別なページを表示すると、そのページが全部表示されてしまいます。
CLIP で切り取り表示すれば、表示する大きさを固定できます。
<LAYER CLIP="600,200" SRC="../bih-h_30.htm"> </LAYER>

IExplore では、フローティングフレームで擬似的に表示されています。
IExplore　:　中のリンクをクリックすると、中に表示されます。
Netscape　:　中のリンクをクリックすると、ページ全体に表示されます。

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