レスポンシブで崩れないCSS設計｜レイアウト構造の作り方

スマートフォンで見たときだけカードがはみ出す、ボタンが2段になって崩れる、画像と文章の高さが揃わない。

このようなレスポンシブの表示崩れは、個別のCSSを足すだけでは再発しやすいです。なぜなら、原因は「部品」よりも、幅・余白・折り返し・画像比率をどう設計しているかにあることが多いためです。

この記事では、レスポンシブで崩れにくいCSSレイアウト構造の作り方を、実例つきで整理します。

この記事でわかること

• レスポンシブ表示が崩れるCSS上の原因
• 崩れにくいコンテナと余白の作り方
• CSS GridとFlexboxの使い分け
• 画像・カード・ボタンを崩れにくくする実例
• 自分で直せる範囲と依頼した方がよい範囲
• SiteDocで対応できること

レスポンシブで崩れる原因は何ですか？

まず、レスポンシブで崩れる原因は、画面幅が変わったときに要素が逃げる場所を持っていないことです。

例えば、横幅固定の画像、折り返さないボタン列、縮めないFlexアイテム、余白込みで100%を超えるボックスなどがあると、スマホ幅で横スクロールや重なりが起きます。

代表的な原因は次の通りです。

原因	起きやすい症状	見るCSS
固定幅の指定	スマホで横にはみ出す	width: 960px、min-width
余白込みの幅計算	カードが親要素からはみ出す	box-sizing、padding
折り返し不足	ボタンやナビが重なる	flex-wrap、gap
画像比率の未設計	高さが揃わない、CLSが起きる	aspect-ratio、object-fit
Flex/Gridの最小幅	長い文字列が縮まない	min-width: 0、overflow-wrap

CSSの仕様として、box-sizing は幅と高さの計算方法を決めます。MDNでは、既定の content-box では余白や枠線が幅に含まれないことが説明されています（MDN box-sizing）。

つまり、レスポンシブ対応では「スマホ用CSSを後から足す」より、最初から縮む・折り返す・比率を保つ構造にすることが重要です。

崩れにくいCSS設計の基本は何ですか？

崩れにくいCSS設計では、固定値を減らし、要素が画面幅に合わせて変化できる余地を作ります。

まずは次の4つを基本にしてください。

1. 外側にコンテナを置き、本文幅を制御する
2. 余白は clamp() で画面幅に合わせる
3. 横並びはGridまたはFlexで折り返せるようにする
4. 画像は比率と最大幅を決める

ページ全体の土台は、次のように作ると崩れにくくなります。

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-wrap: anywhere;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

.container {
  width: min(100% - 32px, 1120px);
  margin-inline: auto;
}

.section {
  padding-block: clamp(40px, 8vw, 96px);
}

ここで重要なのは、width: min(100% - 32px, 1120px) のように、最大幅と左右余白を同時に管理することです。

ただし、既存テーマに一括で入れる場合は注意してください。テーマ側のリセットCSSやページビルダーのCSSと競合することがあります。

崩れにくいCSSレイアウトはどう作りますか？

ここからは、よく使うレイアウト単位ごとにCSSの作り方を見ていきます。

ポイントは、画面幅に合わせて「縮む」「折り返す」「比率を保つ」構造にすることです。

コンテナと余白はどう作ると崩れにくいですか？

コンテナと余白は、レスポンシブ崩れを防ぐ土台です。

悪い例は、PC幅を前提にした固定幅です。

.content {
  width: 1100px;
  margin: 0 auto;
}

この指定では、スマホ幅が390pxでも要素は1100pxのままです。その結果、横スクロールが出ます。

修正例です。

.content {
  width: min(100% - 32px, 1100px);
  margin-inline: auto;
}

さらに、ページ内の余白は固定値だけにしない方が安全です。

.page-section {
  padding-block: clamp(32px, 7vw, 88px);
}

.stack {
  display: grid;
  gap: clamp(16px, 3vw, 32px);
}

clamp() を使うと、最小値・可変値・最大値をまとめて指定できます。これにより、スマホでは余白を抑え、PCでは余裕を出す設計にできます。

カード型レイアウトはGridでどう組みますか？

