CSS メディアクエリー
CSS メディアクエリーモジュールにより、ビューポートの値やブラウザーや端末の機能を検査および問い合わせして、現在のユーザー環境に応じて CSS スタイルを条件付きで適用することができます。メディアクエリーは、 CSS の @media ルールや、 HTML や JavaScript などの他のコンテキストや言語で使用されます。
メディアクエリーは、レスポンシブデザインの中心的な要素です。メディアクエリーを使用すると、端末の特性やその値に応じて条件付きで CSS スタイルを設定することができます。一般的には、ビューポートのサイズに基づいてメディアクエリーを使用し、様々な画面サイズの端末に適切なレイアウトを設定します。例えば、幅の広い画面では 3 段組み、幅の狭い画面では 1 段組みにするなどです。
それ以外にも、ページを印刷する際にフォントサイズを大きくしてナビゲーションメニューを非表示にしたり、ページを縦向きまたは横向きで表示する際に段落間のパディングを調整したり、タッチ画面で操作しやすいようにボタンのサイズを大きくしたりといった例が挙げられます。
CSS では、 @media アットルールを使用して、メディアクエリーの結果に基づいて条件付きでスタイルの一部を適用することができます。 @import を使用すると、条件付きでスタイルシート全体を適用することもできます。
再利用可能な HTML コンポーネントを設計する場合、コンテナークエリーを使用することもできます。これにより、ビューポートやその他の端末の特性ではなく、コンテナー要素のサイズに基づいてスタイルを適用することができます。
リファレンス
アットルール
記述子
any-hoverany-pointeraspect-ratiocolorcolor-gamutcolor-indexdevice-aspect-ratiodevice-heightdevice-widthdisplay-modedynamic-rangeforced-colorsgridheighthoverinverted-colorsmonochromeorientationoverflow-blockoverflow-inlinepointerprefers-color-schemeprefers-contrastprefers-reduced-dataprefers-reduced-motionprefers-reduced-transparencyresolutionscanscriptingupdatevideo-dynamic-rangewidth
メモ:
CSS メディアクエリーレベル 5 では、まだ実装されていない 5 つの @media 記述子、 environment-blending, horizontal-viewport-segments, nav-controls, vertical-viewport-segments, video-color-gamut を導入しています。
メモ:
CSS メディアクエリーレベル 4 では、 3 つの @media 記述子、 device-aspect-ratio, device-height, device-width を非推奨にしています。
データ型と演算子
用語集の用語
ガイド
- メディアクエリーの使用
-
メディアクエリーと、その構文や演算子、メディアクエリー式を構築するために使用するメディア機能を紹介します。
- 学習: メディアクエリーの基本
-
メディアクエリーと、それを使用してレスポンシブデザインを作成するための手法の概要です。
- プログラムからのメディアクエリーのテスト
-
JavaScript の中でメディアクエリーを使用して端末の状態を特定する方法、メディアクエリーの結果が変化したとき（ユーザーが画面を回転させたり、ブラウザーの大きさを変更したりしたとき）にコードに通知されるよう、リスナーを設定する方法を説明します。
- アクセシビリティのためのメディアクエリーの使用
-
ユーザーがウェブサイトをより理解できるように、メディアクエリーが支援できることを学びます。
- 印刷
-
ウェブコンテンツの印刷出力を改善するためのヒントとテクニック。
- レスポンシブ画像
-
sizesを使用してメディアクエリーを使用し、ウェブサイトのレスポンシブ画像のソリューションを実装する方法を学びます。
関連概念
- CSS コンテナーモジュール
- CSS 条件付きルールモジュール
- CSS ページメディアモジュール
@pageアットルール
- CSS オブジェクトモデルモジュール
MediaQueryListインターフェイスMediaListインターフェイスmediaTextプロパティ
MediaQueryListEventオブジェクト
- Device Posture API
device-posture記述子
- HTML
- SVG の
media属性
仕様書
| Specification |
|---|
| Media Queries Level 3 |
| Media Queries Level 4 |
| Media Queries Level 5 |
関連情報
- コンテナークエリ－
srcsetおよびsizes属性の使用- CSS ページメディア
@supportsを使用すると、ブラウザーのさまざまな CSS の技術への対応状況に応じてスタイルを適用することができます。