レイヤーを使うと、レイアウトの幅が広がります。ネットスケープには独自拡張の<LAYER>タグがありますが、当然、インターネットエクスプローラーには対応していません。しかし、スタイルシートを使えば、レイヤーと同じような機能を持たせることができます。それがposition(ポジション)です。タグは<DIV>か<SPAN>を使います。IE、NNともバージョン4.0以上が対応しています。
以下の記述はページの最後に書いた方が良いでしょう。
<DIV id="Layer1" style="position:absolute; width:193px; height:100px; z-index:1; left: 478px; top: 378px; background-color: #FF6666;"><P>これがレイヤーです。画像や文字を挿入できます。</P> <P>レイヤーの利点はテーブルと異なり、好きな場所に配置できることでしょう。</P></DIV>
idは複数のレイヤーを置く場合の識別のために使います。position:absoluteがポイントでこれはレイヤーの絶対的位置を示します。widthはレイヤーの幅、heightは高さの指定。z-indexは複数のレイヤーを置いた場合の重なりの順番を示します。leftとtopはそれぞれ画面の左と上からの距離を示し、ピクセルで指定します。
上の記述に従ってできたのが右のレイヤーです。
ピクセルで画面上の配置を行うことは慣れない
うちは戸惑いますが、いろいろと試行錯誤するう
ちに感覚がつかめてくると思います。
注意しなければならないことは、画面の大小で
レイヤーの配置が変わる点です。このページは
800×600の画面で調整していますので、これよ
り小さい画面では文字とレイヤーが重なる場合
があります。余裕を持って配置した方が良いでし
ょう。NNとIEでも画面の大きさが違いますから
ご注意。
相対的な位置指定の場合はrelativeを使います。
これはちょっと分かりにくい概念ですが、本来あるべき
位置からいくら離して置くかを指定します。
これは普通の文字列です。ここは左に130ピクセルずらします。
これは普通の文字列です。<SPAN STYLE="position:relative;left:130px; background-color:#00CCFF;">ここは左に130ピクセルずらします。</SPAN>
これは普通の文字列です。ここは下に20ピクセル、左に50ピクセルずらします。
これは普通の文字列です。<SPAN STYLE="position:relative;left:50px; top:20px;background-color:#00CCFF;">ここは下に20ピクセル、左に50ピクセルずらします。</SPAN>
これは普通の文字列です。ここは上に20ピクセル、右に40ピクセルずらします。
これは普通の文字列です。<SPAN STYLE="position:relative;right:40px; bottom:20px;background-color:#33FF99;">ここは上に20ピクセル、右に40ピクセルずらします。</SPAN>
下に配置する時にtop、上の場合はbottomになるのが分かりづらいところですね。上(top)から○○ピクセル、下(bottom)から○○ピクセルと解釈してください。
最後に要素の重なりについて。z-indexを使うと、要素を重ねることができます。
これがレイヤーです。画像や文字を挿入できます。
レイヤーの利点はテーブルと異なり、好きな場所に配置できることでしょう。
z-indexは数が大きいものが上に重なります。重なりが分かりやすいように文字を書いていますが、文字がなくても大丈夫です。
しかし、改めてこのページをネットスケープで見ると、表示が滅茶苦茶ですね。特にabsoluteの表示がダメです。relativeもbottomには対応していないようです。
なお、このページは自分が800×600という狭いディスプレーを使っていた時に書いたものです。今の1280×1024のディスプレーで見ると、IEでも表示がおかしいですね。レイヤーを使う場合はよほど気をつけないと、こういうことになってしまいます。