WEBデザインを下層まで探せるWEBギャラリー・リンク集。
WEBサイト・LPを毎日更新していきます!

【初心者向け】レスポンシブCSSの基本と簡単テクニックまとめ

【初心者向け】レスポンシブCSSの基本と簡単テクニックまとめ

投稿者の画像

y.kobayashi

2025.06.04 更新

この記事を共有する

この記事を共有する

Close

もっと知らせる

WebサイトをスマホでもPCでも美しく表示させる「レスポンシブデザイン」。
その鍵を握るのが、レスポンシブCSSです。
この記事では、最新のレスポンシブ手法をわかりやすく、
かつシンプルに導入できる方法をご紹介します。

1. レスポンシブデザインとは？

レスポンシブデザインとは、デバイスの画面サイズに応じて、
Webサイトのレイアウトや要素のサイズを自動で調整するデザイン手法です。

例えば、PCでは3列表示だったコンテンツが、スマホでは1列に並び替えられる仕組みです。

なぜ必要？

  • ユーザーの6割以上がスマホからアクセス
  • Googleがモバイルフレンドリーを重視（SEOにも影響）

2. レスポンシブ対応の基本｜viewportとmetaタグ

まず、HTMLの<head>内に以下のmetaタグを設定することが大前提です。

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

このタグは、スマホやタブレットなどの画面サイズに合わせて、
Webページを適切に表示するために必要な設定です。
レスポンシブデザインを行う際には必ず入れるべきタグです。

<meta>

  • 意味：HTMLのメタデータ（情報）を設定するタグ
  • 補足：ユーザーには見えないが、ブラウザに重要な情報を伝える

name="viewport"

  • name属性：このメタタグがどんな情報を提供しているかを表す
  • viewport：ブラウザの表示領域（画面サイズ）のこと
    • スマホやPCなど、端末ごとにサイズが異なる表示エリア

content="..."

▶ width=device-width

  • 意味：端末（スマホやPC）の画面幅に合わせて表示する
  • 例：iPhoneならiPhoneの画面幅、PCならPCの幅で表示される
  • 補足：これがないと、スマホで見てもPC用の幅（980pxなど）で表示されてしまう

3. メディアクエリの基本と書き方

メディアクエリは、画面サイズに応じて異なるCSSを適用する仕組みです。

/* 画面幅が768px以下のときに適用 */ 
@media (max-width: 768px) { 
  .container { flex-direction: column; } 
}
メディアクエリを使用したレスポンシブ

よく使うブレークポイント（目安）

デバイス幅（px）
スマホ〜768px
タブレット769px〜1024px
PC1025px〜

4. グリッドレイアウト + auto-fit で簡単レスポンシブ

最近のCSSでは、Gridレイアウトとauto-fitを使えば、
ほぼメディアクエリなしでレスポンシブが実現できます。

.grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px; 
}
gridのauto-fitを利用したレスポンシブ

解説

  • auto-fit：画面幅に合わせて自動で列数を調整
  • minmax(200px, 1fr)：最小200pxで、空きスペースがあれば広がる

メリット

  • メディアクエリ不要
  • スマホ～PCまで自動で最適化

5. フレックスボックスによるレスポンシブ

Flexboxもレスポンシブ対応に優れたCSSプロパティです。

.flex-container { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 16px; 
} 
.flex-item { 
  flex: 1 1 300px; /* 最小300px、必要なら拡張 */ 
}

解説

  • flex-wrap: wrap：子要素が横に収まりきらないとき、折り返す
  • flex: 1 1 300px：
    • 1：伸縮の比率
    • 1：縮小の比率
    • 300px：基準のサイズ

FlexboxとGridの違いと使い分け方｜どっちを使えばいいの？

この2つ、似ているようで得意なことが違います。
「flex-wrap」と「grid」の役割や、どんな場面で使い分けるべきかを解説します。

使い分けの目安

目的おすすめ手法
横に並べて折り返したい（カードやボタン）Flexbox
表形式、きっちり列を揃えたいGrid
メディアクエリをできるだけ減らしたいGrid（auto-fit）
アイテムごとに柔軟に幅を変えたいFlexbox
規則的で整ったレイアウトにしたいGrid

実際のプロジェクトでは、親要素にGridを使い、子要素の中にFlexboxを使うような組み合わせもよくあります。

<!-- グリッドで全体を整列 -->
<div class="grid-layout">
  <div class="card">
    <!-- カード内でFlexで配置 -->
    <div class="card-header">...</div>
    <div class="card-body">...</div>
  </div>
</div>

横並びのレイアウトに関しては以下の記事を参考をチェック👇

【CSS】flexとgrid、横並びレイアウトのためのdisplayの使い方を解説

6. モバイルファーストの考え方

モバイルファーストとは、最初にスマホ用のスタイルを記述し、
PC用は@media(min-width:〜)で上書きする設計思想です。

/* スマホ用 */ 
.card { 
  font-size: 16px; 
} 
/* タブレット以上 */ 
@media (min-width: 768px) { 
  .card { 
    font-size: 18px; 
  } 
}

メリット

  • 読み込みが速く、SEOに効果的
  • スマホユーザーを優先したUX設計ができる

7. よくある落とし穴とその回避方法

落とし穴解決策
viewport設定を忘れている<meta>タグを必ず設定
固定幅(px)を多用してしまうmax-width: 100%, width: autoなどを使う
コンテンツがはみ出してしまうbox-sizing: border-box; を全体に適用
メディアクエリが複雑すぎるGridやFlexで「書かずに済ませる」工夫をする

8. まとめ｜まずは小さく始めよう

レスポンシブ対応は難しそうに見えて、基本のポイントを抑えればとてもシンプルです。

特に以下の3点を意識すれば、あなたのWebサイトもすぐにモバイル対応できます。

  • viewportの設定
  • Grid + auto-fit を活用
  • モバイルファーストの設計

これらを押さえて、Googleにもユーザーにも愛されるサイト作りを目指しましょう。

もっと知らせる