可変レイアウト（Fluid Layout）作成のポイント

DogRoboの一日は朝食で始まる。
ロボットの朝食なんてオイル臭い丸薬のようなものと思うだろうが、実際はトーストと目玉焼きにカフェオレとシャレている。特にカフェオレにはこだわりがある。牛乳とマンデリンコーヒーの割合は7：3に決めている。間違ってはいけない、牛乳が7割なのだ。そして極めつけは100gのチョコレートを浮かべることにしている。

作り方は簡単だ。軽量カップで牛乳とマンデリンコーヒーを7:3の割合で計ればよい。けれども困った問題が起こった。
まず、200ccのオリジナルカップに牛乳を7割入れ、次にマンデリンコーヒーを3割入れると、もうカップはいっぱいになってしまい、チョコレートを投入するとカフェオレがあふれ出てしまい洪水になってしまうことだ。

リキッドレイアウトとフレキシブルレイアウト

可変レイアウト（Fluid Layout）には大きく分けるとリキッドレイアウトとフレキシブルレイアウトがあります。どちらもカラム幅の寸法を％で指定することで画面（ブラウザ）の幅に応じて伸縮して表示されます。固定レイアウトではブラウザの幅が固定幅より狭くなるとはみ出した部分が隠れてしまいますが、可変レイアウトではそのような問題は起こりません。

モバイル対応サイトの場合に使い勝手のよいレイアウトになります。

リキッドレイアウト

画面幅に応じて一定の比率（%）で伸縮するレイアウトです。一旦固定幅でレイアウトを作成した上で、それぞれのカラム幅をレイアウト全体幅で割って算出します。

幅をパーセント指定するため、画面の大きさ（ブラウザの幅）に対して伸縮するレイアウトになります。ただし、画面の幅が大きすぎると１行の長さが無駄に長くなったり、逆に小さすぎると１行に数文字しか入らず、非常に読みにくいレイアウトになります。

リキッドレイアウトのサンプル
HTMLコード

<div class="wrapper">
<div class="box-a">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis error non adipisci quia, nemo autem voluptatum unde temporibus provident vero necessitatibus sint fugit maxime sequi eius labore tenetur ipsum molestiae.</div>
<div class="box-b">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga quae harum incidunt suscipit nostrum, exercitationem ut distinctio reprehenderit alias cum adipisci ab vel veritatis dignissimos inventore aliquam ullam quos, deleniti.</div>
</div>

CSSコード

.wrapper{
width:100%;
overflow:hidden;
background:pink;
}
.box-a{
background:yellow;
padding:2.5641%;
float:left;
width:38.4615%;
}
.box-b{
background:lightblue;
padding:2.5641%;
float:left;
width:51.28205%;
}

フレキシブルレイアウト

リキッドレイアウトと同様に一定の比率（%）で伸縮するレイアウトですが、最小値、最大値を設定することで一定の範囲内での伸縮にとどめます。最小値、最大値はmin-widthとmax-widthを使用します。

幅の最大値、最小値を設定することで１行の長さが長すぎたり短すぎたりする問題が起こらなくなります。

フレキシブルレイアウトのサンプル
HTMLコードはリキッドレイアウトサンプルと同じ
CSSコード

.wrapper{
width:100%;
max-width:980px;
min-width:680px;
overflow:hidden;
background:pink;
}
.box-a{
background:yellow;
padding:2.5641%;
float:left;
width:38.4615%;
}
.box-b{
background:lightblue;
padding:2.5641%;
float:left;
width:51.28205%;
}

可変レイアウトでパディングやボーダーに固定幅を使用したら起こる問題と解決方法

DogRoboがカフェオレを作るときに失敗した原因はなぜでしょう。
それは、カップの容量全部にあたる200ccに対して牛乳70% とマンデリンコーヒー30%を計量してカフェオレを作ってしまったためです。カップはすでにいっぱいになっているのでチョコレートを加えることはできませんでした。

可変レイアウトを作成するときも注意が必要です。
BOXモデルの仕組みからwidthの値はボーダーやパディングを含まないサイズになります。もし、パディングやボーダーの幅が固定幅なら常にこれらのサイズだけ考慮してカラムの比率を計算しなければなりません。そうしないとたちまちカラム落ちするハメになります。

ボックスモデルに従ったwidthの値にボーダーやパディングの固定幅を考慮してカラムの割合を求めるのは、現実的な計算方法ではありません。
問題が起こるレイアウト例

CSSのコード

.wrapper{
max-width:100%;
overflow:hidden;
background:pink;
}
.box-a{
background:yellow;
padding:20px;
float:left;
width:38.4615%;
}
.box-b{
background:lightblue;
padding:20px;
float:left;
width:51.28205%;
}

問題解決

もっとも効率良く計算するにはwidthの値にパディングやボーダーの値が含まれていることにすると良いのです。
ボックスモデルの仕組みから、それは不可能に思えますが、CSS３から便利なプロパティが用意されました。それが box-sizing プロパティです。
widthにパディングやボーダーを含めるにはbox-sizing:border-boxを使用します。

box-sizing:border-boxを使用した例

CSSのコード

.wrapper{
width:100%;
overflow:hidden;
background:pink;
}
.box-a{
background:yellow;
padding:20px;
float:left;
width:43.5897%;
box-sizing:border-box;
}
.box-b{
background:lightblue;
padding:20px;
float:left;
width:56.4102%;
box-sizing:border-box;
}

DogRoboも計量カップにあらかじめチョコレートを入れておいてから、牛乳とマンデリンコーヒーを計ると幸せになれたかもしれませんね。