メディアクエリー

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

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

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

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

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

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

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

• @import
• @media

メディアクエリーの使用

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

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

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

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

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

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