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

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

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

new-design

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

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

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

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

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

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

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

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

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

スクリプトを使う方法
あるSEのつぶやき: 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の例

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

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

          コメント・トラックバック










              関連記事






              最近の記事





















* {
    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%;
}

参照・参考

CSSレイアウトの定石 WinIE6バグ回避法

CSSによる段組(マルチカラム)レイアウト講座

Cascading Style Sheets, Level 2