No.05　レイヤーの概念と動作例
 02　ブラウザ共通のレイヤー表記
← ↑ →
　
　レイヤーの表記方法は大きく２つのブラウザ系に分けられますが、 Javascriptを使用しない簡易なものであれば、ＩＥやＮＳといったブラウザに関係なく似たような表示を行うことが可能になります。
　ＮＳ２、ＩＥ３から対応している <Div> 〜 </Div> タグは、段落位置の指定を行う命令は、ページの段落をつけるといった意味合いを持っていますが、それぞれにスタイルシートで指定を行うことによって、レイヤーと似た形で表現をすることが可能になります。

最も簡単なレイヤー表記例 (IE3,4,5,6 NS2,3,4,6 )
<Html><Head></Head>
<Body>

  <span id="MSG" style="position:absolute;display:block;top:0;left:0">
    <Table border=0 width=50 height=50 Bgcolor="#223366">
      <Tr><Td>TEST</Td></Tr>
    </Table>
  </span>

</Body>
</Html>

■動作例


　最も簡単なレイヤー表記の場合、そこにJavascriptは必要ありません。　これは、レイヤーの表記がもともとタグとスタイルシートの組み合わせだけで実現が可能だからに他なりませんが、実際のところ、機種依存性の解消とアクティブ性の付加を考えないのであれば、Javascriptでの記述は必要ありません。

<Style> タグにおけるCSSオプション指定
positionabsolute : 絶対位置
relative : 相対位置
displayblock : 表示
none : 非表示
top上からの位置
left左側からの位置

　最低限、レイヤーを稼動させる上で必要となるCSS要素は以上です。
　position は、親要素からの位置関係を絶対位置か相対位置かで設定するわけですが、基本的には絶対位置での記述を行うのが無難でしょう。　絶対位置の場合、配置は画面左上を「０」とした値なので計算もしやすいですが、相対設定だと、その上のレイヤーからの位置になるので、計算がややこしくなります。
　display は、そのレイヤーを表示するか否かを指定します。　javascript との連携で、後から非表示と表示を切り替えることは可能です（<Div>タグでは　IE5、NS6以降）が、ＨＴＭＬだけでは切り替えは出来ません。

重ね合わせのレイヤー表記例 (IE3,4,5,6 NS2,3,4,6 )
<Html><Head></Head>
<Body>

  <span id="MSG1" style="position:absolute;display:block;top:10;left:10">
    <Table border=0 width=100 height=100 Bgcolor="#8899bb">
      <Tr><Td>TEST</Td></Tr>
    </Table>
  </span>

  <span id="MSG2" style="position:absolute;display:block;top:80;left:80">
    <Table border=0 width=100 height=100 Bgcolor="#88bbbb">
      <Tr><Td>TEST2</Td></Tr>
    </Table>
  </span>

</Body>
</Html>

■動作例


　レイヤーの重ね合わせは、基本的に描画順になります。　従って、最初に描いた「ＴＥＳＴ１」レイヤーよりも、「ＴＥＳＴ２」レイヤーのほうが上段に配置されることになります。

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