2005-06-10

最小幅の設定 |Blogger|CSS|

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