スマホ対応のCSSは何から直す？レスポンシブデザインの基本と実務チェック

2026年7月28日

スマホ対応のCSSは何から直す？レスポンシブデザインの基本と実務チェック

スマホ対応で最初に見るべきなのは、特別なライブラリではありません。まずは viewport、横幅が固定された要素、画像のはみ出し、切り替え地点であるブレークポイント の4つです。

レスポンシブデザインは、PC用とスマホ用の別サイトを作る考え方ではなく、同じHTMLを画面幅に合わせて読みやすく並べ替える設計です。WordPressのテーマ調整、LP制作、管理画面風のWebページ、社内ツールのHTML出力などでよく使います。

この記事で分かることは次の通りです。

スマホ対応で最低限必要なHTMLとCSS
@media、max-width、flex、grid の使いどころ
入力HTMLとCSS、画面幅ごとの出力イメージ
WordPressで画像が大きすぎるときの確認点
よくある失敗と直し方

対象は、HTMLとCSSを少し触ったことがある初心者から実務初級者です。確認時点は2026年7月、前提はモダンブラウザで動く一般的なHTML/CSSです。

レスポンシブデザインは「画面幅ごとに別物を作る」ことではない

レスポンシブデザインの中心は、画面幅に応じて読みやすい配置へ変えることです。

MDNの解説でも、レスポンシブWebデザインは画面サイズや解像度が違っても使いやすく表示するための設計手法として説明されています。実務では、次の3つを組み合わせる場面が多くなります。

流動的な幅: width: 100%、max-width、fr、% などで画面に合わせる
柔軟な画像: 画像や動画が親要素からはみ出さないようにする
メディアクエリ: 画面幅などの条件でCSSを切り替える

ここがポイント: 最初から端末名で分けようとせず、「この幅になると読みにくい」「このカードが潰れる」という見た目の崩れを基準にCSSを変えます。

たとえば「iPhone用」「Android用」「タブレット用」と考え始めると、機種が増えるたびに条件が増えます。実務で保守しやすいのは、スマホでは1列、余裕が出たら2列、さらに広ければ3列というように、コンテンツが読める幅を基準にする 方法です。

最低限の前提環境とHTML

スマホ対応の最初の1行は、head 内の viewport 設定です。

<meta name="viewport" content="width=device-width, initial-scale=1">

この指定は、モバイルブラウザに「端末の画面幅を基準に表示してよい」と伝えます。MDNのviewport解説では、これがないとスマホ側がPC向けの広い幅としてページを解釈し、意図したブレークポイントが効かないことがあると説明されています。

まず確認するHTML

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>レスポンシブ確認用ページ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="page">
    <section class="hero">
      <h1>社内向けツールの使い方</h1>
      <p>よく使う操作をカード形式で整理します。</p>
    </section>

    <section class="cards">
      <article class="card">
        <h2>CSVを取り込む</h2>
        <p>アップロード前に文字コードと列名を確認します。</p>
      </article>
      <article class="card">
        <h2>エラーを確認する</h2>
        <p>処理結果のログから失敗した行を見つけます。</p>
      </article>
      <article class="card">
        <h2>結果を出力する</h2>
        <p>必要な列だけをCSVとしてダウンロードします。</p>
      </article>
    </section>
  </main>
</body>
</html>

この例では、スマホでカードを縦に並べ、PCでは横に並べます。ニュース記事、商品一覧、管理ツールのメニュー、WordPressの固定ページ内パーツでも同じ考え方で使えます。

基本CSSは「スマホを先に書く」と崩れにくい

CSSは、狭い画面で無理なく読める状態を先に作ると整理しやすくなります。

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.7;
  color: #222;
  background: #f7f7f7;
}

.page {
  width: min(100% - 32px, 960px);
  margin: 0 auto;
  padding: 24px 0;
}

.hero {
  margin-bottom: 24px;
}

.hero h1 {
  margin: 0 0 8px;
  font-size: 1.75rem;
}

.cards {
  display: grid;
  gap: 16px;
}

