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