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

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

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

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

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

HTML

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

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

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

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

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

CSS

p {color:#000;}

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

上記例では、表示幅（ブラウザ水平方向の表示領域）がそれぞれ
640pxまでは赤（#f00）
641px～1023pxまでは緑（#0f0）
1024px以上は青（#00f）
でテキストのカラー変更するよう設定しています。