divのスタイルを指定する
ドリル式ホームページの作り方TOP >> Lesson7〜positionを使ったレイアウト〜 >> 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を記述）。