diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-12-07 11:33:37 +0900 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-12-07 11:33:37 +0900 |
commit | 69de90014cbebf425786e59bc3b125a860d463e8 (patch) | |
tree | 149241e32cc5e536badc9b1594d85603394a8916 /files/ja/web/css/@media/index.html | |
parent | d09d5af3e67d78694fcbbfbf0aab5d359d461417 (diff) | |
download | translated-content-69de90014cbebf425786e59bc3b125a860d463e8.tar.gz translated-content-69de90014cbebf425786e59bc3b125a860d463e8.tar.bz2 translated-content-69de90014cbebf425786e59bc3b125a860d463e8.zip |
CSS メディアクエリーに関する記事を修正 (#3220)
* Glossary/Forbidden_header_name の変換準備
* Glossary/Forbidden_header_name を更新
- 2021/10/18 時点の英語版に同期
* Web/CSS/font-smooth を新規翻訳
- 2021/08/13 時点の英語版に同期
* Glossary/Forbidden_header_name の変換準備
* Glossary/Forbidden_header_name を更新
- 2021/10/18 時点の英語版に同期
* メディアクエリーのトップページを更新準備
* 2021/08/13 時点の英語版に同期
リダイレクトを修正
* 2021/10/22 時点の英語版に同期
* メディアクエリー関係のガイドを変換準備
* 2021/10/22 時点の英語版に同期
* 2021/08/13 時点の英語版に同期
* 2021/08/13 時点の英語版に同期
* メディア特性の文書の変換準備
* 2021/08/13 時点の英語版に同期
* 2021/08/13 時点の英語版に同期
* 2021/08/13 時点の英語版に同期
* 2021/08/13 時点の英語版に同期
* 2021/08/13 時点の英語版に同期
* 2021/08/13 時点の英語版に同期
* 2021/08/13 時点の英語版に同期
* 2021/09/13 時点の英語版に同期
* 2021/08/13 時点の英語版に同期
-webkit-device-pixel-ratio の追加修正
* 2021/08/13 時点の英語版に同期
* 2021/08/13 時点の英語版に同期
* メディアクエリー関係の文書へのリンクを修正
* 2021/08/13 時点の英語版に同期
* 2021/08/13 時点の英語版に同期
* 2021/08/13 時点の英語版に同期
* 2021/08/13 時点の英語版に同期
* 2021/08/13 時点の英語版に同期
* 2021/08/13 時点の英語版に同期
* 2021/08/13 時点の英語版に同期
* 2021/11/16 時点の英語版に同期
* 2021/10/04 時点の英語版に同期
* 2021/08/13 時点の英語版に同期
* 2021/08/13 時点の英語版に同期
* 2021/08/13 時点の英語版に同期
* 2021/08/13 時点の英語版に同期
* 2021/08/13 時点の英語版に同期
* 2021/08/13 時点の英語版に同期
* 2021/08/13 時点の英語版に同期
* 2021/08/13 時点の英語版に同期
* 2021/08/13 時点の英語版に同期
* 2021/08/13 時点の英語版に同期
* 2021/08/13 時点の英語版に同期
* 2021/08/13 時点の英語版に同期
* 2021/08/13 時点の英語版に同期
* 2021/08/13 時点の英語版に同期
* 2021/08/13 時点の英語版に同期
* 2021/08/13 時点の英語版に同期
Diffstat (limited to 'files/ja/web/css/@media/index.html')
-rw-r--r-- | files/ja/web/css/@media/index.html | 279 |
1 files changed, 180 insertions, 99 deletions
diff --git a/files/ja/web/css/@media/index.html b/files/ja/web/css/@media/index.html index b335cc8467..3cff0a4e22 100644 --- a/files/ja/web/css/@media/index.html +++ b/files/ja/web/css/@media/index.html @@ -2,33 +2,33 @@ title: '@media' slug: Web/CSS/@media tags: - - '@-規則' - '@media' + - アット規則 - CSS - - Reference - 条件付き + - リファレンス +browser-compat: css.at-rules.media translation_of: Web/CSS/@media --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<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> +**`@media`** は [CSS](/ja/docs/Web/CSS) の[アットルール](/ja/docs/Web/CSS/At-rule)で、1 つまたは複数の[メディアクエリー](/ja/docs/Web/CSS/Media_Queries/Using_media_queries)の結果に基づいて、スタイルシートの一部を適用するために使用することができます。これによってメディアクエリーを指定し、そのメディアクエリーがコンテンツの使用される端末に一致する場合にのみ、文書に CSS のブロックを適用することができます。 -<div class="note"> -<p><strong>メモ:</strong> JavaScript では、 <code>@media</code> を使用して作成されたルールは、 CSS オブジェクトモデルの {{domxref("CSSMediaRule")}} インターフェイスによってアクセスすることができます。</p> -</div> +> **Note:** JavaScript では、 `@media` を使用して作成されたルールは、 CSS オブジェクトモデルの {{domxref("CSSMediaRule")}} インターフェイスによってアクセスすることができます。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<p><code>@media</code> @-規則は、コードの最上位に配置したり、他の<a href="/ja/docs/Web/CSS/At-rule#条件付きグループルール">条件付きグループ @-規則</a>の中に入れ子にして配置したりすることができます。</p> +`@media` アットルールは、コードの最上位に配置したり、他の[条件付きグループアットルール](/ja/docs/Web/CSS/At-rule#条件付きグループルール)の中に入れ子にして配置したりすることができます。 -<pre class="brush: css no-line-numbers">/* コードの最上位 */ +```css +/* コードの最上位 */ @media screen and (min-width: 900px) { article { padding: 1rem 3rem; } } -/* 他の条件付き@規則の中にネスト */ +/* 他の条件付きアットルールの中にネスト */ @supports (display: flex) { @media screen and (min-width: 900px) { article { @@ -36,21 +36,157 @@ translation_of: Web/CSS/@media } } } -</pre> - -<p>メディアクエリの文法について詳しくは、<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Syntax">メディアクエリの利用</a>を参照してください。</p> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +``` + +メディアクエリーの構文について詳しくは、[メディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Using_media_queries#構文)を参照してください。 + +## 解説 + +### メディア種別 + +*メディア種別*は機器の全般的な分類を記述します。 +`not` または `only` 論理演算子を使用する場合を除き、メディア種別は省略可能であり、暗黙で `all` と見なされます。 + +- `all` + - : すべての機器に適合します。 +- `print` + - : ページのある資料や、画面に印刷プレビューモードで表示されている文書向けのものです。(これらの形式に特有の整形上の問題については、[ページ付きメディア](/ja/docs/Web/CSS/Paged_Media)を参照してください。) +- `screen` + - : 主に画面向けのものです。 +- `speech` + - : 音声合成向けのものです。 + +> **Note:** CSS2.1 および [Media Queries 3](https://drafts.csswg.org/mediaqueries-3/#background) では、その他のメディア種別 (`tty`, `tv`, `projection`, `handheld`, `braille`, `embossed`, `aural`) が定義されていましたが、これらは [Media Queries 4](https://dev.w3.org/csswg/mediaqueries/#media-types) で非推奨となったため、使用すべきではありません。 +> `aural` タイプは `speech` に置き換えられましたが、これも同様です。 + +### メディア特性 + +*メディア特性*は、{{glossary("user agent", "ユーザーエージェント")}}、出力装置、環境の特定の特徴を記述します。 +メディア特性式は、その存在や値を調べるもので、完全に任意です。それぞれのメディア特性式は、括弧で囲む必要があります。 + +- {{cssxref("@media/any-hover", "any-hover")}} + - : 入力メカニズムで、ユーザーが要素上でのホバーを使用することができるものあるか。 + Media Queries Level 4 で追加。 +- {{cssxref("@media/any-pointer", "any-pointer")}} + - : 入力メカニズムにポインティングデバイスがあるか、もしそうであればどれだけ正確なものであるか。 + Media Queries Level 4 で追加。 +- {{cssxref("@media/aspect-ratio", "aspect-ratio")}} + - : ビューポートの幅対高さのアスペクト比。 +- {{cssxref("@media/color", "color")}} + - : 出力機器の色コンポーネントあたりの色のビット数、または端末がカラーでなければゼロ。 +- {{cssxref("@media/color-gamut", "color-gamut")}} + - : ユーザーエージェントおよび出力機器が対応しているおよその色の範囲。 + Media Queries Level 4 で追加。 +- {{cssxref("@media/color-index", "color-index")}} + - : 出力機器の色参照表の項目数、または端末がそのような表を使用していないのであればゼロ。 +- {{cssxref("@media/device-aspect-ratio", "device-aspect-ratio")}} {{deprecated_inline}} + - : 出力機器の幅対高さのアスペクト比。 + Media Queries Level 4 で非推奨。 +- {{cssxref("@media/device-height", "device-height")}} {{deprecated_inline}} + - : 出力機器のレンダリング面の高さ。 + Media Queries Level 4 で非推奨。 +- {{cssxref("@media/device-width", "device-width")}} {{deprecated_inline}} + - : 出力機器のレンダリング面の幅。 Media Queries Level 4 で非推奨。 +- {{cssxref("@media/display-mode", "display-mode")}} + - : ウェブアプリのマニフェストの [`display`](/ja/docs/Web/Manifest#display) メンバーで指定されているアプリケーションの表示モード。 + [Web App Manifest 仕様書](https://w3c.github.io/manifest/#the-display-mode-media-feature)で定義。 +- {{cssxref("@media/forced-colors", "forced-colors")}} + - : ユーザーエージェントがカラーパレットを制限しているかどうかを検出。 + Media Queries Level 5 で追加。 +- {{cssxref("@media/grid", "grid")}} + - : 出力機器はグリッドとビットマップ画面のどちらを使用するか。 +- {{cssxref("@media/height", "height")}} + - : ビューポートの高さ。 +- {{cssxref("@media/hover", "hover")}} + - : 主要な入力メカニズムで、ユーザーが要素上でのホバーを使用することができるか。 + Media Queries Level 4 で追加。 +- {{cssxref("@media/inverted-colors", "inverted-colors")}} + - : ユーザーエージェントまたはその下の OS が色を反転しているか。 + Media Queries Level 5 で追加。 +- {{cssxref("@media/monochrome", "monochrome")}} + - : 出力機器のモノクロフレームバッファーにおけるピクセルあたりのビット数、または端末がモノクロでなければゼロ。 +- {{cssxref("@media/orientation", "orientation")}} + - : ビューポートの向き。 +- {{cssxref("@media/overflow-block", "overflow-block")}} + - : ビューポートをブロック軸方向にあふれたコンテンツを出力機器がどのように扱うか。 + Media Queries Level 4 で追加。 +- {{cssxref("@media/overflow-inline", "overflow-inline")}} + - : ビューポートをインライン軸方向にあふれたコンテンツがスクロールできるか。 + Media Queries Level 4 で追加。 +- {{cssxref("@media/pointer", "pointer")}} + - : 主要な入力メカニズムがポインティングデバイスであるか、もしそうであればどれだけ正確なものであるか。 + Media Queries Level 4 で追加。 +- {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} + - : ユーザーが明るいまたは暗い色遣いを望んでいるかどうかを検出。 + Media Queries Level 5 で追加。 +- {{cssxref("@media/prefers-contrast", "prefers-contrast")}} + - : ユーザーがシステムに隣り合う色のコントラスト量を増加または減少させるよう要求したかどうかを検出。 + Media Queries Level 5 で追加。 +- {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} + - : ユーザーがページであまり動きを望まないかどうか。 + Media Queries Level 5 で追加。 +- {{cssxref("@media/resolution", "resolution")}} + - : 出力機器のピクセル密度。 +- {{cssxref("@media/scripting", "scripting")}} + - : 出力機器のスキャン処理方式。 + Media Queries Level 5. で追加。 +- {{cssxref("@media/update-frequency", "update")}} + - : どれだけの頻度で出力機器がコンテンツの表示を変更できるか。 + Media Queries Level 4 で追加。 +- {{cssxref("@media/width", "width")}} + - : スクロールバーの幅を含むビューポートの幅。 + + +### 論理演算子 + +*論理演算子* `not`, `and`, `only` を使うと、複雑なメディアクエリーを構成することができます。 +また、複数のメディアクエリーをカンマで区切って 1 つのルールにまとめることもできます。 + +- `and` + - : 複数のメディア特性を 1 つのメディアクエリーに結合する際に使用されます。クエリーが `true` になるためには、結合させた各機能が `true` を返すことが必要です。 + また、メディア特性とメディア種別を結合する際にも使用されます。 +- `not` + - : メディアクエリーを反転するために使用され、クエリーが `false` を返す場合に `true` を返します。 + カンマで区切られたクエリーのリストの中にある場合は、適用された特定のクエリーのみを反転します。 + `not` 演算子を使用する場合は、メディア種別*も*指定しなければなりません。 + + > **Note:** レベル 3 では、個々のメディア特性式を否定するために `not` キーワードを使用することはできず、メディアクエリー全体のみを否定することしかできません。 +- `only` + - : クエリー全体が一致する場合にのみスタイルを適用します。 + これは、古いブラウザーが選択したスタイルを適用できないようにするのに便利です。 + `only` を使用しない場合、古いブラウザーは `screen and (max-width: 500px)` というクエリーを `screen` と解釈し、クエリーの残りの部分を無視して、すべての画面にそのスタイルを適用してしまいます。 + `only` 演算子を使用する場合は、メディア種別*も*指定しなければなりません。 +- `,` (カンマ) + - : カンマは、複数のメディアクエリーを 1 つのルールにまとめるために使用されます。 + カンマで区切られたリストの各クエリーは、他のクエリーとは別に扱われます。 + したがって、リスト内のクエリーのいずれかが `true` であれば、メディア文全体が `true` を返すことになります。 + 言い換えれば、リストは論理的な `or` 演算子のように動作します. + + +## アクセシビリティの考慮 + +サイトの文字の大きさを調整している人に合わせられるようには、[メディアクエリー](/ja/docs/Web/CSS/Media_Queries/Using_media_queries)で {{cssxref("<length>")}} が必要な時には [`em`](/ja/docs/Learn/CSS/Building_blocks/Values_and_units#numeric_values) を使用してください。 + +[`em`](/ja/docs/Learn/CSS/Building_blocks/Values_and_units#numeric_values) および [`px`](/ja/docs/Learn/CSS/Building_blocks/Values_and_units#numeric_values) はどちらも有効な単位ですが、 [`em`](/ja/docs/Learn/CSS/Building_blocks/Values_and_units#numeric_values) はユーザーがブラウザーのテキストの寸法を変更した場合によりうまく動作します。 + +また、ユーザーの使い勝手を向上させるために Level 4 のメディアクエリーを使用することを検討してください。例えば、 `prefers-reduced-motion` は[ユーザーがシステムにアニメーションや動きの量を最小化するよう要求していることを検出します](/ja/docs/Web/CSS/@media/prefers-reduced-motion)。 + +## セキュリティ + +メディアクエリーはユーザーが作業する端末の能力—およびその先にある、特性および設計—を調べる関係上、端末を識別する「指紋」を構築するために不正利用されたり、ユーザーにとって望ましくない観点のものに分類されるものに利用されたりする可能性があります。 + +この可能性のため、ブラウザーは返値がコンピューターを正確に識別するために使用することを防ぐために、何らかの方法で返値を偽造することがあります。ブラウザーは、この分野で他の手段を提供する場合もあります。例えば、 Firefox で「フィンガープリントの採取」をブロックしている場合、多くのメディアクエリーは実際の端末の状態を表す値ではなく既定値を報告します。 + +## 形式文法 {{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> +### print および screen メディア種別の検査 -<pre class="brush: css">@media print { +```css +@media print { body { font-size: 10pt; } } @@ -68,88 +204,33 @@ translation_of: Web/CSS/@media and (resolution: 150dpi) { body { line-height: 1.4; } } -</pre> +``` -<p>Media Queries Level 4 では、範囲を受け付ける特性を検査する際に、以下のようなより簡潔にメディアクエリを記述できる新しい範囲の構文が導入されました。</p> +Media Queries Level 4 では、範囲を受け付ける特性を検査する際に、以下のようなより簡潔にメディアクエリーを記述できる新しい範囲の構文が導入されました。 -<pre class="brush: css">@media (height > 600px) { +```css +@media (height > 600px) { body { line-height: 1.4; } } -@media (400px <= width <= 700px) { +@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> +``` + +他の例については、[メディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Using_media_queries)をご覧ください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [メディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Using_media_queries) +- JavaScript では `@media` は CSS オブジェクトモデルの {{domxref("CSSMediaRule")}} インターフェイスを通じてアクセスすることができます。 +- [Mozilla 拡張メディア特性](/ja/docs/Web/CSS/Mozilla_Extensions#media_features) +- [WebKit 拡張メディア特性](/ja/docs/Web/CSS/WebKit_Extensions#media_features) |