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

Webサイトを作っていると、
「画面幅が変わるとレイアウトが崩れる」
という問題に必ず直面します。

PCではきれいなのにスマホで横スクロールが出る
画面幅が狭いと文字や画像がはみ出す
どのCSSを書けば画面幅に対応できるのか分からない

この記事では、「css 画面幅対応」で検索した初心者の方に向けて、
CSSで画面幅に対応するための基本から実践テクニックまでを
分かりやすく解説します。

CSSで画面幅に対応するとは

CSSで画面幅に対応するとは、
画面サイズ（PC・タブレット・スマホ）に応じてレイアウトを最適化することです。

これを実現するために、次のようなCSSの考え方を使います。

固定幅を避ける
相対単位を使う
メディアクエリで切り替える

これらは、
レスポンシブデザインの基本でもあります。

画面幅対応でやってはいけない例

初心者がやりがちなNG例がこちらです。

.container {
  width: 1000px;
}

このような固定幅指定は、
画面幅が狭い端末ではレイアウト崩れの原因になります。

画面幅に対応する基本の考え方

画面幅対応では、
「幅を固定しない」ことが最重要です。

次の3つを基本として覚えておきましょう。

% や vw を使う
max-width を併用する
必要に応じてメディアクエリを使う

%（パーセント）で画面幅に対応する

.container {
  width: 100%;
}

特徴

親要素の幅に対して伸縮する
画面サイズに自然に対応できる

最もシンプルで、
初心者におすすめの方法です。

vw（ビューポート幅）で画面幅に対応する

.box {
  width: 80vw;
}

vwとは

画面幅を100vwとして割合指定
80vw = 画面幅の80%

注意点

余白やスクロールバーの影響を受けやすい
使いすぎると調整が難しくなる

max-widthでレイアウト崩れを防ぐ

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

よくある使い方

大画面では横に広がりすぎない
小さい画面では自然に縮む

PC〜スマホまで対応できる定番パターンです。

画像を画面幅に対応させる方法

画像がはみ出す場合は、
次のCSSを必ず指定しましょう。

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

これだけで、
画像は画面幅に合わせて縮小されます。

メディアクエリで画面幅ごとに対応する

より細かく制御したい場合は、
メディアクエリを使います。

@media screen and (max-width: 768px) {
  .container {
    padding: 16px;
  }
}

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

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

画面幅が狭いときに横並びを縦並びにする

.box {
  display: flex;
}

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

スマホ対応では、
横並び → 縦並びが基本です。

横スクロールが出る原因と対策

原因

固定幅（width: px）
画像サイズが大きい
vwの使いすぎ

対策

* {
  box-sizing: border-box;
}

これを指定するだけでも、
レイアウト崩れが大幅に減ります。

フォントサイズも画面幅に対応させる

body {
  font-size: 16px;
}

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

文字サイズは、
画面幅とセットで調整すると読みやすくなります。

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

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

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

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

この構成だけで、
多くの画面幅トラブルを防げます。

よくある質問

画面幅対応はSEOに影響しますか

直接的なCSS指定がSEOを上げるわけではありません。
ただし、モバイルフレンドリーはSEO評価に影響します。

メディアクエリは必須ですか

基本対応だけなら必須ではありません。
細かく調整したい場合に使いましょう。

まとめ

CSSで画面幅に対応するためには、
次のポイントを押さえることが重要です。

固定幅は避ける
%・vw・max-widthを使う
画像は必ずmax-width: 100%
必要に応じてメディアクエリを使う

「css 画面幅対応」で検索した方は、
まず width: 100% + max-width の組み合わせから試してみてください。
それだけでも、レイアウトは大きく改善されます。

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