カードを複数並べるレイアウトは、CSS Gridで列数を自動調整すると崩れにくくなります。

悪い例です。

.card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

この指定は、PCではきれいに見えることがあります。しかし、狭い画面でも3列を維持しようとするため、カード内の文字や画像が詰まりやすくなります。

修正例です。

.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(16px, 3vw, 28px);
}

.card {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.card__title {
  overflow-wrap: anywhere;
}

auto-fit と minmax() を使うと、画面幅に応じて1列、2列、3列へ自然に変化します。

また、カード内に長い英数字やURLが入る場合は、overflow-wrap: anywhere を指定します。FlexやGridでは内容の最小幅が影響することがあり、MDNの min-width でもFlexアイテムやGridアイテムの自動最小サイズについて説明されています（MDN min-width）。

横並びパーツはFlexでどう崩れを防ぎますか？

ボタン、タグ、ナビゲーションのような小さな横並びにはFlexboxが向いています。

ただし、折り返しを許可しないと、スマホで重なったり画面外にはみ出したりします。

悪い例です。

.button-row {
  display: flex;
  gap: 16px;
}

.button {
  width: 240px;
}

修正例です。

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.button {
  flex: 1 1 220px;
  max-width: 100%;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

この構造なら、横幅に余裕があるときは横並びになります。一方、狭い画面では自然に折り返します。

CTAボタンやフォーム送信ボタンが崩れると、問い合わせにも影響します。フォーム周辺の動作まで不安がある場合は、問い合わせフォームが送信できない原因も確認してください。

画像とテキストの2カラムはどう作りますか？

画像とテキストを横並びにするセクションは、レスポンシブで崩れやすい部分です。

特に、画像に固定幅や固定高さを指定していると、スマホで画像だけが大きく残ったり、文章と重なったりします。

悪い例です。

.feature {
  display: flex;
}

.feature img {
  width: 560px;
  height: 360px;
}

修正例です。

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 480px);
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
}

.feature__body {
  min-width: 0;
}

.feature__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 8px;
}

.feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .feature {
    grid-template-columns: 1fr;
  }
}

画像にはHTML側でも width と height を入れておくと、読み込み前に表示領域を確保しやすくなります。web.devでも、寸法のない画像はレイアウトシフトの原因として挙げられています（web.dev CLS最適化）。

表や長いコンテンツはどう扱いますか？

料金表や比較表は、スマホで崩れやすい代表例です。

ただし、表を無理に縮めると文字が読みにくくなります。表だけ横スクロールを許可する方が安全な場合があります。

.table-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.table-scroll table {
  min-width: 640px;
  border-collapse: collapse;
}

HTMLは次のように、表をラッパーで囲みます。

<div class="table-scroll">
  <table>
    <!-- 比較表や料金表 -->
  </table>
</div>

注意点として、body 全体に overflow-x: hidden を入れて横スクロールを消すのは避けてください。overflow は、はみ出した内容の表示方法を指定するCSSです（MDN overflow）。

しかし、全体を隠すだけでは、原因の要素が残ったままになります。表、ボタン列、画像など、対象を絞って対応する方が安全です。

自分で直せる可能性があるケースは？

CSSの範囲が限定されているなら、自分で直せる可能性があります。

例えば、追加CSSで1つのセクションだけ調整している場合や、画像・カード・ボタンのはみ出し箇所が特定できている場合です。

自分で対応しやすいケースは次の通りです。

状況	自分でできる対応	注意点
画像だけはみ出している	max-width: 100% と比率を確認する	元画像の縦横比も見る
カード一覧だけ崩れる	Gridの auto-fit を検討する	既存テーマのクラスと競合しないようにする
ボタン列だけ重なる	flex-wrap: wrap を入れる	ボタンの最小高さも確認する
長いURLがはみ出す	overflow-wrap を指定する	見出しや表にも同じ問題がないか見る
表だけ横に広い	表だけ横スクロールさせる	ページ全体を隠さない

WordPress更新後に急に崩れた場合は、CSS設計だけが原因とは限りません。WordPress表示崩れの直し方で、テーマやプラグインの切り分けも確認してください。

