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

CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

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

2006年02月12日(日)

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

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

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

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

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

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

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

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

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

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

#69
カテゴリ:HTML・CSS

同じカテゴリの記事

(-0件)

コメントの投稿

トラックバック(-0件)

http://mb.blog7.fc2.com/tb.php/69-9713b8cb

<<「わほっき。」が素晴らしい件 | floatとpositionの使い分け>>

Utilities

おすすめ

セオリー・オブ・スタイルシート (Quick Master of Web Technique)
「ボックスと視覚整形モデル」の詳細な解説が圧巻。→関連記事
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
正しい仕様の解説から実践的なレイアウトテクニックまで網羅。→関連記事
詳解HTML&XHTML&CSS辞典 第3版
信頼できる辞典型解説書の筆頭。

広告

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。