メディアクエリ

メディアクエリによって、サイトやアプリを様々な引数や機器の特性に基づいて合わせることができます。

これはレスポンシブデザインのキーコンポーネントです。例えば、メディアクエリでは小さい機器でフォントの大きさを縮小したり、ページが縦長モードで表示されたときに段落間の間隔を増やしたり、タッチスクリーンでボタンを拡大したりすることができます。

CSS では、 @media @規則を使用して、メディアクエリの結果に基づいて条件付きでスタイルの一部を適用することができます。 @import を使用すると、条件付きでスタイルシート全体を適用することもできます。

HTML でのメディアクエリ

HTML でも、メディアクエリは様々な要素に適用することができます。/p>

• <link> 要素の media 属性では、リンクされたリソース (ふつうは CSS) が適用されるメディアを定義します。
• <source> 要素の media 属性では、ソースが適用されるメディアを定義します。 (これは <picture> 要素内でのみ有効です。)
• <style> 要素の media 属性では、スタイルが適用されるメディアを定義します。

JavaScript でのメディアクエリ

JavaScript では、ウィンドウがメディアクエリに合うかどうかをテストするために Window.matchMedia() メソッドを利用することができます。また、 MediaQueryList.addListener() を使用して、クエリの状態が変更されたときに通知を受け取ることもできます。この機能により、サイトやアプリが機器の設定、方向、状態が変化したときに応答することができます。

プログラムからのメディアクエリの使用については、メディアクエリのテストで知ることができます。

リファレンス

CSS @規則

ガイド

メディアクエリの利用

メディアクエリと、その構文や演算子、メディアクエリ式を構築するために使用するメディア機能を紹介します。

プログラムからのメディアクエリのテスト

JavaScript の中でメディアクエリを使用して機器の状態を特定する方法、メディアクエリの結果が変化したとき (ユーザーが画面を回転させたり、ブラウザーの大きさを変更したりしたとき) にコードに通知されるよう、リスナをセットアップする方法を説明します。

仕様書

ブラウザーの対応

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

関連情報

• @supports を使用すると、ブラウザーのさまざまな CSS の技術への対応状況に応じてスタイルを適用することができます。