1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
|
---
title: '@media'
slug: Web/CSS/@media
tags:
- '@-規則'
- '@media'
- CSS
- Reference
- 条件付き
translation_of: Web/CSS/@media
---
<div>{{CSSRef}}</div>
<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>@media</code></strong> <a href="/ja/docs/Web/CSS/At-rule">@-規則</a>は、一つまたは複数の<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries">メディアクエリ</a>の結果に基づいて、スタイルシートの一部を適用するために使用することができます。</span>これによってメディアクエリを指定することができ、メディアクエリがコンテンツの使用される端末に一致する場合にのみ、文書に CSS のブロックを適用することができます。</p>
<div class="note">
<p><strong>メモ:</strong> JavaScript では、 <code>@media</code> を使用して作成されたルールは、 CSS オブジェクトモデルの {{domxref("CSSMediaRule")}} インターフェイスによってアクセスすることができます。</p>
</div>
<h2 id="Syntax" name="Syntax">構文</h2>
<p><code>@media</code> @-規則は、コードの最上位に配置したり、他の<a href="/ja/docs/Web/CSS/At-rule#Conditional_group_rules">条件付きグループ @-規則</a>の中に入れ子にして配置したりすることができます。</p>
<pre class="brush: css no-line-numbers">/* コードの最上位 */
@media screen and (min-width: 900px) {
article {
padding: 1rem 3rem;
}
}
/* 他の条件付き＠規則の中にネスト */
@supports (display: flex) {
@media screen and (min-width: 900px) {
article {
display: flex;
}
}
}
</pre>
<p>メディアクエリの文法について詳しくは、<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Syntax">メディアクエリの利用</a>を参照してください。</p>
<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
{{csssyntax}}
<h2 id="Media_features" name="Media_features">メディア特性</h2>
<p>{{page("/ja/docs/Web/CSS/Media_Queries/Using_media_queries","Media features")}}</p>
<h2 id="Examples" name="Examples">例</h2>
<pre class="brush: css">@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; }
}
</pre>
<p>Media Queries Level 4 では、範囲を受け付ける特性を検査する際に、以下のようなより簡潔にメディアクエリを記述できる新しい範囲の構文が導入されました。</p>
<pre class="brush: css">@media (height > 600px) {
body { line-height: 1.4; }
}
@media (400px <= width <= 700px) {
body { line-height: 1.4; }
}
</pre>
<p>他の例については、<a class="internal" href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries">メディアクエリの利用</a>をご覧ください。</p>
<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
<p>サイトの文字の大きさを調整する人のために、<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries">メディアクエリ</a>で {{cssxref("<length>")}} が必要な時には <code><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units#Numeric_values">em</a></code> を使用してください。</p>
<p><code><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units#Numeric_values">em</a></code> および <code><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units#Numeric_values">px</a></code> はどちらも有効な単位ですが、 <code><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units#Numeric_values">em</a></code> はユーザーがブラウザーのテキストの寸法を変更した場合によりうまく動作します。</p>
<p>また、ユーザーの使い勝手を向上させるために Level 4 のメディアクエリを使用することを検討してください。例えば、 <code>prefers-reduced-motion</code> は<a href="/ja/docs/Web/CSS/@media/prefers-reduced-motion">ユーザーがシステムにアニメーションや動きの量を最小化するよう要求していることを検出します</a>。</p>
<h2 id="Security" name="Security">セキュリティ</h2>
<p>メディアクエリはユーザーが作業する端末の能力—およびその先にある、特性および設計—を調べる関係上、端末を識別する「指紋」を構築するために不正利用されたり、ユーザーにとって望ましくない観点のものに分類されるものに利用されたりする可能性があります。</p>
<p>この可能性のため、ブラウザーは返値がコンピューターを正確に識別するために使用することを防ぐために、何らかの方法で返値を偽造することがあります。ブラウザーは、この分野で他の手段を提供する場合もあります。例えば、 Firefox で「フィンガープリントの採取」をブロックしている場合、多くのメディアクエリは実際の端末の状態を表す値ではなく既定値を報告します。</p>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">備考</th>
<th scope="col">フィードバック</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS5 Media Queries', '#at-media5', '@media')}}</td>
<td>Level 4 で除外された <code>light-level</code>, <code>inverted-colors</code> およびカスタムメディアクエリを復帰。<br>
<code>prefers-reduced-motion</code>, <code>prefers-reduced-transparency</code>, <code>prefers-contrast</code>, <code>prefers-color-scheme</code> の各メディア特性を追加。</td>
<td><a href="https://github.com/w3c/csswg-drafts/issues">CSS Working Group drafts GitHub issues</a></td>
</tr>
<tr>
<td>{{SpecName('CSS3 Conditional', '#at-media', '@media')}}</td>
<td>{{Spec2('CSS3 Conditional')}}</td>
<td><code>@media</code> 規則の基本的な構文を定義。</td>
</tr>
<tr>
<td>{{SpecName('CSS4 Media Queries', '#media', '@media')}}</td>
<td>
<p>メディア特性 <code>scripting</code>, <code>pointer</code>, <code>hover</code>, <code>update</code>, <code>overflow-block</code>, <code>overflow-inline</code> を追加。<br>
<code>screen</code>, <code>print</code>, <code>speech</code>, <code>all</code> を除くすべてのメディアタイプを非推奨に指定。<br>
構文をもっと柔軟にし、他の事の間に <code>or</code> キーワードを追加。</p>
</td>
<td><a href="https://github.com/w3c/csswg-drafts/issues">CSS Working Group drafts GitHub issues</a></td>
</tr>
<tr>
<td>{{SpecName('CSS3 Media Queries', '#media0', '@media')}}</td>
<td></td>
<td></td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}</td>
<td>初回定義</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat("css.at-rules.media")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li><a class="internal" href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries">メディアクエリの利用</a></li>
<li>JavaScript では <code>@media</code> は CSS オブジェクトモデルの {{domxref("CSSMediaRule")}} インターフェイスを通じてアクセスすることができます。</li>
<li><a href="/ja/docs/Web/CSS/Mozilla_Extensions#Media_features">Mozilla 拡張メディア特性</a></li>
<li><a href="/ja/docs/Web/CSS/Webkit_Extensions#Media_features">WebKit 拡張メディア特性</a></li>
</ul>
|
