レスポンシブデザイン、メディアクエリを設定しよう!

シュウ

今回はレスポンシブデザイン、メディアクエリを設定しよう!
の解説になります！

こんな方に読んでほしい

レスポンシブデザインを学び始めた方へ
レスポンシブ講座Part02になります。
今回はMedia Queries(メディアクエリ)について解説しております。

レスポンシブデザインとは、表示領域の幅によって見え方が変わるデザイン(Webサイトの見た目)のことを示します。
前回は、レスポンシブデザインに必須になってくるのが、meta viewportについて解説しました。
下記のviewportに関する記事を理解してPart02にいきましょう。

viewportに関する記事

レスポンシブデザイン、viewportを設定しよう!

viewportを設定することにより、画面幅いっぱいにコンテンツや本文を
合わせてくれます。

メディアクエリについて

Media Queries(メディアクエリ)とは、「各デバイスに適したCSSを適用させる」ことを示します。
ただし、ある条件を満たす時だけ指定したCSSが適用されるため、指定には注意が必要になります。
書き方は以下のようになります。

基本的な記述方法

/*--CSS--*/
@media メディアのタイプ and (特定の条件){

 /*--ここに各デバイスに適したCSSを記述します*/

}

メディアのタイプ

all
全てのデバイスになります。
screen　
主に「screen」を指定します
画面のあるデバイスになります。（主にPCやスマホ　など）
print
プリンターになります。
speech
音声出力デバイスになります。

基本的に指定するのは、「screen」になります。
「@media screen and (特定の条件)」の形を覚えておきましょう。

特定の条件とは、「画面幅」のことを示します。
例として、(min-width: 1025px)と指定した場合は、画面幅が1025px以上の場合という条件になります。

覚えておこう

min-width
○○○px以上だと〜という条件を指定する。
max-width
○○○px以下だと〜という条件を指定する。

ブレイクポイントについて

ブレイクポイントとは、デザインが切り替わる画面幅のポイントをブレイクポイントといいます。
上記で解説した、1025pxとは、どのような意味をもつか解説していきます。

覚えておこう

スマートフォン
大まかなサイズ：　320px〜540pxになります。
タブレット
大まかなサイズ：　600px〜1024pxになります。
PC
大まかなサイズ：　1025px(以上)〜になります。

数値は、大まかな端末毎のサイズになりますが、覚えておきましょう。
上記で解説した、1025pxとは、PCのみにCSSを適用させることになります。

CSSの記述方法まとめ

先程のメディアクエリの基本的な記述方法と、ブレイクポイントを合わせてCSSを指定します。
書き方は以下のようになります。

CSSの記述方法まとめ

/*--スマートフォン--*/
/*--メディアクエリの記述なし--*/

/*--タブレット--*/
@media screen and (min-width: 600px){
  /*--ここにタブレットに適したCSSを記述します*/
}

/*--PC--*/
@media screen and (min-width: 1025px){
  /*--ここにPCに適したCSSを記述します*/
}

ブレイクポイントについて検証

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ブレイクポイントについて検証</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
	<p>各デバイスで文字色が変わります。</p>
</body>
</html>

/*--スマートフォン--*/
/*--メディアクエリの記述なし--*/
  p {color: green;}

/*--タブレット--*/
@media screen and (min-width: 600px){
  p {color: blue;}
}

/*--PC--*/
@media screen and (min-width: 1025px){
  p {color: red;}
}

※name="viewport"の設定を忘れないように注意しましょう。