専門家に依頼した方がよいケースは？

次の状態では、部分的なCSS追加だけでは直りにくいです。

• 複数ページで同じレスポンシブ崩れが起きている
• 共通ヘッダー、メニュー、CTA、フォームが崩れている
• 固定幅や絶対配置が多く、影響範囲を追えない
• ページビルダーとテーマCSSが競合している
• PC、タブレット、スマホでそれぞれ崩れ方が違う
• 追加CSSが積み重なり、どの指定が効いているか分からない
• 問い合わせや予約ボタンが押しにくい
• 制作会社と連絡が取れない

特に、共通パーツが崩れている場合は、1ページだけの問題ではありません。テンプレート、テーマCSS、プラグインCSSの関係まで見る必要があります。

レスポンシブ崩れの原因がCSS設計なのか、テーマやプラグインなのか判断しきれない場合は、SiteDocで状態確認から相談できます。

修正費用はどのくらいかかりますか？

レスポンシブ崩れの修正費用は、崩れている範囲とCSSの整理状況で変わります。

目安は次の通りです。

修正内容	費用感（税抜・目安）	備考
1セクションのCSS調整	1万円〜3万円	カード、画像、ボタンなど
スマホ表示の崩れ修正	3万円〜8万円	複数画面幅での確認を含む
共通パーツのレスポンシブ調整	5万円〜	ヘッダー、CTA、フォーム周辺など
CSS全体の整理・再設計	8万円〜	影響範囲の調査と再実装を含む

なお、上記はあくまで目安です。管理画面に入れるか、バックアップがあるか、既存CSSがどの程度整理されているかで変わります。

費用感を先に確認したい場合は、ホームページ修正の費用相場も参考になります。

SiteDocで対応できること

SiteDocでは、レスポンシブ崩れの原因調査からCSS修正、スマホ表示の確認まで対応できます。

具体的には、次のような作業です。

• 崩れている画面幅とページ範囲の切り分け
• 固定幅、余白、折り返し、画像比率の確認
• CSS Grid、Flexbox、コンテナ設計の見直し
• 追加CSSやテーマCSSの軽微な修正
• フォーム、CTA、ヘッダー周辺の表示確認
• PC、タブレット、スマホでの表示確認
• 制作会社に頼みにくい小規模な部分修正

全面リニューアルが必要とは限りません。

一方で、固定幅のCSSや絶対配置が広範囲に使われている場合は、部分修正で済む範囲と作り直した方がよい範囲を分けて判断します。

よくある質問

Q. メディアクエリを増やせばレスポンシブ崩れは直りますか？

直ることもあります。

ただし、ブレイクポイントごとに場当たり的な指定を増やすと、別の画面幅で崩れることがあります。まずは固定幅、折り返し、画像比率、最小幅を確認してください。

Q. GridとFlexboxはどちらを使えばよいですか？

カード一覧や2カラムなど、列全体を管理したい場合はGridが向いています。

一方、ボタン列やタグ一覧など、横並びの小さな部品にはFlexboxが使いやすいです。どちらかに統一するより、役割で分ける方が安全です。

Q. overflow-x: hidden で横スクロールを消しても大丈夫ですか？

一時的な確認には使える場合があります。

しかし、原因の要素が残ったままになるため、ボタンや表の一部が見切れることがあります。公開用CSSでは、はみ出している要素ごとに直す方が安全です。

Q. WordPressでもこのCSS設計は使えますか？

考え方は使えます。

ただし、テーマやページビルダーが独自のCSSを持っているため、全体へ一括でCSSを追加するのは注意が必要です。対象ページや対象ブロックに絞って検証してください。

まとめ

レスポンシブで崩れないCSSを作るには、スマホ用の上書きを増やすだけでは不十分です。

まず、コンテナ、余白、Grid、Flex、画像比率、長い文字列の扱いを構造として整える必要があります。

特に、固定幅を減らす、折り返しを許可する、min-width: 0 を適切に使う、画像比率を決める、といった基本が重要です。

レスポンシブ崩れの原因がCSS設計なのか、テーマやプラグインなのか判断しきれない場合は、SiteDocで状態確認から相談できます。