レスポンシブ対応の基本を学ぶ

レスポンシブWebデザインは、スマートフォン、タブレット、パソコンなど異なる画面でも、同じ内容を読みやすく操作できるようにする考え方です。端末ごとに別のHTMLを作ることではありません。

小さい画面の基本スタイルから書き、必要な幅でレイアウトを広げるモバイルファーストで進めます。

画面幅を正しく扱う

HTMLのheadにviewportを指定し、画像が親要素からはみ出さない基本スタイルを用意します。

次の画像は、「画面幅を正しく扱う」で扱うコードや構成をブラウザで表示した結果です。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

img {
 max-width: 100%;
 height: auto;
 vertical-align: middle;
}

小さい画面のCSSから書く

スマートフォンでは、横並びを無理に縮めず、読む順番を保って縦へ並べます。文字と操作領域に必要な幅を確保します。

次の図では、「小さい画面のCSSから書く」の仕組みや関係を確認できます。

.profile {
 display: grid;
 gap: 24px;
}

必要な幅でレイアウトを切り替える

同じHTMLを使い、広い画面ではカードを3列に配置しています。

スマートフォンでは、文章と操作要素が窮屈にならないよう1列へ切り替えます。

メディアクエリは、画面幅などの条件に応じてCSSを追加する仕組みです。特定の端末名ではなく、内容が窮屈になる位置を基準にブレークポイントを決めます。

@media (min-width: 768px) {
 .profile {
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
 }
}

表示を消す前に優先順位を考える

画面が狭いという理由だけで重要な文章や操作を非表示にしません。並び順、折り返し、余白、文字サイズを調整し、内容と機能を保つことを優先します。

次の図では、「表示を消す前に優先順位を考える」の仕組みや関係を確認できます。

ホバーできない端末もあるため、ホバーだけで情報や操作を提供しないでください。

複数の幅と実機で確認する

1. 320px前後から少しずつ画面幅を広げる
2. 横スクロール、文字の重なり、画像の変形を確認する
3. レイアウトが窮屈になる幅でCSSを調整する
4. キーボードとタッチ操作を確認する
5. 可能であれば実際のスマートフォンでも確認する