【Follow up】フルードグリッドの必要性
グリッドデザインによって整然とレイアウトされていても、Webブラウザーの横幅が変わればバランスは崩れてしまいます。そこで考えられたのが、「フルードデザイン」です。フルードデザインはWebブラウザーの横幅が変更されても、バランスを一定に保ったままレイアウトを調整する手法で、「リキッドレイアウト（Liquid Layout）」とも呼ばれています。
フルードデザインでは、Webページの横幅をブラウザーに合わせて調整するため、要素の幅を％で指定します。％での指定を簡単にするために、グリッドデザインによって要素のサイズや表示領域をpx単位で把握しておく必要があるのです。
固定幅レイアウトとフルードデザイン
Webページの代表的なレイアウトは3種類あります。width、margin、paddingをすべてpxで指定する「フィックス（固定幅）レイアウト（Fixed Layout）」、すべて％で指定する「フルードデザイン」、すべて相対単位であるemで指定する「エラスティックレイアウト（Elastic Layout）」です。
px単位で指定する固定幅レイアウトのほうが直観的で扱いやすく、フルードデザインは難しいともいわれています。しかし、レスポンシブWebデザインの3要素のひとつであるフルードグリッドを実現するには、フルードデザインの採用が欠かせません。
実際に「固定幅レイアウト」と「フルードデザイン」をブラウザー上で表示してその違いを比較してみましょう。
サンプル1は、固定幅レイアウトで作った簡単なサンプルページとその図です。
■サンプル1 固定幅レイアウト[HTML]
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>フィックス・レイアウトサンプル</title>
<style type="text/css">
body { width : 1000px;margin: 0 auto}
header,footer {
height : 200px;
background: gray}
footer {clear: both}
#left,#middle,#right {
height : 400px;
float : left}
#left { width: 300px;background: red}
#middle { width : 400px;background: green}
#right { width: 300px; background: blue}
</style>
</head>
<body>
<header></header>
<div id="contents">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
<footer></footer>
</body>
</html>
左はサンプル1で幅100％の実行画面、右は幅を狭めたときの画面。ウィンドウ下に横スクロールバーが表示されている
サンプル2は、フルードデザインで作った簡単なサンプルページとその図です。
■サンプル2 フルードデザイン[HTML]
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>フルードデザインサンプル</title>
<style type="text/css">
body { width : 78.125%;margin: 0 auto}
header,
footer {
height : 200px;
background : gray}
footer { clear : both}
#left,
#middle,
#right {
height : 400px;
float : left}
#left { width : 30%; background : red}
#middle { width : 40%;background : green}
#right { width : 30%; background : blue}
</style>
</head>
<body>
<header></header>
<div id="contents">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
<footer></footer>
</body>
</html>
左はサンプル2で幅100％の実行画面、右は幅を狭めたときの画面。ウィンドウ下に横スクロールバーは表示されない
両者を比較すると一目瞭然です。固定幅レイアウトはウィンドウサイズを縮めるとページがはみ出てスクロールバーが表示されています。一方、フルードデザインの場合ははみ出さずに全体が縮小して表示されています。
次の図は固定幅レイアウトで横幅を320pxから1280pxまで変えた場合の見え方の違いです。横幅が狭くなると、横スクロールバーが出現します。
左から横幅320px／768px／1024px／1280pxの固定幅レイアウト画面
以下の図はフルードデザインで、横幅を320pxから1280pxまで変えた場合の見え方です。横幅をいくら狭くしても、横スクロールバーは表示されません。1つ１つの要素の大きさは変わりますが、すべての要素が表示されます。
左から横幅320px、768px、1024px、1280pxのフルードデザインの画面
スマートフォンやタブレットなどで快適に閲覧できるようにすること、大きな画面でもレイアウトのバランスが崩れないようにすることなどを考えると、レスポンシブWebデザインにはフルードグリッドが必要だということが理解できるでしょう。
著者：菊池 崇（きくち・たかし）
Web Directions East LLC代表。allWebクリエイター塾講師。米国にてマーケティングを専攻修了。貿易会社を経て、allWebにてXHTML+CSS基礎講座、XHTML+CSS中級講座、XHTML+CSS上級講座、microformats講座などの講師。オーストラリア、米国、カナダなどで開催されている世界的に有名なカンファレンス「Web Directions」の日本版である「Web Directions East」の発起人。
