DHTML -2-

　前ページで説明した<Div> ～ </Div> タグは、それ単体ではＩＥでもＮＳでもかなり古いバージョンからサポートされていますが、あくまでそれは静的な場合に過ぎません。　ページデザイン上にアクセントを加えることは出来ますが、ここにJavascriptを追加して動的な動きを指せようと思うと、途端にブラウザによる制約を受けることになります。
　前記した<Div> ～ </Div> タグはを用いて動的な動きを実現することの出来るブラウザは、ＩＥ５以降とＮＳ６に限られ、ＮＮ４では動作させることが難しくなります。（　実は技術的には不可能では無いのですが、複数のレイヤーを動的に配置した際に、この手法だとＮＳ４の動作が不安定になることもありますので、ここでは使えないとします　）

　このため、ＮＳ４でレイヤー動作を行うためには、<Div> ～ </Div> タグではなく、<Layer> ～ </Layer> タグを用いることになります。
　このタグはＮＳ４での拡張タグにあたりますので、ＩＥ５では無論のこと、ＮＳ６でも正常に表示されません。　これは、旧ＮＳの拡張タグをＮＳ６では搭載しなかったためですが、このために、同じＮＳでもバージョンによって表記がまったく異なるといった現象が発生することになってしまったわけです。

ＮＳ４におけるレイヤー表記例 (Javascript対応)

<Html><Head></Head>
<Body>

  <Layer name="MSG" visibility="show" top="200" left="200" >
    <Table border=0 width=50 height=50 Bgcolor="#223366">
      <Tr><Td>TEST</Td></Tr>
    </Table>
  </Layer>

</Body>
</Html>

■動作例

　Javascript表記ではないので、ＩＥ５やＮＳ６で閲覧してもエラーにはなりませんが、タグのオプション命令である [ top ] や [ left ] の命令を認識出来ずに無視された状態になります。　従って、このタグをJavascriptで制御できるのは、ＮＳ４オンリーということになります。

<Layer> タグにおける代表的なオプション指定
visibikity	show : 表示 hide : 非表示
top	上からの位置
left	左側からの位置

　レイヤーは縦と横のほか、幅や高さを指定することも出来ますが、中に組み込むＨＴＭＬ如何によって増減することになりますので、現実的にはあまり指定する必要性は無いでしょう。
　このタグも <Div> ～ </Div> 同様、重ね合わせによる表現を行うことも可能になります。

重ね合わせのレイヤー表記例 ( NS4 )

<Html><Head></Head>
<Body>

  <Layer name="MSG1" visibility="show" top="10" left="10" >
    <Table border=0 width=100 height=100 Bgcolor="#8899bb">
      <Tr><Td>TEST</Td></Tr>
    </Table>
  </Layer>

  <Layer name="MSG2" visibility="show" top="80" left="80" >
    <Table border=0 width=100 height=100 Bgcolor="#88bbbb">
      <Tr><Td>TEST2</Td></Tr>
    </Table>
  </Layer>

</Body>
</Html>

■動作例

　ＮＳ４とＩＥ５で表示させると分かりますが、ＮＳ４では正常な重ねあわせが出来ているのに対して、ＩＥ５では <Table> タグで表記したように、平面状へ配置されています。また、ＩＥ５では座標情報が反映されないので、位置が左上に寄った形になっています。

ページの最上段へ移動します