2026年4月16日
レスポンシブ CSS とは？スマホ対応の基本
スマホで見ても、パソコンで見ても、きれいに表示されるウェブページを作りたいと思ったことはありませんか？
レスポンシブデザインとは、画面の大きさに合わせてレイアウトが自動で変わるデザインのことです。スマホ・タブレット・パソコンのどの画面サイズでも読みやすく表示されます。
この記事では、CSSを使ったレスポンシブデザインの作り方を初心者向けにわかりやすく解説します。
レスポンシブデザインは3つの柱で成り立っています。
1つ目はフルードグリッドです。幅をpxではなく%やfrで指定します。画面サイズに合わせて要素の幅が自動で変わります。
2つ目はフルードイメージです。画像にmax-width: 100%を指定します。親要素より大きくならないので、スマホでもはみ出しません。
3つ目はメディアクエリです。画面幅に応じてCSSを切り替えます。スマホでは1列、PCでは3列のように、レイアウトを変更できます。
この3つを組み合わせることで、あらゆる画面サイズに対応するページが作れます。
まずviewportの設定をしよう
レスポンシブデザインを作るには、HTMLの <head> に viewport（ビューポート） の設定が必要です。
viewportとは「ブラウザの表示領域」のことです。この設定がないと、スマホでもパソコン用の幅で表示されてしまいます。
<meta name="viewport" content="width=device-width, initial-scale=1.0">この1行を <head> の中に必ず入れましょう。
📖 詳しくはCSSレッスン1で解説しています。
メディアクエリの書き方
メディアクエリとは、「画面の幅が〇〇px以下のときはこのCSSを適用する」という条件分岐をCSSで書く方法です。
基本の書き方
/* 通常（パソコン）のスタイル */
.container {
display: flex;
gap: 24px;
}
/* 画面幅が600px以下のとき（スマホ）に適用 */
@media (max-width: 600px) {
.container {
display: block; /* 縦並びに変える */
}
}@media (max-width: 600px) の中に書いたCSSは、画面幅が600px以下のときだけ適用されます。
よく使うブレークポイント
ブレークポイントとは、レイアウトが切り替わる画面幅の境界線のことです。
| デバイス | 目安の幅 | メディアクエリ |
|---|---|---|
| スマホ | 〜600px | max-width: 600px |
| タブレット | 601px〜1024px | max-width: 1024px |
| パソコン | 1025px〜 | 通常のCSS |
👉 CSSグリッドレイアウト入門も参考にしてください。
ハンズオン：スマホ対応ページを作ろう
パソコンでは2カラム、スマホでは1カラムに切り替わるページを作ってみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>レスポンシブ練習</title>
<style>
.cards {
display: flex;
gap: 24px;
}
.card {
flex: 1;
background-color: #f0f9ff;
padding: 24px;
border-radius: 12px;
}
/* スマホ：600px以下で縦並びに */
@media (max-width: 600px) {
.cards {
display: block;
}
.card {
margin-bottom: 16px;
}
}
</style>
</head>
<body>
<div class="cards">
<div class="card"><h2>カード1</h2><p>内容が入ります。</p></div>
<div class="card"><h2>カード2</h2><p>内容が入ります。</p></div>
</div>
</body>
</html>ブラウザの幅を狭めると、2つのカードが縦に並び替わります。
🔥 CSSでフォントを変える方法で実践してみましょう。
もう少し実践的な例を見てみましょう。3列のカードレイアウトを作ります。
PC表示では3列に並びます。grid-template-columns: repeat(3, 1fr) で3等分します。カード同士の間隔はgap: 24pxで設定します。
タブレット表示（768px以下）では2列にします。repeat(2, 1fr) に変更するだけです。カードが2列に並び替わります。
スマホ表示（480px以下）では1列にします。grid-template-columns: 1fr にすると、カードが縦に積み重なります。
このパターンはブログの記事一覧やECサイトの商品一覧でよく使われます。CSS Gridを使うと、数行のコードで実現できます。
CSS Gridの詳しい使い方はCSS Grid入門で解説しています。Flexboxで横並びにする方法はFlexbox入門を参考にしてください。
レスポンシブに役立つCSSテクニック
フルードグリッド（%やfrで幅指定）
固定のpxではなく、%やfr単位で幅を指定すると画面サイズに合わせて自動で変わります。
.container {
width: 90%; /* 画面幅の90% */
max-width: 960px; /* ただし最大960px */
margin: 0 auto; /* 中央揃え */
}フルードイメージ（max-width: 100%）
img {
max-width: 100%; /* 親要素の幅を超えない */
height: auto; /* 縦横比を保つ */
}デバッグ方法
ブラウザの開発者ツール（F12キー）でスマホ表示をシミュレーションできます。Chrome DevToolsの「デバイスツールバー」を使うと、iPhone/iPadなど各デバイスの画面サイズで確認できます。
🔗 開発者ツールの使い方で詳しく学べます。
📖 メディアクエリの書き方でブレイクポイントの詳細を確認しましょう。
💡 Flexbox入門やCSS入門ガイドも参考にしてください。
レスポンシブデザインでよくある失敗
レスポンシブデザインでよくある失敗を紹介します。
1つ目は横スクロールが発生することです。要素にwidth: 500pxのような固定幅を指定すると、スマホの画面幅を超えてしまいます。max-width: 100%を使うか、%で指定しましょう。
2つ目はタップ領域が小さすぎることです。スマホではボタンやリンクを指でタップします。最低44px × 44pxの大きさが必要です。小さすぎると押し間違いが起きます。
3つ目はフォントサイズが小さすぎることです。PCでは14pxでも読めますが、スマホでは16px以上が推奨です。ブラウザのデフォルトは16pxなので、それより小さくしないようにしましょう。
4つ目はテスト不足です。PCのブラウザだけで確認して終わりにしがちです。必ず実機（スマホ）でも確認しましょう。開発者ツールのシミュレーションと実機では表示が異なることがあります。
ブラウザ開発者ツール入門で開発者ツールの使い方を詳しく学べます。メディアクエリの書き方も参考にしてください。CSSの基本に不安がある人はCSS入門ガイドから始めましょう。
まとめ
- ✅ レスポンシブデザイン：画面サイズに合わせてレイアウトが変わる設計
- ✅
<meta name="viewport">を必ず<head>に入れる - ✅ メディアクエリ：
@media (max-width: 600px)で条件付きCSSを書く - ✅ 幅は
%やmax-widthを使うと柔軟に対応できる - ✅ 画像は
max-width: 100%でレスポンシブにできる
レスポンシブデザインはCSSの重要なスキルです。レッスンでさらに詳しく学んでみましょう。
📐 px・rem・vw の違いをリアルタイムで確認しよう！
ベースフォントサイズとビューポート幅を入力すると、px/rem/em/vw/%の値を即座に相互変換できる無料ツールです。
CSS単位コンバーター →