レスポンシブ
初級読み方：レスポンシブ｜英語：Responsive
画面の大きさに合わせてレイアウトを自動調整するデザイン手法だよ。
やさしい説明
レスポンシブとは、画面サイズに応じてレイアウトが自動で変わるデザインのことです。
同じWebサイトをスマホで見ると1列表示、PCで見ると3列表示——このように画面に合わせて形が変わるのがレスポンシブデザインです。
メディアクエリ、Flexbox、Grid、相対単位（%、rem）などを組み合わせて実現します。今のWebサイトはほぼ全てレスポンシブです。
具体例・使い方
/* PCでは3列、スマホでは1列（Gridで自動対応） */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
/* 画像がはみ出さないようにする */
img { max-width: 100%; height: auto; }
/* コンテナを画面幅に収める */
.container {
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: 0 16px; /* スマホの左右余白 */
}レスポンシブの実現手法
- メディアクエリ — 画面幅に応じてCSSを切り替える。
@media (max-width: 768px) { ... } - Flexbox — 横並びを画面幅に応じて折り返す。
flex-wrap: wrapと組み合わせる - CSS Grid —
auto-fitやminmax()で列数を自動調整できる - 相対単位 —
%（親要素基準）、vw（画面幅基準）、rem（ルート文字サイズ基準） - clamp() —
font-size: clamp(14px, 2vw, 18px)で画面サイズに応じて滑らかにサイズ変化
モバイルファーストで書く
/* モバイルファースト: スマホ用をベースに書く */
/* スマホ（デフォルト） */
.cards {
display: flex;
flex-direction: column;
gap: 16px;
}
/* タブレット以上 */
@media (min-width: 768px) {
.cards {
flex-direction: row;
flex-wrap: wrap;
}
.cards > * { width: calc(50% - 8px); }
}
/* PC以上 */
@media (min-width: 1024px) {
.cards > * { width: calc(33.33% - 11px); }
}Googleは「モバイルファーストインデックス」を採用しており、スマホ版のコンテンツを優先して評価します。スマホ表示を後回しにするのではなく、最初から設計しましょう。
いつ使う？
Webサイトを作るときは常にレスポンシブを意識します。スマホからのアクセスが7割以上のサイトも多く、スマホで見やすいことは必須です。採用・ポートフォリオサイトなどを作る際もレスポンシブ対応は必須です。
間違いやすいポイント
❌ viewport metaタグを書き忘れる
メディアクエリを書いてもviewport設定がないとスマホで正しく機能しません。HTMLの <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; } を指定すると、画面幅に合わせて画像が縮小されます。
関連用語
📖 関連レッスン
レッスンを見る →