レスポンシブ対応でよくある失敗例とその直し方7選！

2026年3月29日2026年3月30日

Webサイトをコーディングしていると、PCではきれいに見えていたのに、スマホで確認した瞬間に「なんか崩れてる…」となることはありませんか？

文字が思った以上に大きくて読みにくい。画像が横にはみ出してスクロールが出る。改行の位置が不自然で、なんとなく見づらい。余白のバランスが崩れて、窮屈に見える。
レスポンシブ対応では、こうした細かい違和感が積み重なって、全体の見た目や読みやすさに影響しやすくなります。

私自身も最初の頃は、崩れるたびにメディアクエリを追加して、その場しのぎで直していました。ですが実務でコーディングに触れる中で感じたのは、レスポンシブ対応は「崩れたあとに頑張って直す」よりも、「最初から崩れにくい書き方にしておく」方がずっと大事だということです。

この記事では、レスポンシブ対応でよくあるつまずきポイントを7つに分けて、原因と解決方法を初心者向けにわかりやすく解説します。

①改行位置が不自然になる

PCではいい感じに見えていたのに、スマホでは変な位置で改行されて読みにくい。
これもよくある悩みです。

特に最初の頃は、見た目を整えたくて <br> をたくさん使いたくなるのですが、本文まで固定改行を増やすと、画面幅が変わったときに一気に不自然になりやすいです。

本文はbrで改行を固定しすぎない

本文のように文章量が多く、後から修正や追記が入る場所では、改行を固定しすぎない方が安全です。

PCではちょうどよくても、スマホでは1行が短くなるので、固定した改行がかえって読みづらさの原因になります。
特に説明文やブログ記事本文では、見た目を整えるためだけに br を多用しない方が、運用しやすいです。

行幅と段落で読みやすさを整える

改行位置を無理に指定しなくても、行幅と段落の設計でかなり読みやすさは改善できます。

.prose{
  max-width: 65ch;
}

ch を使って行幅をある程度制御すると、自然な折り返しでも読みにくさが減ります。

また、同じ段落の中で無理に改行を増やすより、意味の切れ目ごとに段落を分けて、段落間に余白を持たせた方がスマホでは読みやすいです。

文章の読みやすさは、改行の位置よりも、行幅・行間・段落の整理で決まることが多いと感じます。

キャッチコピーはspanで分けて制御する

ただし、ファーストビューのコピーやメインビジュアルの短いテキストなど、「この位置で見せたい」が重要な場所もあります。
そういう場合は、br で固定するより、テキストを分割してCSSで制御する方が後から調整しやすいです。

<p class="catch">
  <span class="catch__line">はじめてでも大丈夫。</span>
  <span class="catch__line">一緒に整えていきましょう。</span>
</p>

.catch__line{
  display: inline;
}
@media (max-width: 767px){
  .catch__line{
    display: block;
  }
}

これなら、スマホだけ改行する、PCではつなげる、といった調整がしやすくなります。

②画像がはみ出して横スクロールが出る

スマホで横スクロールが出てしまうと、一気に「崩れている感」が強くなります。
その原因としてかなり多いのが、画像のはみ出しです。

画像まわりは、ページごとに直していくより、最初に共通ルールを入れておく方が圧倒的に楽です。

imgに最初から共通ルールを入れておく

画像の基本として、まず入れておきたいのが次のルールです。

