てんぽ: 3カラムのHTML

CSSで3カラムをやるにはどういうHTML構造が必要か。 とりあえずメインカラムとサイドバー1、2の3つのブロックが必須で、 問題となるのは、それらの出現順序とコンテナブロックの関係です。

ケース1

<div id="sub1">
サイドバー1
</div>

<div id="main">
メインカラム
</div>

<div id="sub2">
サイドバー2
</div>

3つのブロックを順々にフロートさせる方法。幅固定も幅可変も比較的簡単。

ソース上での各ブロックの出現順序がテーブルレイアウトと同じなので、CSSでやる意義があまり感じられない。

ケース2

<div id="sub1">
サイドバー1
</div>

<div id="sub2">
サイドバー2
</div>

<div id="main">
メインカラム
</div>

各サイドバーをfloatで左右に寄せて、メインカラムに左右マージンを与える方法。 幅固定、幅可変、サイドバーのみ幅固定でメインカラムは幅可変、どれでも簡単にできる。 ただしメインカラム内の記事でclearすると駄目。

メインカラムが一番最後になるので、ブログやるには適切ではない。

ケース3

<div id="wrapper">
  <div id="main">
  メインカラム
  </div>

  <div id="sub1">
  サイドバー1
  </div>
</div>

<div id="sub2">
サイドバー2
</div>

メインカラムとサイドバー1をdivでまとめる方法。divり方（？）がやや不自然な気もするけど、定番。 試してみたところ、あらゆる段組のパターンが可能っぽい。

ケース4

<div id="wrapper">
  <div id="main">
  メインカラム
  </div>

  <div id="sub1">
  サイドバー1
  </div>

  <div id="sub2">
  サイドバー2
  </div>
</div>

3つのカラムをdivでまとめる。wrapperをコンテナにしてpositionでやるなら、幅可変、幅固定、サイドバーのみ幅固定でメインカラムは幅可変が簡単にできる（ただし、フッタなしか、サイドバー分の左右マージン付フッタになる）。 未検討だけど、これもあらゆる段組のパターンが可能かもしれない。

ケース2の場合にとくに顕著なこととして、「CSSでこうするにはHTMLはこうでなければならない」という思考が気に入らない （そうでなければどうしてメインカラムが一番最後になるというのか）。 CSSレイアウトというからには、「こういうHTMLでこういうレイアウトにするにはCSSはどうするか」と考えなければ。理想的には。

とはいえ、実際に作るときには、CSSでできることとHTML構造の両方を考えながら、許せる範囲でHTMLに手を加えることになる。 ケース3と4は許容範囲内だけどケース1と2はそうでないというわけ。

余談ですが、3カラムのHTMLで各カラムのidをcenter, right, left みたいにしている人がいますが、そういうのはあまり適切ではない。

• 中央、右、左というのはCSSを適用した結果のことであるので、物理マークアップ的な発想と大差ない。
• 左右カラムを入れ替えたくなったら、CSSではなくHTMLのid名を書き換える必要がある。
• HTMLはそのままで左右カラムを入れ替えるなら、id名と実際の配置が一致しなくなる。

一方、FC2公式テンプレの一部では、3つのカラムのidは、primary-column, secondary-column, extra-column（あるいはthirdly-column）になっていて、これは適切といえます。 この場合は、表示位置ではなく優先順序（あるいは性質）を示しているだけで、それはHTMLソース内での出現順序にも対応しています。

ただ、primary, secondaryときたら、3番目はtertiaryだと思うんですが、どうでしょうか（実はここが一番言いたかった）。