<table>タグを使わない簡単レイアウト術 ちょっとしたレイアウトなら<table>のが良い？そういう使い分けをしていてはなかなか効率は上がらない。cssになれた上で、どっちが最適がを判断できるようになろう。両者には得意不得意が存在するからだ。それまでは意地でもcssを使ったほうが上達の近道だ。 月額125円からのレンタルサーバ

ここでは入門用として、<table>と同じことをcssでするにはどう記述するか。それを説明しよう。

まず、簡単な<table>とcssでのソースの比較。

<table width="300" height="100" border="1" cellpadding="3" cellspacing="0">
<tr>
<td>
単純にこんなテーブルを使うとする。<br>
これをCSSとソースレベルで比較しよう。
</td>
</tr>
</table>

<div class="box">
簡単にこんなテーブルを使うとする。<br>
これをCSSとソースレベルで比較しよう。

</div>

上の２つは、htmlファイル内の様子である。CSSだとすっきり見やすいのがわかる。
そして外部CSSファイルに、縦横幅、ボーダーといった設定でまったく同じ設定ができる。
そして、CSSならば設定の使いまわしもできるから、複数個を設置したら見易さも作業効率もぐ〜んとアップだ。

では、サイト全体のデザインを<table>を使わずCSSでやった場合のソースを紹介する。

このよくあるテーブルデザインをCSSを使ってしみると。

<div class="head"> </div>
<div class="menu"> </div>
<div class="main"> </div>
<div class="foot"> </div>

まずはhtml内がこんなにもすっきりする。テーブル関連のタグがごちゃついて分け分からなくなるってことが無いわけだ。
では次に各CSSのプロパティーを見てみよう。

div.head {
}
div.menu {
	float: left;
}
div.main {
	float: left;
}
div.foot {
	clear: left;
}

以上が最低限の設定だ。動作もない設定といえよう。後は自分の思うように設定を付け加えればいいわけだ。
しかし実際に使ってみると思うようにいかない事に気が付くかもしれない。それがこの方法でレイアウトした場合の限界なのだ。

では、この方法での問題点をあげる。
まず、floatとは、そのとおり浮かすことになる。そして中身の無い空き地を勝手に詰めてしまう。
そう、たとえ menu で横幅が指定されていても、それは最大値であり、最小値は中身によって自動で決められてしまう。
すなわち、menu の中に何もかかなければ、それの横幅は0とみなされ、main がつめてきてしまうのだ。
これを回避する方法は、その幅の画像を用意するかしかない。

以上が基本であり、これだけ覚えてれば問題ないだろう。
CSSでレイアウトは他のにも方法があり、すこし記述することが多くなるが、この問題点も無くなりより柔軟なレイアウトが可能となる。
ブログの到来により最近はこういったレイアウト方法が主流となりつつあるので、サイト作成になれたら是非チャレンジしてもらいたい。