スタイルシート

質問

さっそく質問させていただきます。

<table border>
<tr>
<td rowspan="3">
<h3>AAA</h3>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</td>

<td>
<h3>BBB</h3>
<ul>
<li>aaa</li>
<li>bbb</li>
</ul>
</td>
</tr>

<tr>
<td>
<h3>CCC</h3>
<ul>
<li>aaa</li>
<li>bbb</li>
</ul>
</td>
</tr>

<tr>
<td>
<h3>DDD</h3>
<ul>
<li>aaa</li>
<li>bbb</li>
</ul>
</td>
</tr>
</table>

このタグを記述すると左に右の三つのセルをまたがったセルが表示されると思うのですが、これと同じレイアウトをスタイルシートで表現するにはどのように記述すればよいのでしょうか？

左側に一つのボックスを置いて、その直ぐ隣に三つのボックスを置きたいのです。

回答No.1

dezimac · ベストアンサー

┌┬┬┐
├┼┼┤
├┼┼┤
└┴┴┘
こういう形ですよね。

【HTML】
------
<div class="c0">
<h3>小見出し</h3>
</div>
<div class="c1">コラム1</div>
<div class="c2">コラム2</div>
<hr class="clear">
------
これを2回繰り返し

【CSS】
.c0{
float: left;
}
.c1{
float: left;
}
.clear{
clear: both;
visibility: hidden;
}

とでもすれば出来ます。
ただし、環境によってはレイアウトが崩れる場合があります。
テーブルを使った方が簡単ですよ。
テーブルを全て、CSSに変える必要はありません。
レイアウト目的でテーブルを使用するのは控えた方がいいですが、場合によってはテーブルを利用したほうがいいです。

お礼

回答ありがとうございます。

やはりテーブルを使った方が無難ですよね。テーブルでレイアウトする事を検討してみたいと思います。

回答No.2

神崎 渉瑠（@taloo）

「CSS 段組」で検索すると、サンプルとかたくさん見つかると思います。

お礼

回答ありがとうございます。

「CSS 段組」で検索したみたところ、参考になるサイトを多く見つけることができました。それらを参考に色々と挑戦してみたいと思います。