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

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

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

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

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

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

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

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

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