メディアクエリ

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

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

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

HTML でのメディアクエリ

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

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

JavaScript でのメディアクエリ

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

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

リファレンス

CSS @規則

ガイド

メディアクエリの利用

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

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

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

アクセシビリティのためのメディアクエリの使用

ユーザーがウェブサイトをより理解できるように、メディアクエリが支援できることを学びます。

仕様書

ブラウザーの対応

@media 規則

このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

関連情報

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