目次
- はじめに｜PCは完璧なのに、スマホで全部ズレるやつ
- CSSで画面幅に対応するとは何か
- 画面幅対応でまず避けたいNG例
- 画面幅対応の基本は「幅を固定しない + 上限を付ける」
- これが効く理由（かみ砕き版）
- %（パーセント）で画面幅に対応する
- どんな時に向いてる？
- vw（ビューポート幅）で画面幅に対応する
- vwの落とし穴（横スクロールの原因になりやすい）
- max-widthで「広がりすぎ」を止める（定番の型）
- 余白（padding）が地味に効く
- 画像がはみ出す問題は、まずこれ
- これで何が起きる？
- flexの横並びがスマホで詰む時の対処
- もう一つの解決策：折り返す
- メディアクエリで画面幅ごとに切り替える
- ブレイクポイントの目安（よく使うライン）
- スマホだけ効かない時はviewportも確認
- 横スクロールが出る原因と対策（実務で一番困るやつ）
- よくある原因
- とりあえず入れておくと事故が減るやつ
- DevToolsで横スクロールの犯人を特定する手順
- 手順
- フォントサイズも画面幅とセットで調整する
- まずはこれでOK｜初心者におすすめの最小構成テンプレ
- よくある質問
- 画面幅対応はSEOに影響しますか
- メディアクエリは必須ですか
- まとめ｜画面幅対応は「固定を避けて、上限で止める」が軸
はじめに｜PCは完璧なのに、スマホで全部ズレるやつ
Webサイトを作っていると、必ずぶつかるのがこれです。
- PCだときれいなのにスマホで横スクロールが出る
- 画面幅が狭いと文字や画像がはみ出す
- どのCSSを書けば「画面幅に対応」できるのか分からない
私も最初の頃、width: 100% を入れたのに横スクロールが消えなくて、
「もう何が何だか…」ってなったことがあります。
結局、原因は 画像じゃなくて、ボタンに入れた padding と固定幅の組み合わせ でした。
こういうの、見た目だけだと気づきにくいんですよね。
この記事では「css 画面幅 対応」で検索してきた人が、
今日中にスマホ崩れと横スクロールを直せるように、基本から実務の潰し方までまとめます。
CSSで画面幅に対応するとは何か
スニペット向けに一文でまとめます。
CSSで画面幅に対応するとは、画面サイズに合わせて要素の幅や並びを変え、はみ出し（横スクロール）や崩れを起こさないようにすることです。
やることは意外とシンプルで、柱は3つです。
- 固定幅を避ける（必要なら上限だけ付ける）
- 相対単位（% / vw など）を使う
- 必要なところだけメディアクエリで切り替える
画面幅対応でまず避けたいNG例
これ、最初にやりがちです。
.container {
width: 1000px;
}PCならそれっぽく見えます。
でもスマホは幅が足りないので、はみ出して横スクロールになりやすい。
「固定幅＝全部ダメ」ではないですが、
全体の箱に固定幅を置くのは、トラブルの入口になりがちです。
画面幅対応の基本は「幅を固定しない + 上限を付ける」
実務で一番出番が多いのは、この形です。
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}これが効く理由（かみ砕き版）
width: 100%で小さい画面でも縮むmax-widthで大きい画面でも広がりすぎないmargin: 0 autoで中央寄せになる
「スマホは縮む、PCは見やすい幅で止まる」。
このバランスが作れます。
%（パーセント）で画面幅に対応する
.container {
width: 100%;
}どんな時に向いてる？
- 親の中で素直に伸び縮みしてほしいとき
- レイアウト崩れを減らしたいとき
%は「親要素に対して何%」です。
だから親が狭ければ一緒に狭くなります。
vw（ビューポート幅）で画面幅に対応する
.box {
width: 80vw;
}vwは「画面の幅そのもの」に対して割合指定です。
100vw= 画面幅ぴったり80vw= 画面幅の80%
vwの落とし穴（横スクロールの原因になりやすい）
100vw はスクロールバー分まで含む環境があり、
結果として ちょいはみ出し → 横スクロール の原因になることがあります。
「全幅にしたい」なら、まずはこれが安全です。
.full {
width: 100%;
}どうしてもvwが必要な場面（演出や比率維持）だけに絞ると、後で楽になります。
max-widthで「広がりすぎ」を止める（定番の型）
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 16px;
}余白（padding）が地味に効く
スマホで左右ギリギリまで詰まると読みにくいので、
padding を入れておくと全体が落ち着きます。
画像がはみ出す問題は、まずこれ
スマホ崩れの犯人、画像の確率が高いです。
img {
max-width: 100%;
height: auto;
}これで何が起きる？
- 画像は親要素より大きくならない
- 縦横比を保ったまま縮む
「画像が画面幅を突き抜ける」系は、まずここから。
flexの横並びがスマホで詰む時の対処
PCで横並び → スマホで縦並び。これは王道です。
.list {
display: flex;
gap: 16px;
}@media (max-width: 768px) {
.list {
flex-direction: column;
}
}もう一つの解決策：折り返す
「縦並びにしたくないけど詰む」なら、折り返しが便利です。
.list {
display: flex;
flex-wrap: wrap;
gap: 16px;
}メディアクエリで画面幅ごとに切り替える
細かく調整したいときに使います。
@media (max-width: 768px) {
.container {
padding: 0 16px;
}
}ブレイクポイントの目安（よく使うライン）
- 1024px：タブレット付近
- 768px：スマホ付近
- 480px：小さめスマホ付近
「全部の幅に完璧対応」より、
崩れやすいポイントだけ直すほうが現場では続きます。
スマホだけ効かない時はviewportも確認
これが無いと、メディアクエリが期待通りに動かないことがあります。
<meta name="viewport" content="width=device-width, initial-scale=1.0">「スマホだけCSSが効かない」「ブレイクポイントがズレる」時はまずこれ。
横スクロールが出る原因と対策（実務で一番困るやつ）
横スクロールは、だいたいこのどれかです。
よくある原因
- 固定幅（
width: px）が残っている - 画像・動画・iframeがはみ出している
100vwの使いすぎで微妙にはみ出しているpositionで画面外に飛んでいる（左右に）- 長い英数字やURLが折り返されない
とりあえず入れておくと事故が減るやつ
* {
box-sizing: border-box;
}paddingやborderを含めたサイズ計算になり、
「思ったより幅が大きい」事故が減ります。
DevToolsで横スクロールの犯人を特定する手順
横スクロールの直し方は「勘」だと沼ります。
手順でやると早いです。
手順
- F12 → Elements
bodyと、怪しそうな親要素を順にクリック- 右側の Computed で width を見る
- 画面幅より大きい要素があれば、それが犯人候補
さらに、視覚的に見つけたいなら一時的にこれを当てます。
* {
outline: 1px solid rgba(255, 0, 0, 0.25);
}「どこがはみ出してるか」が目で追えます。
フォントサイズも画面幅とセットで調整する
文字が大きすぎたり小さすぎたりすると、
結果的に崩れに見えます。
body {
font-size: 16px;
line-height: 1.7;
}
@media (max-width: 768px) {
body {
font-size: 15px;
}
}ちょい下げるだけで、読みやすさが変わります。
まずはこれでOK｜初心者におすすめの最小構成テンプレ
迷ったら、いったんここからで十分です。
* {
box-sizing: border-box;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 16px;
}
img {
max-width: 100%;
height: auto;
}
@media (max-width: 768px) {
.list {
flex-direction: column;
}
}「スマホ崩れ」「横スクロール問題」の多くは、これで減ります。
よくある質問
画面幅対応はSEOに影響しますか
CSSをこう書いたから順位が上がる、みたいな話はありません。
ただ、スマホで読みづらい・操作しにくいと離脱しやすくなります。
結果として、評価に響くことは普通にあります。
メディアクエリは必須ですか
基本の「width: 100% + max-width」と画像対応だけでも、
かなりの崩れは防げます。
細かい見た目を整えたい時にメディアクエリを足す、くらいでOKです。
まとめ｜画面幅対応は「固定を避けて、上限で止める」が軸
CSSで画面幅に対応するなら、まずこれです。
- 固定幅を避ける
%やvwを使う（vwは使いすぎ注意）max-widthで広がりすぎを止める- 画像は
max-width: 100%を入れる - 必要なところだけメディアクエリで切り替える
- 横スクロールはDevToolsで犯人を特定して潰す
「css 画面幅 対応」で検索してきたなら、
まず width: 100% + max-width を入れて、画像対応を入れてください。
それだけでも、レイアウトはかなり落ち着きます。