hijiriworld Web

リキッドレイアウトとは、ウィンドウサイズに合わせてコンテンツ領域が可変になるレイアウトのことです。

はるか昔、PCオンリーの時代から、Webデザインをするにあたって、基準となるウィンドウサイズについては様々な議論がありました。800×600とか、1024×768とか。
しかし、いまやスマホやタブレットなど、様々なウィンドウサイズが存在する時代。もはや基準となるウィンドウサイズを決めること自体が無意味であり、あらゆるウィンドウサイズに対応することが求められています。
よって、リキッドレイアウトについての知識は必須であり、リキッドレイアウトこそが基本。

ところがッ！

“リキッドレイアウト”でググると、おかしなリキッドレイアウトばかりではありませんかッッ！！

「そのリキッドレイアウトでいいの？正しいリッキドレイアウトCSSはこうでしょ？」ということで。

おかしなリキッドレイアウト

両脇に固定幅カラム、真ん中に可変幅カラムという、3カラムレイアウト。

> HTML

<div class="container">
	<div class="left_sidebar">
		固定幅カラム
	</div>
	<div class="right_sidebar">
		固定幅カラム
	</div>
	<div class="content">
		可変幅カラム
	</div>
</div>

> css

.container {
	width: 100%;
	overflow: hidden;
}
.left_sidebar{
	float:left;
	width: 200px;
	background: lightblue;
}
.right_sidebar{
	float:right;
	width: 200px;
	background: lightblue;
}
.content{
	margin-left: 210px;
	margin-right: 210px;
	background: lightpink;
}

「はい、リキッドレイアウトの完成です！ウィンドウサイズが変わっても可変ですよー。」と言っているサイトの多いこと。。

確かにリキッドレイアウトと言えなくもないですが、、根本的になにか勘違いしてない？？

ウィンドウサイズをもっと小さくしてみると…

崩れてるよねッ！！！

正しいリキッドレイアウト

リキッドレイアウトの条件として、

ウィンドウサイズによって可変

というのは当然。

ただし肝心なところが抜けている。

それは、

ウィンドウサイズが違ってもレイアウトが崩れない

ということです。

大事なのは、どんな環境でも見やすい ということなんです。

では、正しいリキッドレイアウトに直していきましょう。

まずは、ウィンドウサイズが超小さくてもレイアウトが崩れないように、可変幅カラムの最小幅を決めてしまいます。
これ以上縮まるとコンテンツが見づらくなる幅ということです。
親カラムの min-width を指定してやります。

.container {
	width: 100%;
	overflow: hidden;
	min-width: 600px;
}
/* 以下省略 */

これでウィンドウサイズが超小さくても、レイアウトは崩れません。（横スクロールバーは出ますが、コンテンツが見づらくなるよりははるかにまし。

さらに、ウィンドウサイズが超大きくても、コンテンツが無駄に横長になりすぎないように、最大幅も決めておくといいです。

.container {
	width: 100%;
	overflow: hidden;
	min-width: 600px;
	max-width: 2000px;
}
/* 以下省略 */

ということで、リキッドレイアウトとは、ただ可変レイアウトにすればいいのではなく、あくまでもエンドユーザのことを考えたレイアウトでなければならないのです。

その前提を忘れたらダメダメです。