レスポンシブ対応に必要なCSSの基本設定まとめ【初心者向け】

レスポンシブ対応をしようと思ったとき、

と感じる方はとても多いです。

そこで、この記事では、
初心者の方でもすぐ使えるレスポンシブCSSの基本設定をわかりやすくまとめました。

よく使う基本設定だけ覚えれば、十分きれいにスマホ対応できるので、ぜひ参考にしてくださいね！

レスポンシブCSSでまず覚えておきたい基本ルール

最初に、レスポンシブCSSでまず覚えておきたい基本ルールから見ていきましょう！

基本① スマホ用スタイルの書き方（メディアクエリ）

レスポンシブ対応では、スマホ用のCSSを次のように書きます。

@media screen and (max-width: 768px) {
  /* スマホ用のスタイルを書く */
}

この中にスマホ専用の設定を入れていきます。

このメディアクエリを使うことが、レスポンシブデザインにするためにとても大切なポイントです。

基本② 画像を自動で縮小させる設定（必須）

ほとんどのサイトで必ず使う基本設定です。

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

これで画像がスマホ画面に合わせて自動で縮小されます。

基本③ 横幅は割合指定にする

固定サイズではなく、割合で指定すると崩れにくくなります。

width: 100%;

これだけでスマホ対応がかなりしやすくなります。

よく使うレスポンシブCSS設定パターン集

次に、「よく使うレスポンシブCSS設定パターン集」をご紹介します。

文字サイズをスマホ用に調整する

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

スマホでは少し大きめが読みやすいです。

横並びレイアウトを縦並びにする

@media screen and (max-width: 768px) {
  .box {
    display: block;
  }
}

スマホでは縦並びの方が見やすくなります。

表（テーブル）をスマホ対応にする

table {
  width: 100%;
}

さらに横スクロール対応すると安心です。

.table-wrap {
  overflow-x: auto;
}

画像をきれいに表示させる基本設定

すでに紹介しましたが、必ず入れておきましょう。

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

初心者がやりがちなミス

初心者がやりがちなミスをご紹介します。
次のような書き方はトラブルの原因になりやすいです。

できるだけ割合指定と基本設定を使いましょう。

レスポンシブCSSを書くときのチェックポイント

レスポンシブCSSを書くときのチェックポイントをご紹介します。
設定したあとは必ず確認しましょう。

やはり、実際にスマホで作成したホームページを見てチェックすることが、最も良い方法です。

まとめ

「レスポンシブ対応に必要なCSSの基本設定まとめ」の内容はいかがでしたでしょうか？

レスポンシブ対応のCSSは、あまり難しく考える必要はありません。

まずは、

この3つを基本にするだけで、ほとんどのスマホ対応はうまくいきますよ。

特に、「メディアクエリ」はとても大切で、このメディアクエリを使えば、画面サイズに合わせてホームページの形が変化して表示されるようになるので、ぜひ使っていきましょうね！