img{
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

max-width: 100%; は、親要素の幅を超えないための基本です。
height: auto; は画像の比率を崩さないために必要です。
vertical-align: bottom; は、画像下に出る微妙な隙間の対策としてよく使われます。

この3つを最初に入れておくだけでも、画像まわりの事故はかなり減ります。

figureのデフォルト余白にも注意する

CMSを使ったサイトやブログ記事では、画像が figure タグで囲まれていることがあります。
このとき、ブラウザやテーマの初期スタイルで margin が入っていて、「この画像だけ余白がおかしい」という状態になることがあります。

figure{
  margin: 0;
}

一度余白をリセットしてから、必要ならデザインとして余白を付け直す方が、見た目を揃えやすくなります。

③余白のバランス崩れ

レスポンシブで意外と見落としやすいのが、余白の違和感です。
文字サイズや画像サイズは気にしていても、左右の余白や要素間の間隔が崩れて、なんとなく窮屈に見えることがあります。

コンテナで左右の余白を先に決める

ページ全体の読みやすさを整えるために、まずコンテナのルールを決めておくと便利です。

.container{
  width: min(100%, 1100px);
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 768px){
  .container{
    padding: 0 24px;
  }
}

これがあると、スマホで端にくっつきすぎるのを防げますし、PCで横に広がりすぎるのも防げます。
ページ全体の基準ができるので、各パーツで無駄に余白指定を増やさずに済みます。

要素ごとにpaddingを増やしすぎない

コンテナがない状態で、各セクションや各ボックスにそれぞれ左右の padding を入れていくと、後から調整が複雑になりやすいです。

「ここだけ狭い」「ここだけ広い」というズレが起きやすくなるので、まずはページ全体の受け皿を作って、その上で必要な場所だけ差分を足す考え方の方が整えやすいです。

④スマホで文字が大きすぎる・読みづらい

PCで見たときはちょうどよく感じていたのに、スマホで確認すると文字が大きすぎて圧迫感が出る。
これはレスポンシブ対応でかなりよくあるつまずきです。

原因として多いのは、PCの見た目を優先して文字サイズを決め、そのままスマホにも適用してしまうことです。
特に見出しや補足テキストは、要素ごとにサイズを盛りたくなりやすいので、気づかないうちに全体がうるさく見えてしまうことがあります。

本文サイズはスマホ基準で決める

まず最初に決めたいのは、本文の基準サイズです。
スマホでは、本文は16px前後から考えると安定しやすいことが多いです。

body{
  font-size: 16px;
  line-height: 1.8;
}
@media (min-width: 1024px){
  body{
    font-size: 17px;
  }
}

本文の基準が決まると、見出しや注釈のバランスも取りやすくなります。
逆にここが曖昧だと、「なんとなく見づらい」を何度も繰り返しやすくなります。

見出しはサイズを増やしすぎない

見出しは目立たせたいので、ついサイズを大きくしたくなります。
でも、レスポンシブで崩れやすくなる原因のひとつは、見出しのサイズ差をつけすぎることです。

たとえば、本文が16pxなら、見出しは次のようなイメージから始めると大きく外しにくいです。

h1：28〜32px程度
h2：22〜28px程度
h3：18〜22px程度

もちろんデザインによって調整は必要ですが、最初から段階を増やしすぎない方が管理しやすくなります。

また、見出し感を出したいときは、サイズだけでなく太さや余白で見せるのも大切です。

h2{
  line-height: 1.4;
  margin: 2.2em 0 0.8em;
  font-weight: 700;
}

サイズだけで迫力を出そうとすると、スマホで窮屈になりやすいです。
太さや余白を使うと、見出しらしさを保ちながら崩れにくくできます。

clamp()は便利だけど万能ではない

最近は、clamp() を使って文字サイズを自然に変化させる書き方もよく使われます。

h2{
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.4;
}

ブレイクポイントごとに細かくサイズ指定を増やさなくていいので、とても便利です。
ただし、どんな場面でもこれだけで完璧に整うわけではありません。

あくまで「大きく崩れにくい状態を作るための方法」と考えて、必要に応じて余白やレイアウトも一緒に調整するのがおすすめです。

⑤ボタンやカードが画面幅に収まらない

スマホで見たときに、ボタンが不自然に大きかったり、カードが横にはみ出していたりすることがあります。
この原因としてよくあるのは、幅の固定値です。

widthの固定値を疑う

たとえば width: 400px; のように固定していると、スマホでは単純に収まりません。
PCではきれいに見えていても、画面幅の小さい端末ではすぐに崩れます。

必要に応じて width: 100%; や max-width を使い、親要素の中で自然に収まるようにしておく方が安全です。

flexやgridでも最小幅に注意する

flex や grid を使っていても、子要素の中身が長かったり、最小幅が大きすぎたりすると、結局スマホでははみ出すことがあります。

レイアウトだけでなく、中に入る文字量やボタンサイズも含めて確認することが大切です。
「displayを変えたから大丈夫」ではなく、実際にスマホ幅で見て収まっているかまで確認したいところです。

⑥メディアクエリを増やしすぎる

レスポンシブ対応でよくある大きな沼が、メディアクエリの増やしすぎです。
崩れるたびに修正を足していくと、その時は直ったように見えても、あとから別の場所に影響が出やすくなります。

ベースはスマホ想定で作る

基本は、まずスマホで無理なく見えるベースを作り、そのあと必要な部分だけPC向けに上書きする流れがおすすめです。

スマホで見やすい状態を先に作っておくと、後から広い画面に合わせて調整する方が考えやすいです。

上書きは差分だけにする

メディアクエリの中で何でもかんでも書き直すのではなく、本当に変える必要がある部分だけに絞ると、CSSが荒れにくくなります。

たとえば、本文サイズはそのままで、余白だけ変える。
あるいは、縦並びを横並びに変える。
このように「差分だけ」を意識すると、何がどこで効いているか分かりやすくなります。

横並びレイアウトがスマホで窮屈になる

PCではきれいに見えていたのに、スマホで確認するとカードや文字がギュッと詰まって見づらくなることがあります。
これは、PCで display: flex; の2カラムや3カラムにしていたレイアウトを、スマホでもそのまま残してしまうと起こりやすいです。

PCでは問題なくても、スマホでは1つあたりの幅がかなり狭くなるので、文字が何度も折り返したり、画像が小さくなりすぎたりして、一気に窮屈な印象になります。
レスポンシブ対応では、並べることよりも、スマホでも内容が読みやすいことを優先するのが大切です。

スマホでは縦並びに切り替える

横並びのレイアウトは、スマホではそのまま使うより、縦並びに戻した方が見やすくなることが多いです。
特にカードや紹介欄のように、文字や画像が入る要素は、1カラムにした方が読みやすさを保ちやすくなります。

.cards{
  display: flex;
  gap: 24px;
}.card{
  width: 33.333%;
}@media (max-width: 767px){
  .cards{
    flex-direction: column;
  }  .card{
    width: 100%;
  }
}

横並びを残すなら文字量と余白も見直す

デザインによっては、スマホでも2カラムを残したい場合があります。
そのときは、レイアウトだけでなく、タイトルの長さや余白の広さも一緒に見直すことが大切です。

並んでいても、中身が詰まりすぎて読みにくければ意味がありません。
スマホで横並びを使う場合は、「収まるか」ではなく「読みやすいか」で判断するのがおすすめです。

レスポンシブ対応で最初に入れておきたいCSSの基本形

最後に、ここまでの内容をふまえて、最初に入れておくと崩れにくくなりやすい基本形をまとめます。

body{
  font-size: 16px;
  line-height: 1.8;
}
@media (min-width: 1024px){
  body{
    font-size: 17px;
  }
}.container{
  width: min(100%, 1100px);
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 768px){
  .container{
    padding: 0 24px;
  }
}img{
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}figure{
  margin: 0;
}.prose{
  max-width: 65ch;
}h2{
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.4;
  font-weight: 700;
  margin: 2.2em 0 0.8em;
}