トップページ>ホームページ実用小技集>スタイルシート基礎講座

10.要素の配置(レイヤー)

レイヤーを使うと、レイアウトの幅が広がります。ネットスケープには独自拡張の<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を使うと、要素を重ねることができます。

  ここは赤
ここはライトブルーです。赤の下にあるので一部文字が見えません。
左の例は以下のように記述しています。
<DIV id="Layer2" style="position:absolute; width:100px; height:100px; z-index:1; background-color:red; left:30px; top:1180px;">  ここは赤</DIV>
<DIV id="Layer3" style="position:absolute; width:300px; height:50px; z-index:0; background-color:#66CCFF; left:0px; top:1200px;">ここはライトブルーです。赤の下にあるので一部文字が見えません。</DIV>

これがレイヤーです。画像や文字を挿入できます。

レイヤーの利点はテーブルと異なり、好きな場所に配置できることでしょう。

z-indexは数が大きいものが上に重なります。重なりが分かりやすいように文字を書いていますが、文字がなくても大丈夫です。
 しかし、改めてこのページをネットスケープで見ると、表示が滅茶苦茶ですね。特にabsoluteの表示がダメです。relativeもbottomには対応していないようです。
  なお、このページは自分が800×600という狭いディスプレーを使っていた時に書いたものです。今の1280×1024のディスプレーで見ると、IEでも表示がおかしいですね。レイヤーを使う場合はよほど気をつけないと、こういうことになってしまいます。


[BACK]
…to be continued