ボックスをレイアウトする
ただボックスを作っただけでは縦にずらっと並ぶだけでレイアウト出来ません。 そこでボックス横に並べたり、表示させたい位置に表示するためのスタイルシートがあります。
ボックスを横に並べる
まずはボックスを2個作ってみましょう。
<head>
<style type="text/css">
<!--
.box{
height:100px;
width:100px;
border:1px solid black;
}
-->
</style>
<head>
<body>
<div class="box">ボックス1</div>
<div class="box">ボックス2</div>
</body>
</html>
2つのボックスは通常縦に並びます、ボックス2をボックス1の隣に表示させるにはfloat（フロート） を使います。
<head>
<style type="text/css">
<!--
.box{
height:100px;
width:100px;
border:1px solid black;
float:left;
position:relative;//←IE6に対応させるために記入!!
}
-->
</style>
<head>
<body>
<div class="box">ボックス1</div>
<div class="box">ボックス2</div>
</body>
</html>
※通常floatのみで効果が得られますがIE6（インターネットエクスプローラ6）では positionをいっしょに書かないと効果が得られません。
ボックス1の右側にボックス2が回り込みました。
ボックス2を右に並ばしたいのに『float:left;』なぜleft（左）？
と思った方もいると思います。左側から整列すると言う意味のleftです。
それでは問題でfloat:right;はどうなるか見てみましょう。
<div>を使って高さ200ピクセル、横幅200ピクセル、枠線が黒色のボックスを2個作りボックスの中に 『ボックス1』『ボックス2』と書き込み、float:right;を指定してみましょう。
CSS
.box{height:200px;
width:300px;
border:black 1px solid;
float:right;
position:relative;
}
HTML
<div class="box">ボックス1</div><div class="box">ボックス2</div>
右側から『ボックス1』『ボックス2』と並んだと思います。
floatはレイアウトをする上で大変重要なCSSです。思いどうりのレイアウトをするためにも しっかり覚えておきましょう。
position:〜;について
positionに付いて全く触れていないのでここで説明しておきます。 まずpositionには4つのプロパティがあります。
- position:static;
- 特に配置方法を指定しません。
- position:absolute;
- 絶対位置への配置となります。親ボックスのposition（static以外）が指定されていれば、親ボックスの左上を基準に、 親ボックスが無ければウインドウの左上を基準に配置されます。top,bottom,left,rightで位置を指定出来ます。
- position:relative;
- 相対位置への配置。通常配置される位置を基準に配置されtop,bottom,left,rightで位置を指定出来ます。
- position:fixed;
- 絶対値への配置。absoluteとほぼ同じですが、スクロールしても位置は固定されたままとなります。
※IE6（インターネットエクスプローラ6）は非対応
説明だけでは分かりにくいので詳しく見ていきましょう。
absolutの場合
ではabsoluteの場合を見ていきましょう。
absoluteは絶対位置への配置でtop,
bottom,left,
rightで位置を指定出来ます。
<head>
<style type="text/css">
<!--
.box{
height:100px;
width:100px;
background-color:white;
border:1px solid black;
position:absolute;
top:50px;
left:50px;
}
.oya-box{
height:600px;
width:200px;
border:1px solid black;
position:relative;
background-color:gray;
}
-->
</style>
<head>
<body>
<div class="oya-box">親ボックス
<div class="box">ボックス1</div>
</div>
</body>
</html>
static以外（今回はrelative）が指定された親ボックス内に
absoluteを指定したボックス1を配置し、top 50px、left 50pxを指定しました。
親ボックスに何も指定しないとウィンドウの上辺から50px、左辺から50pxの所に配置されます。
<div>を使って高さ200ピクセル、横幅200ピクセル、枠線が黒色のボックスを作りウインドウの右から100px、下から50px の所に絶対位置で配置してみましょう。
CSS
.box{height:200px;
width:200px;
border:black 1px solid;
position:absolute;
right:100px;
bottom:50px;
}
HTML
<div class="box"></div>right、bottomで位置を指定した場合ウインドウの拡大縮小に 伴って配置したボックスもいっしょに移動します。
relativeの場合
relativeの場合を見ていきましょう。
relativeは相対位置への配置でtop,
bottom,left,
rightで位置を指定出来ます。
<head>
<style type="text/css">
<!--
.box{
height:100px;
width:100px;
background-color:white;
border:1px solid black;
position:relative;
top:50px;
left:50px;
}
.oya-box{
height:600px;
width:200px;
border:1px solid black;
position:relative;
background-color:gray;
}
-->
</style>
<head>
<body>
<div class="oya-box">親ボックス
<div class="box">ボックス1</div>
</div>
</body>
</html>
relativeは通常配置される位置からの距離で自分を配置するので、top:50px;は
テキスト（親ボックス）の下辺からの距離で配置されます。
テキスト（ココはウインドウの端です）を入力し <div>を使って高さ200ピクセル、横幅200ピクセル、枠線が黒色のボックスを作りウインドウの右から100px、上から5px の所に相対位置で配置してみましょう。
CSS
.box{height:200px;
width:200px;
border:black 1px solid;
position:relative;
right:100px;
top:5px;
}
HTML
ココはウインドウの端です。<div class="box"></div>
relativeは通常配置される所からなのでright:100px;
で指定した場合は親の左辺から左へ100px移動しウインドウから一部はみ出ることになります。
fixedの場合
fixedは絶対値への配置でabsolute
とほぼ同じですが、ウインドウをスクロールしても位置は固定されたままとなります。ただし
IE6（インターネットエクスプローラ6）は非対応で効果が得られません。
fixedを使ったサンプルページをご覧下さい。
