CSS2で導入されたメディアタイプ

CSS2で導入された@mediaルールにより、さまざまなメディアタイプに対してさまざまなスタイルルールを定義できるようになりました。

例:コンピュータ画面用、プリンタ用、ハンドヘルドデバイス用、テレビタイプのデバイス用など、一連のスタイルルールを設定できます。

残念ながら、これらのメディアタイプは、印刷メディアタイプを除いて、多くのデバイスでサポートされることはありませんでした。

CSS3で導入されたメディアクエリ

CSS3のメディアクエリは、CSS2メディアタイプの考え方を拡張したものです。
デバイスのタイプを探す代わりに、デバイスの機能を調べます。

メディアクエリは、次のような多くのことを確認するために使用できます。

• ビューポートの幅と高さ
• デバイスの幅と高さ
• 向き(タブレット/電話は横向きですか、それとも縦向きですか?)
• 解決

メディアクエリの使用は、カスタマイズされたスタイルシートをデスクトップ、ラップトップ、タブレット、および携帯電話(iPhoneやAndroidフォンなど)に配信するための一般的な手法です。

ブラウザのサポート

表の数字は、@mediaルールwを完全にサポートされている最初のブラウザバージョンを示しています。

メディアクエリの構文

メディアクエリはメディアタイプで構成され、trueまたはfalseに解決される1つ以上の式を含めることができます。

指定されたメディアタイプが、ドキュメントが表示されているデバイスのタイプと一致し、メディアクエリ内のすべての式がtrueの場合、クエリの結果はtrueです。メディアクエリがtrueの場合、通常のカスケードルールに従って、対応するスタイルシートまたはスタイルルールが適用されます。

notまたはonly演算子を使用しない限り、メディアタイプはオプションであり、allタイプが暗黙的に指定されます。

メディアごとに異なるスタイルシートを使用することもできます。

CSS3メディアタイプ

value	説明
all	すべてのメディアタイプデバイスに使用
print	プリンターに使用
screen	パソコンの画面、タブレット、スマートフォンなどに使用されます。
speech	ページを声に出して「読み上げる」スクリーンリーダーに使用

---

メディアクエリの簡単な例

メディアクエリを使用する1つの方法は、スタイルシート内に代替CSSセクションを配置することです。

次の例では、ビューポートの幅が480ピクセル以上の場合、背景色を薄緑に変更します(ビューポートが480ピクセル未満の場合、背景色はピンクになります)。

次の例は、ビューポートの幅が480ピクセル以上の場合にページの左側にフローティングするメニューを示しています(ビューポートが480ピクセル未満の場合、メニューはコンテンツの上に表示されます)。

CSS @mediaリファレンス

すべてのメディアタイプと機能/表現の完全な概要については、CSSリファレンスの@mediaルールを参照してください。