レスポンシブデザイン とは？

今はスマートフォンでWebを見る人がとても多いよね。PC用の画面をそのままスマホで見ると文字が小さくて読めないし、ボタンも押しにくい。PC版とスマホ版を別々に作ると管理する場所が増えるけど、レスポンシブなら1つのURLと同じHTMLで、見た目だけを画面幅に合わせて変えられるんだ

レイアウトが切り替わる画面幅のことだよ。決まった標準値はなくて、たとえばTailwind CSSの既定値はsmが640px以上、mdが768px以上、lgが1024px以上。MDNも、特定の機種に合わせるより「コンテンツが崩れる幅」で決めるよう勧めているよ

まずスマホ向けの1カラムのレイアウトを作り、画面が広くなったら段組みを増やすなどして拡張する設計手法だよ。CSSではまずモバイル用のスタイルを書き、@media (min-width: 768px) のようにmin-widthでタブレット以上の追加スタイルを書く。小さい画面で何を優先して見せるかを先に決められるんだ

よくある原因はviewportのmetaタグの書き忘れだよ。これがないとモバイルブラウザはPC向けの広い幅で描画して縮小するから、メディアクエリも効かない。<meta name="viewport" content="width=device-width"> をheadに入れるのが第一歩だね

①ブラウザのDevTools（F12→デバイスツールバー）でスマホ表示をシミュレーション、②実機テスト（iPhone、Android、タブレット）、③BrowserStackやLambdaTestで多デバイス一括テスト。DevToolsのシミュレーションだけでは不十分で、実機で「指でタップできるか」「スクロールが自然か」を確認するのも大事だよ