「レスポンシブ」とは — 1つのページで全部の画面に対応する考え方

求人や案件の説明に必ず出てくる言葉です。「スマホ対応」とほぼ同じ意味で使われますが、正確には作り方の名前です。

定義：1つのHTMLで、どの画面にも対応する

レスポンシブとは、パソコン用とスマホ用のページを別々に作るのではなく、1つのページがそのときの画面幅に応じて見た目を変える作り方のことです。responsive は「反応する」という意味です。

昔は、スマホ用に別のURL（m.example.com など）を用意する方法もありました。いまはほとんど使われません。ページが2つあると、更新を2回しなければならず、管理が大変だからです。

レスポンシブを支える3つの要素

• viewport の指定 … スマホに「実際の幅で表示して」と伝える1行
• 伸び縮みするレイアウト … 幅を固定せず、% や max-width で作る
• メディアクエリ … 特定の幅を境に、指定を切り替える

この3つが揃って初めてレスポンシブになります。メディアクエリだけ書いても、viewport が無ければスマホでは縮小表示されてしまいます。

実際に何が変わるのか

画面が狭くなったときによく行う変更は、だいたい決まっています。

• 横並びを縦積みにする
• 文字を少し小さくする（あるいは大きくする）
• 余白を詰める
• メニューをハンバーガーボタンにたたむ
• 表を横スクロールできるようにする

「モバイルファースト」という言葉

セットでよく聞くのがこの言葉です。狭い画面向けのCSSを基本として書き、広い画面向けの指定をあとから足していく作り方を指します。

逆（パソコンを基本にして、狭いときに打ち消す）でも作れますが、モバイルファーストのほうが打ち消しが少なくて済むため、CSSがすっきりします。とはいえ学習中はどちらでも構いません。作りやすいほうで始めてください。

よくある誤解

• 「スマホ用のCSSファイルを別に作る」ではない … 同じCSSの中で切り替えるのが基本
• 「機種ごとに指定する」ではない … 機種ではなく幅で切り替える
• 「切り替えの幅は768pxと決まっている」ではない … 崩れたところで決めればよい

最後の点は特に大事です。有名な数字を暗記するより、ブラウザの幅をゆっくり狭めて、崩れた瞬間の数字を採用するほうが、実際の見た目に合います。