レスポンシブ
初級読み方：レスポンシブ｜英語：Responsive
画面の大きさに合わせてレイアウトを自動調整するデザイン手法だよ。いつ使う？ スマホ・タブレット・PCなど、いろんな画面サイズで見やすいサイトを作るときに使うよ。今はほぼ全てのサイトがレスポンシブ対応しているよ。間違いやすいポイント: viewport metaタグを書き忘れるとスマホでPC表示のまま縮小されるよ。また、幅をpx固定にすると画面からはみ出すから、%やmax-widthを使おう。
やさしい説明
レスポンシブとは、画面サイズに応じてレイアウトが自動で変わるデザインのことです。
同じWebサイトをスマホで見ると1列表示、PCで見ると3列表示——このように画面に合わせて形が変わるのがレスポンシブデザインです。
メディアクエリ、Flexbox、Grid、相対単位（%、rem）などを組み合わせて実現します。今のWebサイトはほぼ全てレスポンシブです。
具体例・使い方
/* PCでは3列、スマホでは1列 */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
/* 画像がはみ出さないようにする */
img { max-width: 100%; height: auto; }いつ使う？
Webサイトを作るときは常にレスポンシブを意識します。スマホからのアクセスが7割以上のサイトも多いので、スマホで見やすいことは必須です。
間違いやすいポイント
❌ viewport metaタグを書き忘れる
メディアクエリを書いてもviewport設定がないとスマホで効きません。headに <meta name="viewport" content="width=device-width, initial-scale=1.0"> を必ず書きましょう。
❌ 固定幅（px）だけでレイアウトを作る
width: 1200px のような固定値だとスマホではみ出します。max-width: 1200px; width: 100%; のように相対値と組み合わせましょう。
よくある疑問
Q: モバイルファーストとは？
A: まずスマホ向けのデザインを作り、画面が大きくなるにつれてレイアウトを変える手法です。CSSはmin-widthのメディアクエリで書きます。
Q: レスポンシブ対応の基本は？
A: ①viewport metaタグを書く ②幅をpx固定にしない（%やmax-widthを使う）③メディアクエリでレイアウトを切り替える、の3つです。
Q: 画像をレスポンシブにするには？
A: img { max-width: 100%; height: auto; } を指定すると、画面幅に合わせて画像が縮小されます。
関連用語
📖 関連レッスン
レッスンを見る →