今日は、ホームページ（HP）というか、Webページの話です。私は「新館」というタイトルでHPを運営していますが、下の画面のように、項目を段組で表示したい、ということはよくあるわけです。こういうときは、表組（table要素）を使うものだとずっと思ってきました。ところが、今はtableは使わずに、CSS（スタイルシート）で実現するのだそうです。しかも、かなり前からだそうです。
table要素を使うと、こんな感じでしょうか。
<table width="960px">
<tr>
<td width="200px">カラム1</td>
<td width="560px">カラム2</td>
<td width="200px">カラム3</td>
</tr>
</table>
これで、左から200ピクセル、560ピクセル、200ピクセルの段からなる段組が作れます（実際には、揃える方向とか、境界線の指定とか、必要です）。
私の「新館」は、ASP.NETで開発していますが、上のような段組を作りたいときには、迷わずtable要素を使用していました。その方が、デザインモードで見たまま編集できますし、便利だからです。
ところが今は、CSSを使うんですね。今さら知りました。そういえば。このブログ（ココログ）もそうなっていますね。3列レイアウトですが、table要素でなくてスタイルシートで実現しています。上級テンプレートでカスタマイズしていて、それを理解しました。
スタイルシートで段組を実現するには、div要素に適切なスタイルを設定していくのですが、width属性は非推奨属性で、またスタイルシートでないと指定できないものも多いので、基本的に全部スタイルシートで設定していく、という感じになるようです。
たとえば上のtableの場合、div要素で以下のように置き換えます。
<div id="wrapper">
<div id="left">カラム1</div>
<div id="center">カラム2</div>
<div id="right">カラム3</div>
</div>
これに、スタイルシートを以下のように用意します。
div#wrapper {
width: 960px;
}
div#left {
width: 200px;
float: left;
}
div#center {
width: 560px;
float left;
}
div#right {
width: 200px;
float: right;
}
それぞれ、幅を指定するwidthのほかに、floatがあります。floatは、他の要素に対する回り込みを指定するもので、leftを指定すれば、左側に回り込みます。左の2列が左に回り込みますが、右だけrightが指定されているので、右に回り込みます。これで、3つの段が並ぶというわけです。
とまぁ、簡単にはこれで実装できるのですが、たとえば段の間に罫線を引きたいと考えましょう。あるいは、それぞれの段で、背景の色を変えたいとか。このような場合、backgroundやborderで背景や境界線を設定しますが、これってうまく行かないんですね。
つまり、それぞれの段の高さがまちまちな場合、背景が不揃いになったり、境界線が不揃いになったりします。これだと具合が悪いので、「何だよ！これならtableを使うよ！」と思ってもらってもけっこうです。
ですが、世の中は賢い人が多いようで、しっかりと解決策が用意されているのですね。これについては次回で。
コメント