小池啓仁 ヒロヒト応援ブログ By はてな

小池啓仁（コイケヒロヒト）の動画など。

小池啓仁 ヒロヒト応援ブログ By はてな

段組みレイアウトの留意点とテンプレート

CSSレイアウト

解説第十二弾です。
本コンテンツは、以下のページのHTML/CSSソースを解説しています。


とにかく、CSSで段組みレイアウトをしていると不可思議な現象に遭遇します。
それは、ブラウザ毎、バージョン毎、表示モード毎の間だを上手く通り過ぎなければならない宿命なのかもしれません。


レイアウト計算では、つねにコンテナー要素の左右のマージン・パディング・ボーダーの幅とwidthの合計を考慮します。
間違っていると、正確なFirfoxは、段組みレイアウトになってくれませんし･･･。
逆に合っていても、不正確なIEでは、段組みレイアウトになってくれません。
ですので、この両方のいい按配のところを見つけることになるのです。


あと、上記がクリアできたとしても、大きなpre要素やtable要素、img要素、長い半角英数字などが悪さをして、カラム落ちになる場合があります。
この場合、ブラウザによっては、各カラムのコンテナーに「overflow:hidden」を指定すると回避できることがありますが･･･回避できないこともあります。


で、大枠の段組みレイアウトができたとしても、そこから詳細の見栄えをCSSで整えるには、めちゃくちゃ根気にいる作業です。
しかも、デザイナー的なセンスも必要で･･･。


ということで、老プログラマの私としては、そろそろこの辺で、CSSから撤退します。
尚、折角なので、段組みレイアウトテンプレートをプレゼントします。
しかし、そのままでは、まったく使い物になりませんので、デザイナー的センスでカスタマイズしてご使用して頂ければ幸いです。

◆段組みレイアウトテンプレート

関連ページ：