異なる画面サイズに対応するレスポンシブWebデザインのエッセンス

Web制作に関わる方なら誰でも知っているW3C。このサイトを開いてウィンドウサイズを小さくすると、480ピクセルを境にガラっとレイアウトが変わります。このように、ウィンドウサイズに応じてレイアウトを変える手法を「レスポンシブWebデザイン」と呼びます。

スマホ向けのサイト対応のひとつの手法として注目されているレスポンシブWebデザインですが、PC向けのコンテンツを流用しただけでは「スマホ最適化」ではなく、あくまでも「スマホ対応」にすぎません。
その一方、異なるサイズの端末があふれている状況において、「リキッドレイアウト」が思い起こされる流動グリッドと画像の可変などの「レスポンシブWebデザイン」のアプローチは、スマホ向けのコンテンツを制作する上でおさえておきたいスキルです。
このセッションでは、レスポンシブWebデザインのエッセンスにフォーカスします。