【完全保存版】CSSでレスポンシブ対応する方法まとめ｜基本から実践まで初心者向けに徹底解説

Webサイト制作で必ず求められるのが レスポンシブ対応 です。

スマホで見るとレイアウトが崩れる
文字が小さすぎて読みにくい
PCでは問題ないのにスマホで使いづらい

この記事では、「css レスポンシブ」で検索した初心者の方に向けて、
CSSだけでレスポンシブ対応を行うための考え方・書き方・実践例を
基礎から丁寧に解説します。

CSSレスポンシブとは何か

CSSレスポンシブとは、
画面サイズに応じてレイアウトやデザインを自動で最適化することです。

1つのHTMLで、次のような表示に対応できます。

PC（デスクトップ）
タブレット
スマートフォン

現在のWeb制作では、
レスポンシブ対応は必須スキルといえます。

レスポンシブ対応が必要な理由

レスポンシブ対応が必要な理由は明確です。

スマホからのアクセスが大多数
Googleがモバイル表示を重視している
ユーザー体験（UX）が大きく変わる

レスポンシブ未対応のサイトは、
離脱率が高くなる傾向があります。

レスポンシブ対応の基本構成

CSSでレスポンシブ対応を行うために、
まず押さえておきたい基本要素は次の3つです。

viewport設定
メディアクエリ
柔軟なレイアウト指定

viewportの設定（必須）

レスポンシブ対応では、
HTMLにviewport設定が必須です。

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

これがないと、
スマホで正しく表示されません。

メディアクエリとは

メディアクエリは、
画面サイズに応じてCSSを切り替える仕組みです。

@media screen and (max-width: 768px) {
  body {
    background-color: #f5f5f5;
  }
}

この例では、
画面幅が768px以下のときだけCSSが適用されます。

よく使われるブレイクポイント

初心者の方は、
まず次のブレイクポイントを覚えておくと安心です。

1024px：タブレット以下
768px：スマホ以下
480px：小さなスマホ

@media screen and (max-width: 768px) {
  /* スマホ用CSS */
}

レスポンシブ対応の基本的な考え方

PC基準で作る（デスクトップファースト）

/* PC用 */
.container {
  display: flex;
}

/* スマホ用 */
@media screen and (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

スマホ基準で作る（モバイルファースト）

/* スマホ用 */
.container {
  display: block;
}

@media screen and (min-width: 769px) {
  .container {
    display: flex;
  }
}

初心者の方は、
PC基準 → スマホ調整 が分かりやすいです。

レスポンシブ対応でよく使うCSSテクニック

幅を固定しない

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

画像のはみ出し防止に必須です。

フォントサイズを調整する

body {
  font-size: 16px;
}

@media screen and (max-width: 768px) {
  body {
    font-size: 15px;
  }
}

横並びを縦並びに切り替える

.container {
  display: flex;
}

@media screen and (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

レスポンシブでよくある失敗

スマホで横スクロールが出る

原因：

固定幅（width: 1000px など）
画像サイズが大きすぎる

対策：

* {
  box-sizing: border-box;
}

スマホで文字が小さすぎる

px指定が小さい
行間が狭い

body {
  line-height: 1.6;
}

レスポンシブ対応はCSSだけでできる？

はい、
基本的なレスポンシブ対応はCSSだけで可能です。

JavaScriptは、
メニュー開閉などのUI操作に限定して使うのが一般的です。

初心者におすすめの最小構成

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

@media screen and (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

この2点を押さえるだけでも、
多くのレイアウト崩れを防げます。

よくある質問

レスポンシブ対応はSEOに影響しますか

はい。
モバイルフレンドリーはSEO評価に影響します。

ブレイクポイントはいくつ必要ですか

初心者のうちは、
1〜2箇所で十分です。

まとめ

CSSレスポンシブ対応は、
Web制作において避けて通れない重要スキルです。

viewportは必須
メディアクエリで画面サイズ対応
横並びはスマホで縦並びに
固定幅は避ける

「css レスポンシブ」で検索した方は、
まず メディアクエリの基本構文 をそのまま使ってみてください。
少しずつ調整していくことで、レスポンシブ対応は確実に身についていきます。

【完全保存版】CSSでレスポンシブ対応する方法まとめ｜基本から実践まで初心者向けに徹底解説