目次
はじめに
スマホ・タブレット・PCなど、どんな画面でも快適に見られるサイトの裏には「レスポンシブデザイン」があります。この記事では、その仕組みと最低限の作り方（viewport設定＋メディアクエリ）を、コード付きでやさしく解説します！
レスポンシブデザインとは？
画面サイズに合わせてレイアウトを自動で調整する設計手法です。1つのHTMLでどの端末にも対応でき、ユーザー体験（UX）が向上します。
なぜ必要？
- モバイルユーザーが多数派 → どの端末でも最適表示が必要
- SEOに有利 → Googleはモバイル対応サイトを優先評価
- 管理がラク → PC版・スマホ版を別々に作らず一元管理できる
① まずviewportを設定する（最重要）
これが無いとスマホで正しく表示されません。<head> 内に必ず入れます。
<meta name="viewport" content="width=device-width, initial-scale=1.0">② メディアクエリで画面幅ごとにスタイルを変える
/* 画面幅が768px以下のときだけ適用 */
@media (max-width: 768px) {
.container {
flex-direction: column; /* スマホでは縦並びに */
}
}@media 〜 で「この画面幅のときはこう表示」を指定できます。
よく使うブレイクポイントの目安
| 端末 | 画面幅の目安 |
|---|---|
| スマホ | 〜768px |
| タブレット | 768〜1024px |
| PC | 1024px〜 |
モバイルファーストで書くと、ぐっとラクになる
メディアクエリには「画面が小さい方から書く（min-width）」モバイルファーストと、「大きい方から書く（max-width）」PCファーストの2通りがあります。私のおすすめはモバイルファーストです。
/* まずスマホの見た目を書く（土台） */
.box { font-size: 14px; }
/* 画面が広がったら上書きしていく */
@media (min-width: 768px) {
.box { font-size: 16px; }
}スマホ表示を“土台”にして、広い画面で必要な分だけ足していく書き方だと、コードがシンプルになり上書きの衝突も減ります。実務でもこちらが主流です。
つまずきポイント：viewportを入れたのに崩れる
「viewportを設定したのに横スクロールが出る…」というのは初心者がほぼ通る道です。原因はたいてい画面幅をはみ出す要素。私がまず確認するのは次の2つです。
- 画像に
img { max-width: 100%; }を当てているか - 横幅の広い表（table）や、
widthを固定したボックスがないか
原因の要素を見つけたいときは、一時的に * { outline: 1px solid red; } を当てると、はみ出している箇所が一目で分かりますよ。
まとめ
- viewportの設定を忘れない（これが第一歩）
- メディアクエリで画面幅ごとにスタイルを切り替える
- まずはスマホ表示を意識して作るのがおすすめ
レスポンシブ対応はこれからのWeb制作で必須のスキルです。制作で詰まったら、ポートフォリオやココナラものぞいてみてくださいね。
