中央揃えのデザインに絶対指定でレイヤーを配置する

Dreamweaver

SEO/CSS＋DreamweaverでWEBデザインをする際の便利な技を公開しています。

SEO/CSSの技

オススメサイト

5分で分かるCSS講座: 初心者向けのCSS講座です。基礎知識からすぐに役立つ実践サンプル・テクニックをご紹介します。

ページ更新日：2007/03/08

中央揃えのレイアウトには絶対指定で配置できない!?

とても便利なDreamweaverのレイヤーデザイン。
しかし、中央揃えのレイアウトに絶対指定でレイヤーを配置しようとしても上手くいかない。まずは、以下の画像を参照。

Dreamweaverデフォルトの間違ったコーディング

<html>
<head>
<style type="text/css">
#layer1 {
    background: black;
    position: absolute;
    top:100px;
    left: 500px;
    width:350px;
    height:350px;
    z-index:1;
}
</style>
</head>
<body>
<div id="layer1">&nbsp;</div>             ← 親要素は<BODY>
<div id="frame">
&nbsp;
</div>
</body>
</html>

中央揃えのレイアウトにDreamweaverでレイヤーを描くと…。

ブラウザのサイズによって表示位置がズレる。

これでは意図したものと全く異なるデザインになってしまう。

中央揃えに絶対指定で配置するための正しいコーディング

<html>
<head>
<style type="text/css">
#frame {
    /*
        absoluteの親要素が、relativeの場合のみ
        中央揃えでも絶対指定ができるようになる。
        （省略不可）
    */
    position: relative;
}
#layer1 {
    background: black;
    position: absolute;
    top:50px;                      /* TOPとLEFTの値は適宜変更 */
    left: 50px;
    width:350px;
    height:350px;
    z-index:1;
}
</style>
</head>
<body>
<div id="frame">
<div id="layer1">&nbsp;</div>            ← 親要素は<DIV ID="frame">
</div>
</body>
</html>

親要素とCSSを変更すると…。

ブラウザのサイズに影響することなく意図した通りに表示される。

ブラウザサイズを変更した例。バッチリ配置されている。

まとめ

CSSを用いたレイヤー配置には、絶対指定(absolute)と相対指定(relative)がある。

absolute　親要素から絶対的に配置
relative　通常表示される位置から相対的に配置

中央揃えのデザインに絶対指定でレイヤーを配置する際のポイントは、
親要素をrelative、配置対象をabsoluteにするということ。