リキッドレイアウトとレスポンシブデザイン

語句の意味

リキッドレイアウトとは、%を使ってウェブサイトをデザインすること。これにより、画面サイズが変わっても各エレメントが占める空間の割合が一定となる[1]。
　レスポンシブデザインとは、CSS Media Queries[2]を利用することで画面サイズに応じて異なるレイアウトを提供する手法のこと[1]。

デモ

まず普通のデザイン。各エレメントのサイズはpxで指定している。

sample1

画面サイズを小さくすると以下のように右側が隠れてしまう。

これをリキッドレイアウトに変更する。

sample2

すると、画面サイズを小さくしても右側が隠れない。各エレメントの幅の”割合”はディスプレイサイズによらず一定となる。

ちょっと詰まったところが、borderやpaddingの指定。divのwidthは%指定できてもborderはpx指定なのでサイズをピッタリ合わせるのが難しかった。
どうやらそういうときは、

box-sizing: border-box;

という指定をするらしい。この指定により、borderやpaddingが要素の幅に含まれるようになるらしい[3]。

リキッドレイアウトで画面サイズの問題は解決したように思えるが、さらにサイズを小さくすると以下のようになってしまう。

divエレメント内の文字が全部表示されていない。

これをレスポンシブデザインを使って解決してみる。

sample3

上のサンプルでは、CSS Media Queriesを使って画面サイズが500px以下になるレイアウトを変更するようにしている。これにより画面サイズを大幅に小さくした場合の対応が出来る。

今回の例では画面幅が500px以下になると、

• 文字サイズ
• メニューの段組
• ヘッダーの文字色

を変更するようにしてみた。

参考ページ

[1] terminology - What is the exact difference between fluid and responsive design? - User Experience Stack Exchange
[2] CSS3 @media Rule
[3] box-sizing－CSS3リファレンス