@media
CSS の @media
@-規則は、一つまたは複数のメディアクエリの結果に基づいて、スタイルシートの一部を適用するために使用することができます。これによってメディアクエリを指定することができ、メディアクエリがコンテンツの使用される端末に一致する場合にのみ、文書に CSS のブロックを適用することができます。
メモ: JavaScript では、 @media
を使用して作成されたルールは、 CSS オブジェクトモデルの CSSMediaRule
インターフェイスによってアクセスすることができます。
構文
@media
@-規則は、コードの最上位に配置したり、他の条件付きグループ @-規則の中に入れ子にして配置したりすることができます。
/* コードの最上位 */
@media screen and (min-width: 900px) {
article {
padding: 1rem 3rem;
}
}
/* 他の条件付き@規則の中にネスト */
@supports (display: flex) {
@media screen and (min-width: 900px) {
article {
display: flex;
}
}
}
メディアクエリの文法について詳しくは、メディアクエリの利用を参照してください。
形式文法
@media <media-query-list> { <group-rule-body> }ここで
<media-query-list> = <media-query>#
ここで
<media-query> = <media-condition> | [ not | only ]? <media-type> [ and <media-condition-without-or> ]?
ここで
<media-condition> = <media-not> | <media-and> | <media-or> | <media-in-parens>
<media-type> = <ident>
<media-condition-without-or> = <media-not> | <media-and> | <media-in-parens>ここで
<media-not> = not <media-in-parens>
<media-and> = <media-in-parens> [ and <media-in-parens> ]+
<media-or> = <media-in-parens> [ or <media-in-parens> ]+
<media-in-parens> = ( <media-condition> ) | <media-feature> | <general-enclosed>ここで
<media-feature> = ( [ <mf-plain> | <mf-boolean> | <mf-range> ] )
<general-enclosed> = [ <function-token> <any-value> ) ] | ( <ident> <any-value> )ここで
<mf-plain> = <mf-name> : <mf-value>
<mf-boolean> = <mf-name>
<mf-range> = <mf-name> [ '<' | '>' ]? '='? <mf-value> | <mf-value> [ '<' | '>' ]? '='? <mf-name> | <mf-value> '<' '='? <mf-name> '<' '='? <mf-value> | <mf-value> '>' '='? <mf-name> '>' '='? <mf-value>ここで
<mf-name> = <ident>
<mf-value> = <number> | <dimension> | <ident> | <ratio>
メディア特性
メディア特性は、特定のユーザーエージェントや、出力端末や、環境などの特性を記述します。メディア特性式は、存在又は値を検査するもので、完全に任意です。それぞれのメディア特性式は、括弧で囲む必要があります。
名前 | 概要 | 備考 |
---|---|---|
any-hover |
入力メカニズムで、ユーザーが要素上でのホバーを使用することができるものあるか | Media Queries Level 4 で追加。 |
any-pointer |
入力メカニズムにポインティングデバイスがあるか、もしそうであればどれだけ正確なものであるか | Media Queries Level 4 で追加。 |
aspect-ratio |
ビューポートの幅対高さのアスペクト比 | |
color |
出力端末の色コンポーネントあたりの色数、または端末がカラーでなければゼロ | |
color-gamut |
ユーザーエージェント及び出力端末が対応しているおよその色の範囲 | Media Queries Level 4 で追加。 |
color-index |
出力端末の色参照表の項目数、又は端末がそのような表を使用していないのであればゼロ | |
device-aspect-ratio |
出力端末の幅対高さのアスペクト比 | Media Queries Level 4 で非推奨。 |
device-height |
出力端末のレンダリング面の高さ | Media Queries Level 4 で非推奨。 |
device-width |
出力端末のレンダリング面の幅 | Media Queries Level 4 で非推奨。 |
display-mode |
ウェブアプリのマニフェストの display メンバーで指定されているアプリケーションの表示モード |
Web App Manifest 仕様書で定義 |
forced-colors (en-US) |
ユーザーエージェントがカラーパレットを制限しているかどうかを検出する | Media Queries Level 5 で追加。 |
grid |
出力端末はグリッドとビットマップ画面のどちらを使用するか | |
height |
ビューポートの高さ | |
hover |
主要な入力メカニズムで、ユーザーが要素上でのホバーを使用することができるか | Media Queries Level 4 で追加。 |
inverted-colors |
ユーザーエージェントまたはその下の OS が色を反転しているか | Media Queries Level 5 で追加。 |
light-level |
環境の明るさレベル | Media Queries Level 5 で追加。 |
monochrome |
出力端末のモノクロフレームバッファーにおけるピクセルあたりのビット数、又は端末がモノクロでなければゼロ | |
orientation |
ビューポートの向き | |
overflow-block |
ビューポートをブロック軸方向にあふれたコンテンツを出力端末がどのように扱うか | Media Queries Level 4 で追加。 |
overflow-inline |
ビューポートをインライン軸方向にあふれたコンテンツがスクロールできるか | Media Queries Level 4 で追加。 |
pointer |
主要な入力メカニズムがポインティングデバイスであるか、もしそうであればどれだけ正確なものであるか | Media Queries Level 4 で追加。 |
prefers-color-scheme |
ユーザーが明るいまたは暗い色遣いを望んでいるかどうかを検出する | Media Queries Level 5 で追加。 |
prefers-contrast |
ユーザーがシステムに隣り合う色のコントラスト量を増加または減少させるよう要求したかどうかを検出する | Media Queries Level 5 で追加。 |
prefers-reduced-motion |
ユーザーがページであまり動きを望まないかどうか | Media Queries Level 5 で追加。 |
prefers-reduced-transparency (en-US) |
ユーザーが透明度を下げるよう望んでいるかどうか | Media Queries Level 5 で追加。 |
resolution |
出力端末のピクセル密度 | |
scan |
出力端末のスキャン処理方式 | |
scripting |
スクリプト (例えば JavaScript) が利用できるかを検出する | Media Queries Level 5 で追加。 |
update |
どれだけの頻度で出力端末がコンテンツの表示を変更できるか | Media Queries Level 4 で追加。 |
width |
ビューポートの幅 |
例
@media print {
body { font-size: 10pt; }
}
@media screen {
body { font-size: 13px; }
}
@media screen, print {
body { line-height: 1.2; }
}
@media only screen
and (min-width: 320px)
and (max-width: 480px)
and (resolution: 150dpi) {
body { line-height: 1.4; }
}
Media Queries Level 4 では、範囲を受け付ける特性を検査する際に、以下のようなより簡潔にメディアクエリを記述できる新しい範囲の構文が導入されました。
@media (height > 600px) {
body { line-height: 1.4; }
}
@media (400px <= width <= 700px) {
body { line-height: 1.4; }
}
他の例については、メディアクエリの利用をご覧ください。
アクセシビリティの考慮事項
サイトの文字の大きさを調整する人のために、メディアクエリで <length>
が必要な時には em
を使用してください。
em
および px
はどちらも有効な単位ですが、 em
はユーザーがブラウザーのテキストの寸法を変更した場合によりうまく動作します。
また、ユーザーの使い勝手を向上させるために Level 4 のメディアクエリを使用することを検討してください。例えば、 prefers-reduced-motion
はユーザーがシステムにアニメーションや動きの量を最小化するよう要求していることを検出します。
セキュリティ
メディアクエリはユーザーが作業する端末の能力—およびその先にある、特性および設計—を調べる関係上、端末を識別する「指紋」を構築するために不正利用されたり、ユーザーにとって望ましくない観点のものに分類されるものに利用されたりする可能性があります。
この可能性のため、ブラウザーは返値がコンピューターを正確に識別するために使用することを防ぐために、何らかの方法で返値を偽造することがあります。ブラウザーは、この分野で他の手段を提供する場合もあります。例えば、 Firefox で「フィンガープリントの採取」をブロックしている場合、多くのメディアクエリは実際の端末の状態を表す値ではなく既定値を報告します。
仕様書
仕様書 | 備考 | フィードバック |
---|---|---|
Media Queries Level 5 @media の定義 |
Level 4 で除外された light-level , inverted-colors およびカスタムメディアクエリを復帰。prefers-reduced-motion , prefers-reduced-transparency , prefers-contrast , prefers-color-scheme の各メディア特性を追加。 |
CSS Working Group drafts GitHub issues |
CSS Conditional Rules Module Level 3 @media の定義 |
勧告候補 | @media 規則の基本的な構文を定義。 |
Media Queries Level 4 @media の定義 |
メディア特性 |
CSS Working Group drafts GitHub issues |
Media Queries @media の定義 |
||
CSS Level 2 (Revision 1) @media の定義 |
初回定義 |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- メディアクエリの利用
- JavaScript では
@media
は CSS オブジェクトモデルのCSSMediaRule
インターフェイスを通じてアクセスすることができます。 - Mozilla 拡張メディア特性
- WebKit 拡張メディア特性