てんぽ : ブログでCSSによる段組レイアウトが難しい理由

CSSで2カラムなどの段組レイアウトをやろうとすると、ブログではページ（表示モード）によって左右の段（カラム）の高さが変わるため、なかなか思ったようなレイアウトができません。

たとえば以下のような「典型的」な（しかし実は難しい）レイアウトを実現したいとします。

• cfdn_06
• hananeko

上のふたつは、サイドバーと記事の領域を「ボーダー」や色で分割し、しかもその境界線がページの最下部まで続くレイアウトの例です。 tableを使えば簡単なこのレイアウトは、CSSでやろうとすると、たいていつまずきます。すわなち、

• 記事とサイドバーの色分け、あるいはボーダーが最下部まで続かない

段組をfloatでやるにせよ、positionでやるにせよ、背景やボーダーを設定するのはブロックレベル要素（div）なので、divの内容が終わったところで背景色やボーダーが途切れるのは当然です。 All Aboutの解説記事では、左右の段を囲む親ボックスに短いほうの段と同じ背景色を指定する方法が紹介されています。 しかし、この方法は、どちらの段が短くなるかあらかじめわかっているからこそ使えるのであって、ブログのようにページによって左右の段の長さが変わる場合には使えません。

段組レイアウトでつまずきやすい点；

• 記事とサイドバーの色分け、あるいはボーダーが最下部まで続かない
• サイドバーとフッタが重なる（positionを使うとき）

これらは記事とサイドバーの高さが不定であることに起因します。 公式・共有テンプレの中には、一見うまくいっているように見えて、サイドバーが記事より長くなったときに不恰好になるものが少なくありません。

さて、この制約のために、ブログで見られる段組（左右の段のどちらが長くなっても大丈夫なもの）にはあるパターンが見出せます。というわけで次回に続く。

ちなみに[cfdn_06]と[hananeko]は記事とサイドバーの（最下部まできちんと続く）境界を背景画像を使うことで実現しています。 このタイプの共有テンプレは実はかなり少数です。あったとしてもテーブルレイアウトだったり。