てんぽ: 段組のパターン

floatとpositionの使い分けを考慮して、 CSSによる段組を「技術的な制約」をもとにパターン分けしてみる。 ブログでよくある段組のパターンは、だいたい以下の条件の組み合わせで表される。

• カラム数:1/2/3
• サイドバー：幅固定/可変
• メインカラム：幅固定/可変
• フッタ：カラムぶち抜き/サイドバー分の左右マージンあり（orフッタなし）

カラムの左右入れ替えは楽勝なので、それによる分類はしていない（「技術的な制約」とはそういう意味）。

これらの組み合わせは単純に掛け合わせると全24種類。そこから「メインカラム幅固定、サイドバー可変」とか「1カラムでサイドバー固定」みたいな非現実的な組み合わせを除いて整理すると、こんな感じになる。

• 1カラム
  • 幅固定
  • 幅可変
• 2カラム
  • 2段ぶち抜き型フッタあり
    • 幅固定
    • 幅可変
    • サイドバー幅固定、メインカラム幅可変
  • サイドバー分の左右マージンあり（orフッタなし）
    • 幅固定
    • 幅可変
    • サイドバー幅固定、メインカラム幅可変
• 3カラム
  • 3段ぶち抜き型フッタあり
    • 幅固定
    • 幅可変
    • サイドバー幅固定、メインカラム幅可変
  • サイドバー分の左右マージンあり（orフッタなし）
    • 幅固定
    • 幅可変
    • サイドバー幅固定、メインカラム幅可変

14種類。これらすべてを1つのHTMLで、CSSを切り替えるだけでやる、というのが今の目標。 一見無理っぽいけど、実はできる（はず）。

難易度としては、「サイドバー幅固定、メインカラム幅可変の2カラム」≧「3段ぶち抜き型フッタありのサイドバー幅固定、メインカラム幅可変の3カラム」＞「それ以外の2カラム」≧「幅可変3カラム」＞「幅固定3カラム」＞＞「1カラム」という感じ。

3カラムより2カラムのほうが難しいのは、1カラム～3カラムまでカバーしたHTMLでやるから。