3カラムにデザインをマイナーチェンジしました

2007.07.11

個別記事のページの中段部分（記事本文の下、フッターの上）をリキッド（可変）レイアウトの3カラムにして、デザインをマイナーチェンジしました。左から順に、コメント・トラックバック、関連記事、最近の記事って順番に並ぶようにしています。

可変３カラムを作る時の注意点

可変３カラムを作る時の注意点をいくつかあげてみます。

floatするボックスには、paddingとborderを指定してはいけない

可変３カラムを作るのfloatを多用します。その時に一番に注意すべき点がこれだと思います。

floatするボックスにpaddingとborderを指定してはいけないのは、IEバグへの対処で以下の２点の理由からです。

フロートするボックスにはwidthを指定する
（理由：CSS2定義参照元：Visual formatting model）
widthを指定したボックスにはpaddingとborderを指定してはいけない
（理由：IE6バグ参照元：CSSレイアウトの定石　WinIE6バグ回避法）

よってfloatするボックスにはwidthを絶対指定しなければならず、widthを指定したので、paddingとborderを指定してはいけません。

IE6 では min-width、max-widthに対応してない

リキッドレイアウトでは最大幅と最小幅が結構重要になってきますが、IE6 では min-width、max-widthに対応してないので（XML宣言すると対応しなくなるので）、使わないか、もしくは代用方法をとります。

CSSのみで対応させる（試したけど僕の環境ではうまくいかなかった。）
Lucky bag::blog: IE で min-width を指定する方法

スクリプトを使う方法
あるＳＥのつぶやき: minmax.js – IEでCSSのmax-widthなどを使えるようにするライブラリ

ブロック要素のセンタリング

margin-left: auto; margin-right: auto; を指定すると、そのボックス内のブロック要素（divなど）がセンタリングされるはずなのですが、IE6 ではそれが効きません。

しかし、text-align:center; してやると、本来は適用しないブロック要素までセンタリングするので、それで代用します。

%での幅指定とカラム落ち

ボックスをあんまりカツカツに詰めすぎるとカラムが落ちてしまいます。そうならないように、足して100%にならないようにします。

例えば左フロートはwidth:50%; なら右フロートはwidth:49%; で足して99%。

HTMLとCSSの例

新しくデザインを変更した部分は、特にたいした事をしてないリキッド（可変）レイアウトの３カラムです。記事の本文とかは900pxの固定幅のレイアウトなんだけど、新しいデザインの部分は可変レイアウトで、min-widthとmax-widthで最大最小幅を決めています。

HTMLとCSSはそれぞれこんな感じにしました。


<body>

<div id="container">

    <div id="middle">

        <div id="middle_left">
          コメント・トラックバック
        </div>

        <div id="middle_right">

            <div id="middle_right_left">
              関連記事
            </div>

            <div id="middle_right_right">
              最近の記事
            </div>

        </div><!--middle_right 閉じ-->
  
    </div><!--middle 閉じ-->

</div><!--container 閉じ-->

</body>



* {
    margin:0;
    padding:0;
}

#container{
        width:100%;  
        margin:0px auto;
        text-align:center; 
/*text-align:center;は、#middleのセンタリング*/
}

#middle {
    min-width:900px;
    max-width:1200px;
    margin:0 10px;
}

#middle_left{
    width:49%;
    float:left;
}

#middle_right{
    width:50%;
    float:right;
}

#middle_right_left {
    float:left;
    width:49%;
}

#middle_right_right {
    float:right;
    width:49%;
}