*1 768ピクセルでは、ネットブックのようなタブレット以外の端末も指定範囲に入ってしまう。しかし、レスポンシブWebデザインのコンセプトはデバイスベースではなく、ウィンドウサイズベースでデザインを調整することだ。あくまでウィンドウサイズを基準に、そのウィンドウサイズに適したレイアウトを提供する。 1. ピクセルでデザインして%に変換する レスポンシブWebデザインは、width, padding, margin を%単位で指定するリキッドデザインの一種だ。 width, padding, marginを%単位で指定してレイアウトを組めればいいのだが、実際には非常に難しい。そこで、一度ピクセル単位でレイアウトを指定してから、width, padding, margin を % に変更していこう。 たとえば、Webページ全体の幅であるbody要素が960px、その子要素であるheader要素
![スマホ対応の新潮流「レスポンシブWebデザイン」とは? (3/3)](https://cdn-ak-scissors.b.st-hatena.com/image/square/efffeeb54c271b4f9ee2ef09755ed9591400e669/height=288;version=1;width=512/https%3A%2F%2Fascii.jp%2Fimg%2F2011%2F06%2F17%2F1577000%2Fl%2F5317cbbbbe74d715.jpg)