.card {
  padding: 16px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.card h2 {
  margin: 0 0 8px;
  font-size: 1.1rem;
}

.card p {
  margin: 0;
}

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

ここでは、初期状態を1列にしています。スマホでは横幅が狭いため、カードを横に並べるより、縦に積んだほうが読みやすくなります。

大事なのは .page の指定です。

.page {
  width: min(100% - 32px, 960px);
  margin: 0 auto;
}

この1行で、狭い画面では左右に16pxずつ余白を取り、広い画面では最大960pxに収めます。width: 960px; と固定してしまうと、スマホで横スクロールの原因になります。

メディアクエリで「広い画面だけ」レイアウトを変える

メディアクエリは、条件に合うときだけCSSを適用する仕組みです。

MDNのメディアクエリ解説では、画面幅、解像度、向き、入力方法、ユーザー設定などを条件にできると説明されています。初心者がまず使うのは、画面幅による切り替えです。

@media (width >= 600px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .hero h1 {
    font-size: 2.25rem;
  }
}

このCSSでは、画面幅が600px以上になったときだけカードを3列にします。599px以下では、先に書いた1列のままです。

入力と出力イメージ

入力は、先ほどのHTMLにカードが3つある状態です。

<section class="cards">
  <article class="card">...</article>
  <article class="card">...</article>
  <article class="card">...</article>
</section>

出力イメージは次のようになります。

画面幅 375px: カードが1列で縦に3つ並ぶ
画面幅 768px: カードが3列で横に並ぶ
画面幅 1200px: 本文全体は960px幅に収まり、左右に余白ができる

この切り替えは、端末名ではなく画面幅を基準にしています。新しいスマホやタブレットが出ても、幅が条件に合えば同じCSSが効きます。

よく使う書き方を用途別に整理する

レスポンシブ対応では、毎回すべてをメディアクエリで書く必要はありません。まずはCSS自体を柔らかくして、それでも崩れる箇所だけ切り替えます。

やりたいこと	よく使うCSS	使う場面
本文幅を広げすぎない	`max-width`、`margin: auto`	記事本文、LP、フォーム
画像をはみ出させない	`max-width: 100%`、`height: auto`	投稿画像、バナー、商品画像
カードを画面幅に合わせて並べる	`display: grid`、`repeat()`	一覧ページ、メニュー、事例紹介
横並び部品を折り返す	`display: flex`、`flex-wrap: wrap`	タグ一覧、ボタン群、ナビゲーション
一定幅以上で見出しを大きくする	`@media`、`rem`	トップページ、ランディングページ

Flexboxが向いている場面

Flexboxは、横並びの部品を自然に折り返したいときに向いています。

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  padding: 4px 10px;
  border: 1px solid #ccc;
  border-radius: 999px;
  background: #fff;
}

タグ、ボタン、パンくずに近い小さな部品は、GridよりFlexboxのほうが扱いやすいことがあります。

Gridが向いている場面

Gridは、カードや一覧のように行と列をそろえたいときに向いています。

.cards {
  display: grid;
  gap: 16px;
}

@media (width >= 600px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width >= 960px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

このように段階を分けると、タブレットでは2列、PCでは3列にできます。1つのブレークポイントに詰め込みすぎないほうが、後から直しやすくなります。

WordPressでスマホ表示が崩れるときの確認点

WordPressでは、テーマ、ブロック、プラグイン、投稿本文のHTMLが組み合わさるため、原因を1つに決めつけないほうが早く直せます。

まず見るのは次の順番です。

テーマの head に viewport が入っているか
投稿内の画像や埋め込みに固定幅が入っていないか
テーブル、コードブロック、地図、iframe が横にはみ出していないか
追加CSSで width: 1200px のような固定値を入れていないか
キャッシュ系プラグインで古いCSSが残っていないか

WordPressはレスポンシブ画像に対応しており、画像タグに srcset や sizes を付けて、ブラウザが適切な画像サイズを選べるようにする仕組みがあります。WordPress Developer Resources では、ブラウザがウィンドウ幅や解像度に応じて適切な画像を要求できるようにするものとして説明されています。

ただし、CSSで画像コンテナの幅が不自然に固定されていると、せっかくの srcset も見た目の崩れを防げません。画像が大きいときは、画像ファイルだけでなく、親要素のCSSも確認します。

.wp-block-image img {
  max-width: 100%;
  height: auto;
}

.wp-block-table {
  overflow-x: auto;
}

テーブルはスマホで列数が多いと潰れます。無理に文字を小さくするより、横スクロールを許可したほうが読みやすいことがあります。

よくある失敗と直し方

スマホ対応で多い失敗は、CSSの知識不足というより、固定幅の残り方です。

失敗1: PC幅をそのまま固定している

NG例です。

.container {
  width: 1000px;
  margin: 0 auto;
}

スマホの画面幅が390pxでも、要素は1000pxのままです。横スクロールが出ます。

改善例です。

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

最大幅は1000pxに保ちつつ、狭い画面では画面幅に合わせます。

失敗2: 画像だけ大きい

NG例です。

.thumbnail {
  width: 640px;
}

改善例です。

.thumbnail {
  width: 100%;
  max-width: 640px;
  height: auto;
}

画像そのものの最大幅は残しながら、親要素より広がらないようにします。

失敗3: 文字サイズを `vw` だけで指定する

NG例です。

h1 {
  font-size: 6vw;
}

vw はviewport幅に連動する単位です。MDNは、vw だけで文字サイズを指定すると、ユーザーがズームしたときの扱いに問題が出るため、単独使用を避けるべきだと説明しています。

改善例です。

h1 {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem);
}

