ウェブデザインをスタイルシートでおこなおう！

しかし、無闇にtable要素を使うとソースがごちゃごちゃして見難くなる。それでお悩みの方はこの技を試してみてはいかがだろうか。
単純な配置はtable要素使わず、div要素とCSSで再現！
これでソースは見やすくなり、後からのレイアウト調整も非常に楽になる。

ここでは、その基礎となる方法を説明する。
応用すれば複雑なレイアウトも可能である。
しかし、効率から考えて両者を使い分けるのが賢い選択といえよう。

まずはじめに、目的のレイアウトは以下とする。

サイト全ページに適用するレイアウトで、左がメニュー、右がコンテンツ内容となる。
そして、全体の横幅を７６０pxとし、 メニュー部の横幅を200pxとする。

では始めに、table要素での例をあげる。

<table width="760" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200"> 内容 </td>
    <td> 内容 </td>
  </td>
</table>

これをdivとCSSの組み合わせではこうなる。

• CSS内容

  div.main {
    width: 760px;
  }
  div.main-menu {
    float: left;
    width: 200px;
  }
  div.main-content {
    float: left;
  }

• htmlのbody内容

  <div class="main">
    <div class="main-menu"> 内容 </div>
    <div class="main-content"> 内容 </div>
  </div>

両者を見比べてみて欲しい。
divで書いたほうには、レイアウト指定の属性が一切かかれていない。
これは、レイアウトの変更はcssファイル１つのみで可能なことをあらわす。
tableで行っていたら、レイアウトをいじるたべに全ページ書き換えという手間が発生する。

では、このCSSの各意味を簡単に説明しよう。

• div.main
  これはtable要素に相当する部分である。
  横幅が足りなくてもレイアウトが崩れず横スクロールバーを表示させるための処置である。
• div.main-menu & main-content
  これはtd要素に相当する部分である。
  float: left;を指定することで、指定された順に左から横一列に表示される。
  必ず、両者ともにfloat: left;を設定するのを忘れないようにしよう。
  一番左のdivにのみ指定だけでも横一列となるが、div要素間に余分な空白が作成されてしまい、レイアウトが面倒となる。

補足：横一列を解除して下に表示させたいものがある場合、 <br clear="all"> を使えばよい。
スタイルシーにも clear 命令があるが、動作がおかしいのでbrのほうで行ったほうが良い。