CSS 非対応 (もしくは対応が不十分) なブラウザーで読んでいる人の為に説明をすると、このページはメイン・コンテンツとサイドバーの 2 カラム構成になってる。基本は fluid width なページだけど、横幅 が 500px 以下では fixed width になる。備忘録の代わりにトリックを書いておこう。
テンプレートと CSS
このページのテンプレートは次の通り。
<body>
<div id="wrap">
<div id="main-content">
メイン・コンテンツ
</div>
<div id="sidebar">
サイドバー
</div>
</div>
</body>
CSS は、次のように書いてる。
body {
color: #333;
background: #eee;
}
#wrap { min-width: 500px; }
#main-content {
float: left;
width: 61.8%;
margin: 0 1% 0 2%;
background: #fff;
border-style: none double;
border-width: 18px;
border-color: #eee;
}
#sidebar {
float: left;
width: 28%;
font-size: 85%;
line-height: 1.4;
color: #999;
}
CSS の解説
何故に #main-content の width が 61.8% という微妙な値なのかというと、本文とそれ以外を黄金比にしたかったから。黄金比は 1:(1+sqrt(5))/2 で、パーセントにすると 61.8:38.2 になる。本文の左には 2%, 右には 1% のマージンを取った。 #sidebar の width=28% は、実は適当。
このスタイルでは、メイン・コンテンツの両脇に白いバーを出してる (※ border-style: double をサポートしているブラウザーでないと見えません)。これは、二重線 border の線と線の間がメイン・コンテンツの background の色で塗られる事と、二重線自体は body の background と同じ色を指定して見えなくする事で実現している。ただし、border-width にパーセント指定ができなかったので 18px に指定。18px の由来は、 Google Adsense の枠線の太さが 6px っぽいのを参考にして、その値を 3 倍にしたもの。
横幅がパーセント指定と px 指定の混合になってしまったので、ブラウザーがある程度小さくなると float 指定したサイドバーがメイン・コンテンツの下に回されてしまうバグが入った。これを解決するために、min-width 値を設定して、この値より小さくなった時は fixed width にするようにした。
min-width の計算
横幅は、メイン・コンテンツの幅とサイドバーの幅の足し算。ボックスの幅の計算は次のようになる。
横幅 = margin + border + padding + width
具体的な計算は次のようになる。
横幅 = メイン・コンテンツの幅 + サイドバーの幅
= #main-centent(margin-left + border-left + width + border-right + margin-right)
+ #sidebar(width)
= ( 2% + 18px + 61.8% + 18px + 1% ) + 28%
= 92.8% + 36px
ここで、92.8%+36px が 100% より上回るとサイドバーが動いてしまう。よって
92.8% + 36px < 100% * width
36px < 7.2% * width
∴ width > 36px / 0.072 = 500px
つまり、min-width=500px というわけ。
ただし、IE6 は min-width に対応していないので、幅を 500px より小さくするとサイドバーがメイン・コンテンツの下に行きます。ゴメンなさい。
No comments:
Post a Comment