2018.07.18

【CSS】レスポンシブデザインに必須のメディアクエリの書き方

目次

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

レスポンシブデザインとは、WEBサイトを見る端末のサイズに応じてデザインを変えることを指します。PCだけでなく様々なサイズの端末でWEBサイトが見られるようになっている今では、必須のテクニックといえるでしょう。

メディアクエリの書き方

レスポンシブデザインを導入するには、メディアクエリを書く必要があります。どこに書くかというと、新しいCSSファイルを作ってlinkタグで読み込む方法もありますが、既存のCSSにそのまま書いていく方法が分かりやすいので、今回はそちらの方法で解説していきます。

書き方は以下のようになります。max-widthは「最大の幅」という意味なので、この場合、画面幅が600px以下のときにのみ、中に書いたコードが適用されます。ちなみに、画面幅が600px以上のときのCSSを指定したい場合は、max-widthをmin-widthに変えればOKです。

@media (max-width: 600px) {

	/* ここに画面幅が600px以下の場合に適用させたいCSSを書いていく */
	/* ↓例 */
	h1 {
		color: red;
	}

}

ちなみに、「画面幅が〇〇px以上、〇〇px以下」というように2つの条件を付けたい場合は、下のように書きます。

@media (min-width: 500px) and (max-width: 800px) {
	
}

↑これで、画面幅が500px以上800px以下のときにのみCSSが適用されるようになりました。

また、全画面幅に共通のコードを書きたいときは、メディアクエリの中に書くのではなく、普通のCSSの書き方でOKです。共通のコードはメディアクエリの外に書いて、特定の画面幅のときに適用させたいCSSをメディアクエリの中に書く、というイメージですね!

(注)viewportを記述しよう

メディアクエリを正常に動作させるには、viewportを設定する必要があります。設定といっても簡単で、HTMLファイルの<head></head>の中に下のコードを記述するだけです。

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

注意する点として、このコードはCSSファイルの読み込みよりも上に記述するようにしましょう。

viewportの基本的な設定はこれで大丈夫ですが、他にも細かい指定ができるので、気になった方はこちらのサイトを参考にしてみるといいと思います。

モバイルファーストとデスクトップファースト

メディアクエリの記述の順番として、モバイルファーストとデスクトップファーストという考え方があります。モバイルファーストは、画面幅が小さいものから順に上から書いていくやり方の事で、デスクトップファーストはその逆になります。

↓モバイルファーストの例

@media (max-width: 600px) {

}

@media (min-width: 600px) and (max-width: 960px) {

}

@media (min-width: 960px) {
	
}

コードの順番をデスクトップファーストにした場合、モバイル端末でページを開いたときに、必要のないデスクトップ用のコードを先に読み込んでしまう(コードは上から順に読み込まれる)ため、表示速度が微妙に遅くなってしまいます。
そのため、ページの閲覧がデスクトップが多いならデスクトップファースト、モバイルが多いならモバイルファーストというように、ページの閲覧状況によってどちらを選択するかを決めるといいかと思います。

home

scroll