メディアクエリによって、サイトやアプリを様々な引数や端末の特性に基づいて合わせることができます。
これはレスポンシブデザインのキーコンポーネントです。例えば、メディアクエリでは小さい端末でフォントの大きさを縮小したり、ページが縦長モードで表示されたときに段落間の間隔を増やしたり、タッチスクリーンでボタンを拡大したりすることができます。
CSS では、 @media @-規則を使用して、メディアクエリの結果に基づいて条件付きでスタイルの一部を適用することができます。 @import を使用すると、条件付きでスタイルシート全体を適用することもできます。
HTML でのメディアクエリ
HTML でも、メディアクエリは様々な要素に適用することができます。
-
<link>要素のmedia属性では、リンクされたリソース (ふつうは CSS) が適用されるメディアを定義します。 -
<source>要素のmedia属性では、ソースが適用されるメディアを定義します。 (これは<picture>要素内でのみ有効です。) -
<style>要素のmedia属性では、スタイルが適用されるメディアを定義します。
JavaScript でのメディアクエリ
JavaScript では、ウィンドウがメディアクエリに合うかどうかをテストするために Window.matchMedia() メソッドを利用することができます。また、 MediaQueryList.addListener() を使用して、クエリの状態が変更されたときに通知を受け取ることもできます。この機能により、サイトやアプリが端末の設定、方向、状態が変化したときに応答することができます。
プログラムからのメディアクエリの使用については、メディアクエリのテストで知ることができます。
リファレンス
CSS @規則
ガイド
- メディアクエリの利用
- メディアクエリと、その構文や演算子、メディアクエリ式を構築するために使用するメディア機能を紹介します。
- プログラムからのメディアクエリのテスト
- JavaScript の中でメディアクエリを使用して端末の状態を特定する方法、メディアクエリの結果が変化したとき (ユーザーが画面を回転させたり、ブラウザーの大きさを変更したりしたとき) にコードに通知されるよう、リスナーをセットアップする方法を説明します。
- アクセシビリティのためのメディアクエリの使用
- ユーザーがウェブサイトをより理解できるように、メディアクエリが支援できることを学びます。
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| Media Queries Level 5 | 編集者草案 | |
| CSS Conditional Rules Module Level 3 | 勧告候補 | |
| Media Queries Level 4 | 勧告候補 | |
| Media Queries | 勧告 | |
| CSS Level 2 (Revision 1) | 勧告 | 初回定義 |
関連情報
-
@supportsを使用すると、ブラウザーのさまざまな CSS の技術への対応状況に応じてスタイルを適用することができます。