Webサイトを作っていると、「PCではきれいなのにスマホで見ると崩れてしまう」「思った通りに幅や高さが揃わない」…そんな経験をされた方も多いのではないでしょうか。
私自身も最初のころは、レスポンシブ対応に苦手意識を持っていました。
FlexboxやGrid、positionの違いが分からず、何度もやり直したことがあります。
でも一度「レイアウトの基礎」を整理して理解できると、コードがシンプルになり、余計な試行錯誤がぐっと減りました。
このページでは レイアウトとレスポンシブ設計の基本 をまとめています。
「なぜ崩れるのか」を知りたいときや、作業の道しるべとして活用してくださいね。
CONTENTS
要素サイズとレスポンシブ対応
- 要素のサイズを完全にレスポンシブにする
- コンテンツが少ないページでも1画面分の高さを持たせる
モダンレイアウトの基本
- Flexboxの基礎
- Gridレイアウトの基礎
positionとz-indexの整理
- positionの種類（static / relative / absolute / fixed / sticky）
- z-indexの基本と重なり順の理解
メディアクエリの書き方と考え方
- メディアクエリの基本（768pxだけじゃない！）
- レスポンシブ文字サイズの考え方
セクション設計の基本
- セクション構造と設計の考え方
おわりに
レイアウトやレスポンシブ対応は、初心者がつまずきやすい部分でもあり、同時に“慣れると一気に作業が楽になる”部分でもあります。
「なぜ崩れるのか」を理解できれば、見た目を整えるのも修正するのもずっとスムーズになりますよ。