このページの本文へ

CSS GridとFlexboxで驚くほど簡単にレスポンシブレイアウトを実装する方法

2018年03月16日 08時00分更新

記事提供:WPJ

  • この記事をはてなブックマークに追加
本文印刷

レスポンシブWebデザインの実装に欠かせないメディアクエリを使わずに、CSS GridとFlexboxでレスポンシブなレイアウトを実装する方法を紹介します。

レスポンシブなレイアウトにはメディアクエリが欠かせないわけですが、CSS GridやFlexboxを使えばメディアクエリなしでもレスポンシブなレイアウトが可能です。メディアクエリが全くいらなくなるということはないと思いますが、CSS GridとFlexboxを使えば、メディアクエリの記述を減らす方法があります。しかもコンテンツの幅に合わせて中身のレイアウトを調整するようなエレメント・クエリ的な使い方も、ある程度なら実現できます。

応用すれば今後のレスポンシブなレイアウトのCSSの組み方を変えてしまうような方法です。

※デモはFirefox 58.0.2、Chrome 64.0.3282.140、Safari 11.0.3でテストしています。

この記事をWPJのサイトで読む

Web Professionalトップへ

Web Professionalトップページバナー

WebProfessional 新着記事

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く