clamp() を使うと、最小値、可変値、最大値をまとめて指定できます。見出しが小さくなりすぎたり、大きくなりすぎたりするのを防げます。

代替手段と使い分け

レスポンシブ対応には複数の方法があります。どれか1つが常に正解ではなく、対象サイトの規模と修正できる範囲で選びます。

方法	向いているケース	注意点
自分でCSSを書く	小規模なLP、固定ページ、部分修正	既存テーマのCSSと競合することがある
CSSフレームワークを使う	管理画面、社内ツール、短期間の試作	クラス名が増え、HTMLが読みにくくなる場合がある
WordPressテーマの設定を使う	コードを最小限にしたいサイト運用	細かい調整はテーマ依存になる
ブロックやパターンを選び直す	投稿・固定ページの一部だけ崩れる場合	本文側のHTML構造が変わることがある

初心者が最初に身につけるなら、自分で最小限のCSSを書ける状態を目指すのが実務では役に立ちます。テーマやフレームワークを使う場合でも、崩れた原因を追いやすくなるからです。

公開前チェックリスト

最後に、スマホ対応で最低限見るべき項目を確認します。

meta name="viewport" が入っている
横スクロールが出ていない
画像、動画、iframe が親要素からはみ出していない
本文幅が広すぎず、スマホで左右の余白がある
ボタンやリンクが指で押しやすい間隔になっている
テーブルやコードブロックがスマホで読める
画面幅を変えたとき、カードや見出しが不自然に潰れない
WordPressではキャッシュ削除後の表示も確認する

レスポンシブデザインは、CSSをたくさん書く作業ではありません。まず固定幅を減らし、画像をはみ出させず、読みにくくなる幅でだけレイアウトを切り替える。この順番で見ると、スマホ対応の原因調査も修正もかなり絞り込めます。

次に実務で見るべき分岐点は、単なる横幅ではなく「コンテンツの量」です。カードが3枚なら簡単でも、20枚の一覧、長い商品名、多列テーブル、広告枠、埋め込み動画が入ると崩れ方が変わります。公開前には、きれいなサンプルではなく、実際に入りそうな長い文字と大きな画像で確認してください。

参照リンク

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

スマホ対応のCSSは何から直す？レスポンシブデザインの基本と実務チェック

スマホ対応のCSSは何から直す？レスポンシブデザインの基本と実務チェック

レスポンシブデザインは「画面幅ごとに別物を作る」ことではない

最低限の前提環境とHTML

まず確認するHTML

基本CSSは「スマホを先に書く」と崩れにくい

メディアクエリで「広い画面だけ」レイアウトを変える

入力と出力イメージ

よく使う書き方を用途別に整理する

Flexboxが向いている場面

Gridが向いている場面

WordPressでスマホ表示が崩れるときの確認点

よくある失敗と直し方

失敗1: PC幅をそのまま固定している

失敗2: 画像だけ大きい

失敗3: 文字サイズを vw だけで指定する

代替手段と使い分け

公開前チェックリスト

参照リンク

失敗3: 文字サイズを `vw` だけで指定する