はじめに
コーディングを始めたばかりの頃、
「PC版は完璧！次はスマホ版だ！」と画面幅を狭めた瞬間、
さっきまで綺麗だったサイトが一気に崩れ落ちる——。
- 横スクロールバーが勝手に出る
- 画像がはみ出す
- レイアウトがバラバラ
スマホ表示を見るのが怖くなるほど、何度も心が折れかけました。
「また崩れてる…」
「私ってコーディング向いてないの？」
そんな気持ちにもなりましたが、
原因が分かってくると、あれほど地獄だったレスポンシブが
スッと理解できる瞬間が来たんです。
この記事では、私が実際にハマったレスポンシブ崩れの正体と
そこから抜け出すためにやったことをまとめています。
同じように悩んでいる人に届きますように。
最初の壁：PCで完璧なのにスマホで崩れまくる
最初に作ったLPでは、PCでは綺麗に表示できていたのに、
スマホで確認した瞬間、もはや 別サイトレベルの崩壊。
実際に起きていた崩れ
- 見出しが巨大化
- 画像が横にはみ出す
- ボタンが中央にならない
- 横スクロールが発生
- 文字がギュッと潰される
ディベロッパーツールで幅を変えると
いい感じに縮む場所もあれば、逆にどんどん大きくなって画面を突き抜ける場所もある。
「もう画面幅触りたくない…」
そんな気持ちで毎回ため息をついていました。
崩れていた本当の原因はこれだった
調べてみると、崩れの原因はひとつではなく
複数の小さなミスの積み重なりでした。
【原因①】PC前提でpxを固定しすぎていた
スマホは画面幅が狭いため、PCと同じpxのままだと
はみ出る・押しつぶされる・巨大化する の三拍子。
実際のミス例
width: 600px;→ スマホ幅では絶対入らないpadding: 80px;→ 余白が大きすぎて中身が潰れる- 見出しのpxをそのまま使って特大化
これで理解したこと
- 余白は
rem - 横幅は
%・max-width - 大きいpxはPC用で切り替える
まとめ：pxは強すぎるのでスマホと相性が悪い
【原因②】画像のwidth指定が甘かった
画像に width: 100% を付け忘れると、
PC用の大きな画像がスマホにそのまま登場して暴走。
結果
- 横スクロールバー
- セクションごと押し広げられる
- レイアウト崩壊
その後の対策
img { width:100%; height:auto; }- 親に
max-width object-fitで見た目調整
まとめ：画像は親の言うことを聞かない
【原因③】余白を全部pxで書いていた
初心者の頃は気づきにくいけど、
余白のpxはレスポンシブ崩れの主犯格。
例
- PCでは程よい
padding: 40px 80px;
→ スマホでは画面の半分を余白が占領
改善点
- セクション間の余白はPC/SPで別管理
- 余白は
remに - スマホだけ余白を少なめに
まとめ：rem＋スマホ用に余白を軽くするだけで一気に安定する
【原因④】メディアクエリの書き方が間違っていた
よくあった間違い
max-widthとmin-widthを逆に書く- CSSの読み込み順がぐちゃぐちゃ
- セレクタが複雑でスマホ用が勝てない
正しく理解できたこと
max-width: 768pxは 768pxまで（スマホ）min-width: 768pxは 768pxから（PC）- 768pxは両方に当たるので
→ 厳密に分けるなら 767 / 768 が安全 - CSSは下に書かれたものが優先される。
まとめ：「メディアクエリは767/768で区切る」と「下に書いた方が勝つ」
そこからどう乗り越えたのか
原因が分かってからは、
ひとつずつ改善することで崩れが激減しました。
【改善①】pxをやめて％・vw・remを使うようにした
柔らかい単位（相対単位）に変えるだけで、
画面幅に合わせて自然にレイアウトが動くように。
【改善②】画像は絶対にwidth: 100%
画像の暴走が止まり、横スクロールのほぼ全てが解決。
【改善③】スマホファーストに切り替えた
最初からスマホの幅に合わせて作ることで、
調整の連鎖が止まり、PCへの拡張が楽になった。
【改善④】メディアクエリのルールを統一
- スマホファースト →
min-widthで拡張 - CSSは「狭い → 広い」順で記述
- セレクタはシンプルに
どのCSSが当たっているか迷わなくなり、バグが激減。
レスポンシブが苦手だった私でもできた理由
最終的には、
スマホ表示の仕組みを理解できたこと が大きかったです。
- flexがどう縮むか
- widthが何に対して効くか
- margin/paddingの増え方
- フォントサイズの変化
これが分かるようになると、
あれほど絶望していたスマホ画面でも
「お、ちゃんと動いてる！」と思えるようになりました。
今、同じようにレスポンシブで悩む人へ
レスポンシブは初心者にとって
最初の大きな壁です。
でも、それは
あなたが下手だからではなく、
スマホ表示にクセがあるだけ。
私も何度も心折れかけましたが、
今ではLPもWordPressも普通にレスポンシブ対応できます。
ゆっくり理解していけば、
必ず「分かった！」の瞬間が来ます。
焦らず、一緒に進んでいきましょう。
コメント