レスポンシブWebデザインコーディング術

1-2. レスポンシブデザインの種類

メディアクエリを使ったレスポンシブWebデザインのレイアウトパターンを紹介します。レスポンシブWebデザインは要素を伸び縮みさせるだけではなく、配置の方法を変えたり、カラム数を変えるなど様々なパターンがあります。今回はよく使うレイアウトのパターン4つをまとめました。

  • HTML・CSS
  • デザインの考え方
  • Webデザイン

公開日:2019/07/08最終更新日:2019/07/08

スポンサーリンク

1.要素の位置や大きさを変えるレイアウト

全体のレイアウトは変えず、各要素の配置や文字の大きさなどを調整してレスポンシブ対応します。

どのデバイスでも同じ情報が訴求できるメリットがあります。要素が多いとレイアウトの調整がしづらくなってしまうのでキービジュアルなどの要素が少ない部分に使われていることが多いです。

2.カラムの配置が変わるレイアウト

PCでは画像とテキストが横並びになっていて、スマホでは縦並びになるレイアウトです。

よく画像とテキストが交互に左右で入れ替わっているパターンを見かけます。

3.フレックスボックス

フレックスボックスはブログの記事一覧などリストを表示する時によく使われるレイアウトです。

ブラウザサイズによって横並びのカラム数が変わります。実装には`display: flex`を用います。

4.グリッドレイアウト

グリッドレイアウトは今回紹介した中では1番新しい仕様になります。

今までのWebサイトのレイアウトとは異なり、かなり柔軟にレイアウト構造を組むことができます。縦軸と横軸でグリッド幅を定義しそれに合わせて要素を配置していきます。対応ブラウザも増えてきていて実用的になりつつあります。

ブラウザ対応状況(Can I use)

 

以上、レスポンシブWebデザインのレイアウトを4パターン紹介しました。

次回からは実際にこのレイアウトをHTMLとCSSで実装していきます。

理解度チェック

スポンサーリンク

このレッスンの著者