メディアクエリはCSS 3の機能であり、画面解像度（モバイルとデスクトップの画面サイズなど）などのさまざまな条件に合わせてコンテンツのレンダリングを適応させることができます。2012年6月にW3C推奨標準となり[1] 、レスポンシブウェブデザイン（RWD）の基盤技術となっています。
歴史
メディアクエリは、 1994年のHåkon Wium Lieによる最初のCSS提案で初めて概説されましたが、[2] CSS 1の一部にはなりませんでした。 1997年のHTML4勧告では、将来メディアクエリがどのように追加されるかの例が示されています。[3] 2000年に、W3Cはメディアクエリと、さまざまなデバイスをサポートするための別のスキームであるCC/PPの作業を開始しました。2つは同じ問題に対処していますが、CC/PPはサーバー中心であるのに対し、メディアクエリはブラウザー中心です。[4]メディアクエリの最初の公開ワーキングドラフトは2001年に公開されました。[5] 2010年7月27日に勧告候補として公開されたメディアクエリレベル3は、2012年6月19日にW3C勧告になりました。修正案は2022年4月5日に公開されました。[6]
メディアクエリレベル4は、2017年5月9日にワーキングドラフトとして公開され、2021年12月25日時点でW3Cの候補勧告ドラフトとなった。[7]
使用法
メディアクエリは、メディアタイプと、メディア特性を含む1つ以上の式で構成され、真または偽のいずれかに解決されます。メディアクエリで指定されたメディアタイプが、文書が表示されるデバイスの種類と一致し、メディアクエリ内のすべての式が真である場合、クエリの結果は真となります。メディアクエリが真の場合、通常のカスケーディングルールに従って、対応するスタイルシートまたはスタイルルールが適用されます。[8] [9]
メディアクエリはCSSの「アットルール」を使用します。
@media
例
以下は CSS メディア クエリの例です。
@ media screen and ( display-mode : fullscreen ) { /* ここのコードはフルスクリーンの画面にのみ適用されます */ }
@ media all and ( orientation : landscape ) { /* ここのコードは横向きの場合にのみ適用されます */ }
@ media screen and ( min-device-width : 500px ) { /* ここのコードは幅が500ピクセル以上の画面にのみ適用されます */ }
メディアの種類
メディアタイプは、 HTML文書のヘッダー要素内の「media」属性を用いて宣言できます。「media」属性の値は、リンクされた文書がどのデバイスに表示されるかを指定します。[10]メディアタイプは、 XML処理命令、@ルール、および@ルール内でも宣言できます。CSS 2では、以下のメディアタイプが定義されています。[11]<link>@import@media
メディアタイプ「all」は、スタイルシートがすべてのメディアタイプに適用されることを示すためにも使用できます。[12]
メディア機能
以下の表は、2007年6月6日付のW3Cメディアクエリに関する最新の勧告に記載されているメディア特性を示しています。[13]
| 特徴 | 価値 | 最小/最大 | 説明 |
|---|---|---|---|
color |
整数 | はい | 色成分あたりのビット数 |
color-index |
整数 | はい | カラールックアップテーブルのエントリ数 |
device-aspect-ratio |
整数/整数 | はい | アスペクト比 |
device-height |
長さ | はい | 出力装置の高さ |
device-width |
長さ | はい | 出力デバイスの幅 |
grid |
整数 | いいえ | グリッドベースのデバイスの場合 |
height |
長さ | はい | レンダリング面の高さ |
monochrome |
整数 | はい | モノクロフレームバッファのピクセルあたりのビット数 |
orientation |
「ポートレート」または「ランドスケープ」 | いいえ | 画面の向き |
resolution |
解像度（「dpi」、「dpcm」または「dppx」） | はい | 解決 |
scan |
「プログレッシブ」または「インターレース」 | いいえ | 「tv」メディアタイプのスキャンプロセス |
width |
長さ | はい | レンダリング面の幅 |
参考文献
- ^ メディアクエリ出版履歴 2012年6月19日
- ^ Håkon Wium Lie. 「Cascading HTML Style Sheets」 . 2013年1月20日閲覧。
- ^ 「基本的なHTMLデータ型」www.w3.org。
- ^ 「Re: Media Queries CRに関するフィードバック、Håkon Wium Lie氏、2002年7月17日 (www-style@w3.org、2002年7月から)」。lists.w3.org。
- ^ 「メディアクエリ」www.w3.org。
- ^ メディアクエリ レベル3
- ^ メディアクエリ レベル 4
- ^ 「CSSメディアクエリ」。Mozilla Developer Networkおよび個々の貢献者。 2017年4月28日閲覧。
- ^ 「レスポンシブWebデザインでメディアクエリを作成する方法」。TechRepublic。
- ^ 「HTMLリンクタグ」W3Schools . 2017年4月28日閲覧。
- ^ 「メディアクエリ」. World Wide Web Consortium . 2017年4月28日閲覧。
- ^ 「メディアクエリ」. World Wide Web Consortium . 2017年4月28日閲覧。
- ^ 「メディアクエリ」. Sitepoint . 2017年4月28日閲覧。
外部リンク
- W3C – メディアクエリ勧告 2012年6月19日
- W3C – CSS仕様 > メディアクエリ
- CodeSpot – CSS メディア クエリ
