divのスタイルを指定する

サンプルの各divボックスに対してpositionと他のスタイルを指定してみます。

* {
	margin:0;
	padding:0;
	}
img {
	border:0;
	}
#a123 {
	position:relative;
	margin:auto;
	width:600px;
	}
#a2 {
	position:relative;
	margin:10px 0 0 10px;
	}
#a3 {
	margin-top:20px;
	width:420px;
	}

#a123と#a2に指定した、position:relativeは、基点をPC画面の左上からそのブロックの左上に移動させるための記述です。（position:relativeが単体で出てきたら、それは基点を移動させる目的です）

これにより、#a123は#a123が包括するブロックの左上に、#a2は#a2が包括するブロックの左上にそれぞれ基点が移動し、その基点を中心に絶対配置（absolute）することができるようになります。

margin:autoの記述は、その包括ブロックをPC画面の中央に配置させるための記述です（IE以外のブラウザ、IEの場合はbodyにtext-align:centerを記述）。

Lesson7～positionを使ったレイアウト～

コメントor補足情報orご指摘あればをお願いします。

<< 前のページ
次のページ >>