このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
Media query (メディアクエリー)
メディアクエリー (media query) は、CSS、JavaScript、HTML、その他のウェブ言語において、文書のコンテンツとは無関係に、文書が表示されているユーザーエージェントや端末の側面をチェックし、関連するコードブロックや特性クエリーが適用されるべきかどうかを判断するための論理式です。
メディアクエリーは、 CSS の@media および@import アットルールで CSS スタイルを条件付きで適用するために使用され、 JavaScript ではmatchMedia() メソッド、matches プロパティ、change イベントなどでモニターのメディア状態を検査するために使用されます。メディアクエリーは<link>、<source>、<style> などHTML 要素におけるmedia 属性の値として用い、メディアクエリーが真であれば、条件付きでリンク、ソース、スタイルを適用します。media 属性を省略すると、既定でtrue となります。メディアクエリーは<img> 要素のsizes 属性の値としても使用されます。
メディアクエリーは、オプションのメディアクエリー修飾子とメディア型、そして 0 個以上のメディア条件と論理演算子で構成されます。
メディアクエリーは、ユーザーがブラウザーウィンドウを拡張したときや、モバイル端末を縦向きから横向きに反転させたときなど、ユーザー環境の変化に応じて再評価されます。
複数のカンマで区切られたメディアクエリーは、メディアクエリーリストを構成します。メディアクエリーリストは、その要素であるメディアクエリーのいずれかが真であれば真となり、すべて偽である場合にのみ偽となります。
メディアクエリーにはオプションで接頭辞として単一のメディアクエリー修飾子、not、only を付けることができ、not の場合は以下のメディアクエリーの意味を変更します。