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

Webサイトを作ってみよう|連載CSS
記事内に広告が含まれています。

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

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

そこでパソコンとスマホで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 }と記述します。{ }は2重になるので気をつけましょう。メディアクエリは上書きしたいCSSよりも下に記述する必要があり{ }の間には上書きしたいCSSのみ記述します。

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

もしメディアクエリのCSSが反映されない場合は、HTMLのheadタグ

<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;
    }
}

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

メディアクエリの書き方

大→小(パソコンからスマホ等)
@media screen and (max-width: 任意のサイズ) { この間にCSS }

小→大(スマホからパソコン等)
@media screen and (min-width: 任意のサイズ) { この間にCSS }

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

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