「ディスパッチベース」のロゴ画像

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

中央揃えのレイヤーには絶対位置で配置することができない!?

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

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

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

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

-

Dreamweaver MX 2004 デフォルトのコーディング

<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>

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

<html>
<head>
<style type="text/css">
#frame {
	/*
		absoluteの親要素が、relativeの場合のみ
		中央揃えでも絶対指定ができるようになる。
	*/
	position: relative;
}
#layer1 {
	background: black;
	position: absolute;
	top:50px;   /* TOPとLEFTの値は親要素のX,Y=0,0座標からの位置を指定する */
	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>

操作画面の画像
前述のように、親要素に position:relative を追加してCSSを微調整すると…。

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

操作画面の画像
ブラウザサイズを変更しても、レイヤーの位置がズレない。

-

まとめ

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

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

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

▲ページ先頭に戻る

Dreamweaver

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

-
記事公開日:
記事更新日:2020年05月29日