lHTML フレーム レイヤ(詳細) '98. 3. 5
l.お知らせ 内容 LINK FILE   HTML Win PC Unix MS-DOS C C++ Mfc Java 
.全般_ .文字 _配置   _リンク .フレ-ム  CGI .タグ一覧.
登録_ .音・画. .スタイル .--. .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=親と同じ
他のレイヤと重ねる場合に、順番を指定するためのID記号。
 〃  順番を表わす番号。3, 5, 7 など。 ( 0 が一番下。)
 〃  L2 が上になるように表示します。( L2 の下に表示。)
 〃  L3 が下になるように表示します。( L3 の上に表示。)
ページの上端から 200 の位置に表示します。 
 〃 ( 親のレイヤがある場合は、親の上端から 200 の位置 )
ページの左端から 100 の位置に表示します。
 〃 ( 親のレイヤがある場合は、親の左端から 100 の位置 )
横幅を 300 にします。 
縦幅を 100 にします。
背景色を黄色にします。 
背景を abc.gif で描きます。
レイヤの中に、aaa.htm を表示します。
 
 
レイヤの中に表示する、文字や絵など。
 

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


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


T 位置の指定 (1) . . . そのページを基準に指定する
位置の指定は、ページ左上が原点です。
<LAYER WIDTH="300" HEIGHT="50" BGCOLOR="Bisque"
TOP="920" LEFT="80"> 位置 </LAYER>

920      このページ

← 80 →
位置
( これは 表による擬似表現です。)
 
レイヤが二重になっている場合は、外側レイヤの左上が原点になります。
二重になっていても、
PAGEY=920 PAGEX=80
のように指定すると、ページの左上が原点になります。


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

← 80 → 10     →220
     ┌─────┐ ┌─────┐
     │レイヤ1 │ │レイヤ2 │
     │     │ │     │
     │     │ │     │
     └─────┘ └─────┘
      ( 110×70 )   ( 110×70 )


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



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



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



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

<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