m2

ウィンドウ幅を狭めても本文が読みやすい2カラムリキッドレイアウト(続・リキッドレイアウトとソリッドレイアウト)

css webdesign

前置き

前回は webページのレイアウトをする際に

  1. 単純なリキッド(横幅可変な)レイアウトだと、ディスプレイが大きい場合、横に広がりすぎて読みにくい。
  2. ソリッド(横幅固定の)レイアウトだとウィンドウ幅を狭めた時に横スクロールが必要になり読みにくい。
  3. 横幅が可変でもマルチカラム(本文+サイドバー)なレイアウトだとウィンドウ幅を狭めた時にサイドバーが本文を圧迫して本文が読みにくい場合がある。

といった問題があるという内容でした。
「横に広がりすぎて読みにくい」は 'max-width' で対応できるとして、今回は「ウィンドウ幅を狭めても本文が読みやすい2カラムリキッドレイアウト」を考えてみます。
＃ 特に新しい話題じゃありません。

上記の問題の対応策として CSS の 'min-width'・'max-width' プロパティを利用するのですが、それをサポートしないブラウザに対しては「特に問題はないが、モダンブラウザで見るとより読みやすい」という立場をとることにしました*1。例えば以下に挙げる対応策の一つは IE6 で見るとソリッドレイアウトになります。

前提

  • 2カラム(本文+サイドバー。画像参照)。
  • 本文の幅は可変でサイドバーの幅は固定。
  • モダンブラウザで無い場合
    • CSS のみで本文の幅を可変にできれば可変に。そうでなければ固定に。
    • JavaScript・expression は使用しない。
    • ウィンドウ幅を狭めた時に本文が読みにくくても構わない。


ウィンドウ幅を狭めた場合、どうなって欲しいか

  1. 一定の幅以下になればサイドバーを下に回りこませる(float的)
  2. 一定の幅以下になればサイドバーが隠れる(横スクロールバー表示)


デモ

2カラムのリキッドレイアウト

解説

//miya2000.up.seesaa.net/css/2column_layout.html#IMPL1">一定の幅以下になればサイドバーを下に回りこませる(float的):本文の width を 100% にして max-width を設定する。
ウィンドウ幅が十分大きくても本文の幅は max-width より大きくならない為、その隙間にサイドバーが流れ込む。ウィンドウ幅を狭めていくと本文の幅はウィンドウ幅と同程度になりサイドバーは下に回りこむ。
IE6 では本文の横幅は固定。
//miya2000.up.seesaa.net/css/2column_layout.html#IMPL2">一定の幅以下になればサイドバーが隠れる(横スクロールバー表示):一般的なネガティブマージンによる2段組レイアウトで、本文の親 Box に min-width (>サイドバーの幅)を設定する。
ウィンドウ幅を min-width 以下にすると横スクロールバーが表示され、サイドバーは表示領域外に隠れる。
IE6 では読みにくいまま。


対案とかあればコメントお願いします。

*1:MOSeのススメ「http://realog.org/2006/12/15/1802.html」