レスポンシブWebデザインのコーデングにあたって

デバイスごとにCSSを用意する
レスポンシブWebデザインは、PC、タブレット、スマートフォンなどの複数デバイスに対応させる制作手法です。複数の異なる画面に応じて、ページのレイアウトやデザインをCSS側で調整して、Webサイトの表示を切り替えます。


新デバイスへの対応も容易
このような手法を選択しなければいけない背景としては、マルチデバイス化が大きく関係しています。複数のインターネット閲覧ツールがあるので、スマートフォンを主軸に据えながらも、タブレットやPCユーザーを取りこぼすわけにはいかないのです。

HTML側での作業は多くない
勘違いされがちなのですが、CSS3のメディアクエリを利用するからといって、HTML5で作らなければいけない、なんてこともありません。スマートフォン/タブレット/PC用と3つのパターンを作成する場合は、次のような順序でCSSを記述します。原則、HTML側での作業はあまり多くは発生しません。