<layer> - レイヤ
トップ > HTMLリファレンス > <layer>レイヤ機能は、Netscape Communicator 4.0 のダイナミックHTML技術の中核としてサポートされました。レイヤは、テキスト、画像、他の HTML 文書などを乗せたシートのようなものです。JavaScript を用いることで、レイヤの位置を変更したり、非表示にしたりなど、ダイナミックな効果を持つページを作成することができます。
JavaScript からは、document.layers["id1"] の形式でアクセスできます。id1 は、<layer> や <ilayer> の name または id 属性で指定した名前です。例えば、id1 という名前のレイヤの位置を動かすには、次のようにします。
document.layers["id1"].top = 300;
<ilayer> と <layer> の違いは、<ilayer> がインラインで表示されるのに対し、<layer> はその存在が無視された状態で、次のテキストが表示される点が異なります。
Internet Explorer ではレイヤはサポートされていませんが、その代わり、ほとんどすべてのタグがレイヤのように、動かしたり非表示にすることができます。Netscape 6.0 では、レイヤ機能は廃止されました。
属性 | 意味 |
---|---|
background=url | N4。背景画像を指定します。 |
bgcolor=color | N4。背景色を指定します。 |
clip=n,n,n,n | N4。このレイヤの可視部の矩形を左、上、右、下の順に "20,20,50,100" のように指定します。"50,100" と省略した場合は "0,0,50,100" と同じ意味になります。 |
height=n | N4。このレイヤの高さをピクセルまたはパーセンテージで指定します。 |
src=url | N4。このレイヤの中に表示する文書のURLを指定します。この属性を省略すると、<layer>〜</layer>で囲まれた文書が表示されます。 |
visibility=bisibility | N4。このレイヤの表示状態を指定します。 show:表示する(規定値) hidden:表示しない inherit:親のレイヤに従う |
width=n | N4。このレイヤの横幅をピクセルまたはパーセンテージで指定します。 |
【表示位置属性】
属性 | 意味 |
---|---|
left=n | N4。このレイヤを表示する横方向の位置をページの左上隅からの絶対値(ピクセル)で指定します。 |
pagex=n | N4。このレイヤを表示する横方向の位置を親のドキュメント(レイヤ)からの沿う対置(ピクセル)で指定します。 |
pagey=n | N4。このレイヤを表示する縦方向の位置を親のドキュメント(レイヤ)からの沿う対置(ピクセル)で指定します。 |
top=n | N4。このレイヤを表示する縦方向の位置をページの左上隅からの絶対値(ピクセル)で指定します。 |
【重なり具合指定属性】
属性 | 意味 |
---|---|
above=name | N4。複数のレイヤがある場合の重なる順番を指定します。name には他のレイヤの name や id 属性の名前を指定します。above=xxx とすると、xxx レイヤがすぐ上のレイヤになります。 |
below=name | N4。複数のレイヤがある場合の重なる順番を指定します。name には他のレイヤの name や id 属性の名前を指定します。below=xxx とすると、xxx レイヤがすぐ下のレイヤになります。 |
z-index=n | N4。複数のレイヤがある場合の重なる順番を指定します。この値が大きなレイヤほど上に表示されます。 |
【一般属性】
属性 | 意味 |
---|---|
class=class | N4。クラスを指定します。 |
id=id | N4。ID を指定します。 |
name=name | N4。名前を指定します。 |
style=style | N4。スタイルシートを指定します。 |
HTMLソース |
---|
<layer bgcolor="#99FFFF" top=0 left=0 WIDTH=100 height=100>AAA</layer> <layer bgcolor="#FF99FF" top=30 left=30 WIDTH=100 height=100>BBB</layer> <layer bgcolor="#FFFF99" top=60 left=60 WIDTH=100 height=100>CCC</layer> |
ブラウザ表示例(※) | |||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
※ Netscape Communicator以外のブラウザのために、テーブルを用いて表現しています。