CSSメディアクエリ
CSS2で導入されたメディアタイプ
CSS2で導入された@mediaルールにより、メディアタイプごとに異なるスタイルルールを定義できるようになりました。
例：コンピューター画面用に1セット、プリンター用に1セット、ハンドヘルドデバイス用に1セット、テレビタイプデバイス用に1セットなどのスタイルルールを設定できます。
残念ながら、これらのメディアタイプは、印刷メディアタイプを除いて、デバイスによって多くのサポートを受けることはありませんでした。
CSS3で導入されたメディアクエリ
CSS3のメディアクエリは、CSS2メディアタイプのアイデアを拡張しました。デバイスのタイプを探す代わりに、デバイスの機能を調べます。
メディアクエリは、次のような多くのことをチェックするために使用できます。
- ビューポートの幅と高さ
- デバイスの幅と高さ
- 向き（タブレット/電話は横向きまたは縦向きモードですか？）
- 解決
メディアクエリの使用は、デスクトップ、ラップトップ、タブレット、および携帯電話（iPhoneやAndroid電話など）に合わせたスタイルシートを配信するための一般的な手法です。
ブラウザのサポート
表の数字は、@mediaルールを完全にサポートする最初のブラウザバージョンを示しています。
| Property | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
メディアクエリ構文
メディアクエリはメディアタイプで構成され、trueまたはfalseのいずれかに解決される1つ以上の式を含めることができます。
@media not|only mediatype and (expressions) {
CSS-Code;
}
指定されたメディアタイプがドキュメントが表示されているデバイスのタイプと一致し、メディアクエリのすべての式が真である場合、クエリの結果は真になります。メディアクエリがtrueの場合、通常のカスケードルールに従って、対応するスタイルシートまたはスタイルルールが適用されます。
notまたはonly演算子を使用しない限り、メディアタイプはオプションであり、
allタイプは暗黙的に示されます。
メディアごとに異なるスタイルシートを使用することもできます。
<link rel="stylesheet" media="mediatype and|not|only (expressions)"
href="print.css">
CSS3メディアタイプ
| Value | Description |
|---|---|
| all | Used for all media type devices |
| Used for printers | |
| screen | Used for computer screens, tablets, smart-phones etc. |
| speech | Used for screenreaders that "reads" the page out loud |
メディアクエリの簡単な例
メディアクエリを使用する1つの方法は、スタイルシートのすぐ内側に代替CSSセクションを配置することです。
次の例では、ビューポートの幅が480ピクセル以上の場合、背景色を薄緑色に変更します（ビューポートの幅が480ピクセル未満の場合、背景色はピンクになります）。
例
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
次の例は、ビューポートの幅が480ピクセル以上の場合にページの左側に浮かぶメニューを示しています（ビューポートの幅が480ピクセル未満の場合、メニューはコンテンツの上に表示されます）。
例
@media screen and (min-width: 480px) {
#leftsidebar
{width: 200px; float: left;}
#main
{margin-left: 216px;}
}
その他のメディアクエリの例
メディアクエリのその他の例については、次のページ「CSSMQの例」に進んでください。
CSS @ mediaリファレンス
すべてのメディアタイプと機能/式の完全な概要については 、CSSリファレンスの@mediaルールを参照してください。