レスポンシブWebデザインのCSS入門｜メディアクエリと実装例

レスポンシブ対応は、固定幅を後から縮めるのではなく、狭い画面で自然に並ぶ流動レイアウトを先に作り、必要な幅だけメディアクエリで拡張するのが基本です。端末名ではなく、内容が窮屈になる地点をブレークポイントにします。

情報確認日：2026年7月27日

結論：まず押さえるポイント

レスポンシブWebデザインのCSSの基本

HTMLのheadには通常<meta name="viewport" content="width=device-width, initial-scale=1">を入れます。この指定があると、モバイルブラウザが仮想的な広い幅ではなく端末の幅どおりにページを描画します。ユーザーのズームを妨げるmaximum-scale=1やuser-scalable=noは避けます。

最小の実装例

HTML

<main class="container">
  <section class="cards">
    <article class="card">記事1</article>
    <article class="card">記事2</article>
    <article class="card">記事3</article>
  </section>
</main>

CSS

.container {
  width: min(100% - 2rem, 70rem);
  margin-inline: auto;
}

.cards {
  display: grid;
  gap: 1rem;
}

@media (min-width: 48rem) {
  .cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

狭い画面では1列、48rem以上で3列にします。ブレークポイントを端末モデルへ合わせるのではなく、カード内容を並べても読める幅で決めます。

実務で使うときの考え方

メディアクエリなしで可変列にする

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }

文字サイズを流動化する

h2 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem); }

clampの最小値が小さすぎないか、最大値が大画面で大きすぎないか確認します。

テストする幅と操作

• 320px前後の狭い幅
• 400〜768pxのスマートフォン・小型タブレット
• 1024px前後のタブレット・小型PC
• 1440px以上の大画面
• ブラウザ200%ズーム
• 横向き、ソフトウェアキーボード表示、長い日本語・英単語
• キーボードフォーカスとタップ領域

よくある失敗と直し方

端末ごとにブレークポイントを増やす

保守が難しくなります。内容が崩れる最小限の地点へまとめます。

PC用固定幅をtransformで縮める

文字や操作領域まで小さくなります。レイアウト自体を再配置します。

横スクロールをbodyで隠す

原因を見えなくするだけです。固定幅、画像、長い文字列、position要素を特定します。

WordPressで使う場合

WordPressでは本文内の画像、テーブル、埋め込み、広告、コードブロックが横幅を超えやすくなります。テーマのテンプレートだけでなく、実データを入れた投稿ページで確認します。編集画面と公開画面の幅差にも注意してください。

よくある質問

まとめ

レスポンシブ対応は、流動幅と自然な折り返しを基本にし、必要な地点だけメディアクエリで拡張します。端末名ではなくコンテンツで判断し、文字拡大や実データを含めて検証してください。

関連する基礎記事

• CSS calc()の使い方
• SVGをCSSでレスポンシブにする方法
• CSSのボックスモデルとbox-sizing

参照した公式資料

• MDN Web Docs：レスポンシブデザインの解説
• MDN Web Docs：メディアクエリの使い方