CSSでレスポンシブ対応する基本設定まとめ【初心者向け】

CSSを使ってホームページを作っていると、

・スマホで見ると崩れる
・レスポンシブと言われても何からやればいいか分からない
・とりあえず直したけど、合っているのか不安

こんな悩みも出てきますよね。

そこでこの記事では、CSS初心者の方向けに
「最低限これだけやればOK」というレスポンシブ対応の基本をまとめました。

現在は、スマホでホームページにアクセスをする人がとても多いので、
ぜひ確認してみてくださいね！

このページを読んでわかること

そもそもレスポンシブ対応とは？

レスポンシブ対応とは、

画面サイズに合わせて表示を変えること
パソコンとスマホで同じHTMLを使うこと
CSSで見た目を調整する考え方

のことです。

今は、スマホで見やすいかどうかがとても大切 になっています。

レスポンシブ対応で最低限やること一覧

それでは、レスポンシブ対応で最低限やること一覧をご紹介します。

まずは全体像を見てみましょう。

横幅を固定しない
画像を自動で縮める
スマホ用のCSSを用意する

この3つができていれば、大きく崩れることはほぼありません。

横幅を画面に合わせる基本設定

次に、横幅を画面に合わせる基本設定をご紹介します。

レスポンシブで一番大切なのが、横幅です。

.container {
  width: 100%;
}

これで、画面サイズに合わせて広がります。

固定幅に注意

width: 900px;

このような指定は、スマホでははみ出しの原因になります。

必要な場合は、max-width を使います。

画像をスマホ対応させる基本コード

ここでは、画像をスマホ対応させる基本コードをご紹介します。

画像対応は、ほぼこの1行でOKです。

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

この設定で、

大きすぎる画像がはみ出ない
スマホで自動的に縮む

ようになります。

レスポンシブでは 必須のコード です。

文字サイズ・行間を読みやすくする考え方

文字サイズ・行間を読みやすくする考え方をご紹介します。

スマホでは、文字の読みやすさがとても大切です。

文字サイズの考え方

小さすぎない
無理に細かくしない

パソコンでちょうど良くても、
スマホでは小さく感じることがあります。

行間も大切

行間が詰まりすぎると、
スマホではとても読みにくくなります。

body {
  line-height: 1.6;
}

これくらいが、読みやすい目安です。

横並びレイアウトをスマホで崩さない方法

横並びレイアウトをスマホで崩さない方法をご紹介します。

横並びは、スマホで崩れやすいポイントです。

基本の考え方

パソコン：横並び
スマホ：縦並び

に切り替えるのが安全です。

スマホで縦並びにする例

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

無理に横並びを続けない ことが、崩れない一番のポイントですよ。

メディアクエリの基本的な使い方

メディアクエリの基本的な使い方をお伝えします。

レスポンシブ対応では、メディアクエリを使います。

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

初心者はこれだけでOK

まずは1つだけ使う
スマホ用の調整をここにまとめる

たくさん作る必要はありません。

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

レスポンシブ対応でよくある失敗をご紹介します。

固定幅が残っている

👉 どこか1か所でもあると、崩れます。

画像だけ対応していない

👉 画像は特に忘れやすいです。

スマホ表示を確認していない

👉 必ずスマホサイズで確認しましょう。

初心者向けレスポンシブ基本チェックリスト

初心者向けレスポンシブ基本チェックリストをご紹介します。

仕上げに、ここをチェックしてください。

横スクロールは出ていないか
文字は無理なく読めるか
ボタンやリンクは押しやすいか

これだけ見れば十分です。

まとめ

CSSでレスポンシブ対応する基本設定まとめはいかがでしたでしょうか？

CSSでのレスポンシブ対応は、思っているほど難しくありません。

✔ 横幅を固定しない
✔ 画像を自動調整する
✔ スマホ用CSSを用意する

まずは「崩れないホームページ」 を目標にしましょう。

昔と違って、現在はパソコンやタブレット、スマホなど、
どの端末でもキレイにホームページを見れるようにすることが求められています。

私もそうですが、ホームページ作成者側としては、頭が痛いですよね。
（いろいろな端末で確認しないといけないので）

でも、ホームページをレスポンシブ対応していれば、基本的に、
どの画面サイズでもキレイにホームページは表示されますよ！

大変ではありますけど、ぜひ頑張っていきましょうね！

CSSで横並びレイアウトを作る基本｜スマホでも崩れない配置方法