描画領域の横幅によって適用スタイルを分ける方法 レスポンシブWebデザインは、閲覧者が利用している端末の画面サイズに応じて適用スタイルを変化させることで実現します。変化させるのはCSSだけなので、HTMLは共通です。そのため、端末の種類別にページを分割する必要はなく、単一のページだけであらゆる端末向けのデザインを提供できます。 上図の左側のように描画領域の横幅が広い場合には、段組を作るスタイルを適用することで広い横幅を有効に活用します。上図の右側のように閲覧領域の横幅が狭い場合には、段組を解除するスタイルを適用することで狭い横幅でも見やすさが維持できるようにします。 CSS3のメディアクエリでレスポンシブWebデザインを作る レスポンシブWebデザインは、CSS3で追加されたメディアクエリ(Media Queries)という仕組みを利用して作ります。このメディアクエリを使うと、指定した条件