2005年03月08日
3カラム化 補足事項1
livedoor Blog でも3カラム化を採用するサイトが増えた。
しかし、3欄相互の表示が不安定なサイトを見かけます。
次の記事が改善の参考になると思います。
3カラム化は形式で2種類に分かれる。すなわち、
- case-1) 両サイドが固定幅で、真ん中の記事本文欄が可変幅:両サイドバーの表示が優先され、画面の有効幅に応じて真中欄の幅が伸び縮みする。
- case-2) 3欄共に固定幅: 画面左に「お気に入り」など表示して画面の有効幅が狭くなると右サイドバーの右端から表示が欠けて行く。
上図のBLOGの場合、CSSのキーポイントは次のとおりです。
case-1) 両サイドが固定幅で、真中が伸縮(可変)幅
#links {
position: absolute;
top: ZZpx;
left: 0px;
width: XXpx;
........
}
.blog {
margin:ZZpx YYpx 0px XXpx;
width: auto;
........
}
#links2 {
position: absolute;
top: ZZpx;
right: 0px;
width: YYpx;
........
}
case-2) 3欄共に固定幅
#links {
position: absolute;
top: ZZpx;
left: 0px;
width: XXpx;
........
}
.blog {
position: absolute;
top: ZZpx;
left: XXpx;
width: WWpx;
........
}
#links2 {
position: absolute;
top: ZZpx;
left: (XX+WW)px;
width: YYpx;
........
}
case-1 にするか、case-2 にするかは各人の好みです。
上の数値設定を基準にして、多少加減すれば良いと思います。