Media Queriesの基本についてまとめてみた

更新日 2017年11月23日

Media Queriesを活用したサイト制作を始めようと思っているので、ざざっと調べたことからまとめてみました。まずは基本から…

Media Queriesってなに？

簡単に言うと、デバイスのスクリーンサイズなどの条件によって、読み込むスタイルが切り替えられるCSS3の機能です。

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

CSS2では上記のように、「print」や「screen」などを指定して印刷向け、スクリーン表示向けといった「media types (媒体型)」を指定して、それぞれのメディア向けにCSSを書くことができました。Media Queriesはこれが拡張されたもので、「media types (媒体型)」にくわえ「width」、「height」、「color」などの「media features (媒体特性)」を指定することで、指定に当てはまる機器に対応したCSSを書けるようにするものです。

指定できる条件

代表的な「media type (媒体型)」

screen
print
projection
handheld
tv

代表的な「media feature (媒体特性)」

width / height

max/minの接頭辞が付けられる。例: max-width
出力デバイスの対象表示域の幅・高さを指定
スクロールバーがある場合その幅も含まれる ※Webkitのバグで、SafariやChromeでは幅が含まれない模様…

device-width / device-height

max/minの接頭辞が付けられる。例: max-width
出力デバイスの描画面の幅・高さを指定
スクロールバーの幅は含まれない (?)

orientation

portrait/landscapeを指定できる
接頭辞はつけられない
出力デバイスのheightがwidth以上の場合 portrait、逆の場合 landscape になる

指定の例

以下の3つの方法で指定できますが、サイト最適化も考えて、ファイルの読み込み数をできるだけ少なくするために、はじめの@mediaをオススメします。

@media screen and (max-width: 800px) { ... }
@media all and (orientation: portrait) { ... }

@import url(example.css) screen and (max-width: 800px);

<link rel="stylesheet" media="screen and (max-width: 800px)" href="example.css" />

Media Queriesのブラウザサポート

Media Queriesは古いブラウザだとサポートされいないので、それらのブラウザをサポートしたい場合は注意が必要です。

Media Queriesがサポートされていないブラウザ

IE 5+
Firefox 1+
Safari 2

Media Queriesがサポートされているブラウザ

IE9
Firefox 3.5+
Opera 7+
Safari 3+
Chrome

上記のMedia Queriesがサポートされていないブラウザでは、css3-mediaqueries.jsというJavaScriptのライブラリを読み込むことで、その他のブラウザと同じようにMedia Queriesを指定して使うことができるようになります。ちなみに、このJavaScriptだと@importを使えないそうなので、やはり@mediaを使ったCSSの指定が一番良さそうです。

まとめと参考

たとえばMedia QueriesでPC向けサイトをスマートフォンに対応させるのは邪道だ！みたいな意見もあるようですが、それについては次回まとめてみたいと思います。個人的には、ケースバイケースでベストな選択をしていくのが良いとは思っていますが。。。

参考サイト

2011年5月9日に公開され、2017年11月23日に更新された記事です。

About the author

「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら。

ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net 、Twitter @rriver 、またはFacebook までご連絡ください。

この記事をシェアする