1. /
  2. /
  3. レスポンシブのためのメディアクエリの書き方

レスポンシブのためのメディアクエリの書き方

レスポンシブデザイン（ウィンドウサイズでPCやスマートフォンでの閲覧に最適化）でサイト構築する場合に要になります。
ウィンドウサイズによって読み込むCSS（スタイルシート）を切り替えることでユーザビリティの向上を図れますし、またモバイルフレンドリーに適用するためスマートフォン検索でもGoogleに嫌われにくくなります。

<head>～</head>内に記述する方法

link要素として指定します。
従来のスタイルシートの読み込み記述にメディアクエリを追加します。

<link rel="stylesheet" href="smart.css" media="screen and (max-width:640px)"> /* ※1 */
<link rel="stylesheet" href="tab.css" media="screen and (min-width:640px) and (max-width:1024px)"> /* ※2 */
<link rel="stylesheet" href="pc.css" media="screen and (min-width:1024px)"> /* ※3 */

※1　ウィンドウサイズが640pxまではsmart.cssが適用される。
※2　ウィンドウサイズが640pxから1024pxまではtab.cssが適用される。
※3　ウィンドウサイズが1024px以上はpc.cssが適用される。

上記では、media=” ”にウィンドウサイズによって読み込むCSSファイルを3パターンに条件分けして記述。
あとはそれぞれの条件に合わせて最適化したスタイルシート（CSSファイル）を用意します。

スタイルシート（CSSファイル）に直接記述する方法

ウィンドウサイズに合わせたスタイルシートを個別に用意せず、ひとつのスタイルシート内に条件分けして記述します。
下記はモバイルファースト（スマホ優先）の記述例です。

p {color:#000;}

@media screen and (max-width:640px) {
	/* ▼ウィンドウサイズが640pxまでは下記の内容 */
	p {color:#ff0000;}
	/* ▲ここまで */
}
@media screen and (min-width:641px) and (max-width:1023px) {
	/* ウィンドウサイズが640px～1024pxまでは下記の内容 */
	p {color:#00ff00;}
	/* ▲ここまで */
}
@media screen and (min-width:1024px) {
	/* ウィンドウサイズが1024px以上なら下記の内容 */
	p {color:#0000ff;}
	/* ▲ここまで */
}

上記例ではテキストのカラーを、ウィンドウ幅（width）が640pxまでは赤（#ff0000）、641px～1023pxまでは緑（#00ff00）、1024px以上は青（#0000ff）になります。