メディアクエリで画面サイズ別にCSSを切り替える方法

CSS3で追加されたメディアクエリ(Media Queries)とは

メディアクエリ(Media Queries)とは、画面サイズや解像度などの閲覧環境に応じて適用するスタイルを切り替えられるCSS3の機能です。従来のCSSにもあった、端末の種類に応じてスタイルの適用対象を限定する「Media Type」を拡張した仕様です。

このメディアクエリによって、閲覧者が利用している描画領域の広さを基準にして適用するスタイルを変更するような細かな装飾も可能になります。

■従来の条件指定では：
従来は、以下のHTMLソース(link要素)に示すように「印刷用(print)」や「画面用(screen)」などの、ざっくりとした括りでしかCSSの適用対象を指定できませんでした。

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

上記の場合は、

• 画面上に表示される際にはスタイルシート「screen.css」が適用され、
• 印刷される際にはスタイルシート「print.css」だけが適用

されます。

■CSS3での条件指定では：
CSS3のメディアクエリを使うと、以下のHTMLソース(link要素)のように「表示領域の横幅のピクセル数」に応じて適用するスタイルシートを分けるような、同じ「画面」であっても細かな条件指定が可能です。

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

上記の場合は、

• ブラウザの表示領域の横幅が899px以下の場合には「mobile.css」が適用され、
• ブラウザの表示領域の横幅が900px以上の場合には「pc.css」が適用

されます。PC環境とモバイル環境とで適用されるスタイルシートを分けたい場合に便利です。

※上記のソースにある「screen and」の部分は書かなくても問題ありません。メディアクエリ非対応の古いブラウザに対してメディアクエリを使えるようにするスクリプトには、最初に「screen and」を加えておかないと動かないものがあったため(後述)、本記事では「@media screen and ～」のように記述しています。

link要素のmedia属性だけでなく、CSSソース内でも指定可能

適用対象の条件は、CSSソースの中に下記のように記述することもできます。この方法なら、すべてのスタイルを1つのCSSソース中に含めておけるため、対象ごとにCSSファイルを分割する必要はありません。

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

なお、同時に複数の条件を指定することもできるため、「画面の横幅が320px以上で800px以下の場合」といった記述も可能です。詳しくは後述します。

メディアクエリ(Media Queries)で閲覧環境別のデザイン適用が容易に

このメディアクエリを利用すると、複雑なスクリプトを用いてユーザエージェント名や画面サイズなどの情報を種g特判別しなくても、ユーザの閲覧環境に合わせたデザイン(＝レスポンシブ・ウェブデザイン)が簡単に実現できるようになります。

メディアクエリを使ってスタイルを切り替える例として、画面サイズに応じてボックスの背景色が変化するサンプルページを用意しました。お使いのブラウザで表示を確認してみて下さい。
→ メディアクエリ を使ったサンプルページ

ブラウザのウインドウの横幅を変化させるなどして「表示領域の横幅」を変えると、右図のようにボックスの背景色も変化します。

それでは次のページから、メディアクエリを使った分岐の記述方法を詳しくご紹介いたします。