CSS スタイルシート雑技 No. 1
CSS で段組みレイアウトを作る
テキストを画像に回り込ませる場合、<img src="url" align="left"> といったように、 align を使った経験はないでしょうか。このイメージをスタイルシートで発展させると、CSS で段組みレイアウトが可能になります。
解説
<table>を使用したレイアウトでは、連続したセル(例: <tr><td>左カラム</td><td>右カラム</td></tr>など)を使う事で簡単に実現できた、左右の2段組レイアウトですが、CSS でどのように表現するかで悩む方も多いかと思いますが、これは float と width を使用する事によって、簡単に実現する事が出来ます。
まず、<div> で、2つのカラム(AのカラムとBのカラム)を用意します。
Aのカラムが左側に、Bのカラムが右側に配置される例を考えましょう。その際、テキストを画像に回り込ませる、<img src="url" align="left"> のalign のように、BのカラムがAのカラムに対して「回り込んでいれば良い」と考えます。
<div>で囲まれたものは、テキストのように回り込まず、左右に配置されるのがミソです。この性質を活かすと、下記のようになります。
<style type="text/css">
div.LeftColumn{
width: 49%;
float: left;
}
div.RightColumn{
float: left;
width: 49%;
}
</style>
<div class="LeftColumn">
左カラムの中身をここに
</div>
<div class="RightColumn">
右カラムの中身をここに
</div>
注意点
原則として上記の記述で左右に配置する事が出来るのですが、このレイアウトにはうんざりするほどたくさんの注意点があります。
- 足して 100% の配置は出来ない
例えば左右のカラムの比率が 50% 50%のものは、綺麗に横に配置出来ません。49%ずつにしてあげるなど、合計で100%にしないとうまく行くようです。
- width の記述は並列するカラムすべてに記述する
左側のカラムを49%と記述したから、右側のカラムでは指定しなくても残りのパーセンテージが摘要されるだろう、と思われるかもしれませんが、それはうまく行きません。全てのカラムで width を記述する必要があります。 - float: left は並列するカラムすべてに記述する
- 並列を終わらせるには clear を指定
並列(回り込み)を終了させるには、 clear: both; のように、 clear を指定することで終了させる事が出来ます。ただし clear は完全ではない様子で、<br clear="all">で確実に回り込みを解除してあげる必要がある場合もあります。