レスポンシブデザイン。PC・スマートフォンの表示切り替え【CSS基礎】

レスポンシブデザインとは

昔のWebサイトではパソコン用のサイトと携帯用（スマホ用）のサイトを別に作っていました。それではURLも別になってしまいますし、更新作業もそれぞれ行う必要があり２度手間になってしまいます。

そこでパソコンとスマホでHTMLを共用し、画面サイズごとの調整をCSSで行うことで、それらの問題をクリアしました。このWebデザインの方法を「レスポンシブWebデザイン」といいます。

パソコンとスマホでの表示の切り替え方法が知りたいです。

表示の切り替えは、メディアクエリというCSSを使っての方法が現在主流だね。それではメディアクエリを一緒に学んでみよう。

メディアクエリの書き方

パソコン、タブレット、スマートフォンなどデバイスごとに画面の幅が違います。この画面の幅を基準にしてCSSを切り替える方法が「メディアクエリ」です。

.hoge {
      width: 1000px;
      color: #ff0000;
}
/* 以下スマホ（430pxより小さくなった場合 */
@media screen and (max-width: 430px) {
    .hoge {
        width: 500px;
    }
}

パソコンでの表示をスマホに対応させるには、CSSに@media screen and (max-width: 任意のサイズ) { この間にCSS }と記述します。{ }は２重になるので気をつけましょう。メディアクエリは上書きしたいCSSよりも下に記述する必要があり、{ }の間には上書きしたいCSSのみ記述します。

任意のサイズのことを「ブレイクポイント」といい、ブレイクポイントまで画面の幅が小さくなった時にメディアクエリ内のCSSが反映されます。

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

.hoge {
      width: 1000px;
}
/* 以下タブレット（770pxより小さくなった場合 */
@media screen and (max-width: 770px) {
    .hoge {
        width: 800px;
    }
}
/* 以下スマホ（430pxより小さくなった場合 */
@media screen and (max-width: 430px) {
    .hoge {
        width: 500px;
    }
}

ブレイクポイントは複数設定することが可能です。この場合もサイズ順に記述することに気をつけましょう。

パソコン用から作るのか、スマホ用から作るのか、どっちが正解なんですか？

決まりはないので、CSSはパソコン用から先に記述しても、スマホ用から記述してもOKだよ。自分が管理しやすい方で構築しようね。