リキッドレイアウトとソリッドレイアウト
web ページのレイアウトを考える時に、以前は「大きいディスプレイでは大きく！ 小さいディスプレイでは小さく！ 相手の環境に合わせられるリキッドレイアウトは最高！」などと思っていたんですが、最近は横幅固定(ソリッドorフィックスド レイアウト)でもいいかなと思うようになってました。
というのも現在ではメインストリームのディスプレイがどんどん大型化していて、横幅 100% の web ページなどがが見難くなっているためです。
そんなヘイトな意見には「それウィンドウリサイズでできるよ！*1」と言いたくなる気持ちも以前は持っていたのですが、これもまた昨今のブラウジングの定番であるタブブラウザを使用しているとブラウザウィンドウを最大化して使うのが当たり前になってしまって、各ページにあわせてウィンドウの端をマウスでちょいちょいと操作するなんてのはもうストレス以外の何者でもなくなってしまいました。
そこで登場する救世主が CSS の min-width と max-width なんですがそれは少し置いといて。
こんなふうに思想がソリッドに傾きかけたのですが、「やっぱリキッドだよね！」と思わせるメリットに今更ながら気付きました。それはウィンドウを小さくしても横スクロールしないで読めるということです。
「さっき最大化して使うって言ったじゃん！」というツッコミもありますでしょうか。いやしかし普段は最大化してブラウジングしていても、場合によってはウィンドウを小さくして作業したい時もあります。
例えば僕はネット麻雀をやりながら順番がくる間にサイトの巡回をするという「ながらブラウジング」をよくやります。うちのディスプレイの解像度ではその麻雀のウィンドウの幅がディスプレイの半分以上を占めるため、ブラウザのウィンドウを残りの幅にあわせてリサイズして使うのですが、ソリッドな web ページでは横スクロールをしないと本文が読めなくなってしまうのです。
が、リキッドなら問題ないかというとそうでもありません。
マルチカラムなリキッドレイアウトのページを閲覧していてウィンドウの幅を縮め過ぎると、
- レイアウトが崩れてしまう
- サイドバーはしっかりと表示されてるのに肝心の本文が縮まって読めない(画像参照)
ということが頻繁にありました。
と言うのが前置きで、次に続きます。
