メディアクエリで画面サイズごとCSSを切り替えるには？

　Media Queriesとは、「ブラウザの表示領域」や「端末の画面サイズ」など閲覧環境の条件に応じてスタイルを振り分けるCSS3の機能です。
スクリプトを用いなくてもサイトをパソコンやスマートフォンで見るときのデザインを簡単に適用できます。

従来の方法とCSS3の違い

従来の方法

　以下のHTML(link要素)のように、「印刷用(print)」や「画面用(screen)」を指定します。

<link rel="stylesheet" href="screen.css" type="text/css" media="screen">
<link rel="stylesheet" href="print.css" type="text/css" media="print">

単純な括りでしかCSSの適用対象を指定できませんでした。

画面上に表示される場合：「screen.css」を適用
印刷される場合：「print.css」を適用

CSS3

　以下のHTMLのように、「表示領域の横幅が480px以下の場合にのみ適用」や「表示領域の横幅が900px以上の場合にのみ適用」など、細かい条件が指定できます。

<link rel="stylesheet" href="phone.css" type="text/css" media="screen and (max-width: 480px)">
<link rel="stylesheet" href="pc.css" type="text/css" media="screen and (min-width: 900px)">

ブラウザの表示領域の横幅が480px以下の場合のみ：「phone.css」を適用
ブラウザの表示領域の横幅が900px以上の場合のみ：「pc.css」を適用

CSS内でも適用可能

　link要素だけでなく、CSS内でも指定できます。CSSファイルに、下記のように記述することもできます。

@media screen and (max-width: 320px) {
   /* 表示領域が320px以下の場合に適用 */
   div#sidebar { width: 100%; }
}
@media screen and (min-width: 800px) {
   /* 表示領域が800px以上の場合に適用 */
   div#sidebar { width: 240px }
}

この方法なら、すべてのスタイルを1つのCSSソース中にまとめることができます。

記述例

link要素に記述

　link要素で分岐する方法です。

• ・横幅が568px：css1 だけが適用。
• ・横幅が853px：css1、css2 が適用。
• ・横幅が1,024px ：css1、css2、css3 が適用。
• ・横幅が1,800px：css1、css2、css3、css4 が適用

<link href="css1.css" rel="stylesheet" type="text/css">
<link href="css2.css" rel="stylesheet" type="text/css" media="screen and (min-width: 641px)">
<link href="css3.css" rel="stylesheet" type="text/css" media="screen and (min-width: 961px)">
<link href="css4.css" rel="stylesheet" type="text/css" media="screen and (min-width: 1200px)">

1つのcssファイルに記述

　単一のCSSファイルで分岐させます。

/* ▼すべての場合に適用 */
div#sidebar { width: 100%; }

/* 横幅が641px以上の場合に適用 */
@media screen and (min-width: 641px) {
   div#sidebar { width: 160px; }
}

/* 横幅が961px以上の場合に適用 */
@media screen and (min-width: 961px) {
   div#sidebar { width: 25%; }
}

横幅の最小単位と最大単位を指定

　条件指定は複数記述できます。
以下のように、最小サイズと最大サイズの両方を指定することもできます。

link要素

• ・横幅が0px～480px：phones.css を適用。
• ・横幅が481px～800px：tablets.css を適用。
• ・横幅が1,024px ：allpcs.css を適用。

<link href="phones.css" rel="stylesheet" type="text/css" media="screen and (min-width: 0px) and (max-width: 480px)" >
<link href="tablets.css" rel="stylesheet" type="text/css" media="screen and (min-width: 481px) and (max-width: 800px)" >
<link href="allpcs.css" rel="stylesheet" type="text/css" media="screen and (min-width: 801px)" >

cssファイル

　※「min-width: 0px」は記述不要です。

@media screen and (min-width: 0px) and (max-width: 480px) {
   div#sidebar { width: 100%; }
}
@media screen and (min-width: 481px) and (max-width: 800px) {
   div#sidebar { width: 160px; }
}
@media screen and (min-width: 801px) {
   div#sidebar { width: 25%; }
}

andで条件を絞る

　Media Queriesで適用対象を指定する際には、「and」を使って条件を絞ることができます。

screen and (min-width: 480px) and (max-width: 920px)

複数の条件を列挙

　カンマ記号を使うと、複数の条件を列挙できます。
「or」の役割を果たします。

print, screen and (min-width: 300px), screen and (max-width: 900px)

※「print」や「screen」は、CSSの「Media Type」の値です。
all、screen、print、handheld、tvがあります。