スマホで崩れるレイアウト、その原因と設計のヒント

PCでは綺麗に表示されていたのに、スマホで見たらレイアウトがガタガタ…。
そんな経験、ありませんか？

「どこを直せばいいか分からない」
「スマホ用のCSSを書いたのに、うまくいかない」

この記事では、スマホで崩れるレイアウトの主な原因と、その設計のヒントを
初心者の方にもわかりやすくお届けします。

1. 横幅の指定が大きすぎる

スマホは画面が狭いため、大きすぎるwidth指定がはみ出しの原因になります。

.box {
  width: 800px;
}

スマホの画面幅はだいたい 375px〜430px 程度なので、
固定で大きな値を指定すると、はみ出したり、全体のバランスが崩れてしまいます。

.box {
  width: 100%;
  max-width: 600px;
}

このように、親要素に合わせた%指定＋上限をmax-widthで制限しておくと、
スマホでも無理なく収まるようになります。

2. marginやpaddingが広すぎる

余白の指定が大きすぎることで、要素同士が重なったり、画面外にはみ出すことがあります。

.section {
  padding: 100px 60px;
}

これをスマホでそのまま使うと、画面が窮屈になり、
思わぬ位置で改行されたり、意図しないズレが起きることも。

@media screen and (max-width: 768px) {
  .section {
    padding: 60px 20px;
  }
}

このように、親要素に合わせた%指定＋上限をmax-widthで制限しておくと、
スマホでも無理なく収まるようになります。

max-widthの値は、コンテンツの種類にもよりますが、実務では600px前後が目安になることが多いです。

3. コンテンツが横並びのまま崩れる

PC向けに作った横並びレイアウトが、スマホで入りきらず崩れることもよくあります。

.flex-box {
  display: flex;
  gap: 20px;
}

<div class="flex-box">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

このままだと、スマホでは3つ並ばず、はみ出す or 文字がつぶれることがあります。

@media screen and (max-width: 768px) {
  .flex-box {
    flex-direction: column;
  }
}

要素数が多い・内容が長い場合は、スマホでは縦並びに切り替える設計をしておくと安心です。

設計のヒント：スマホだけで調整しようとしない

「スマホの見た目が崩れているから」といって、
スマホ用のCSSだけで直そうとするのは、かえって混乱を招く原因になることもあります。

一度“全体の構造”を見直してみましょう

「スマホで崩れる」の多くは、スマホのせいではなく、
全体のレイアウトが「スマホにも対応していない構造」になっているだけなんです。

おわりに

スマホでのレイアウト崩れは、初心者が最も迷いやすいポイントのひとつ。
でも、それは「あなたのせい」ではなく、設計の順番と考え方がちょっとズレているだけです。

ひとつずつ原因を見つけて、設計のヒントと一緒に解決していきましょう。