Web/CSS/@media/prefers-color-scheme を更新

- 2021/08/13 時点の英語版に同期

1 files changed, 39 insertions, 59 deletions

diff --git a/files/ja/web/css/@media/prefers-color-scheme/index.md b/files/ja/web/css/@media/prefers-color-scheme/index.md
index 270ae10125..fee34abeb6 100644
--- a/files/ja/web/css/@media/prefers-color-scheme/index.md
+++ b/files/ja/web/css/@media/prefers-color-scheme/index.md
@@ -6,47 +6,43 @@ tags:
   - CSS
   - Reference
   - Web
-  - prefers-color-scheme
-  - ウェブ
   - メディア特性
+  - prefers-color-scheme
+browser-compat: css.at-rules.media.prefers-color-scheme
 translation_of: Web/CSS/@media/prefers-color-scheme
 ---
-<div class="blockIndicator note">
-<p><code>privacy.resistFingerprinting</code> を <strong>true</strong> に設定している場合は、 {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} の設定は <code>light</code> に上書きされます。<br>
- あるいは、ユーザーは <code>ui.systemUsesDarkTheme</code> という数値設定を作成して既定の動作を上書きし、 <code>light</code> (値: 0)、 <code>dark</code> (値: 1)、 <code>no-preference</code> (値: 2) の何れかの値を返すようにすることもできます。 (それ以外の値を指定すると、Firefox は <code>light</code> を返します。)</p>
-</div>
-
-<p><strong><code>prefers-color-scheme</code></strong> は <a href="/ja/docs/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a>で、ユーザーがシステムに要求したカラーテーマが明色か暗色かを検出するために使用します。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<dl>
- <dt><code><dfn>no-preference</dfn></code></dt>
- <dd>ユーザーが知られている設定をシステムに対して行っていないことを示します。このキーワード値は <a href="https://drafts.csswg.org/mediaqueries-5/#boolean-context" id="ref-for-boolean-context④">boolean context</a> では <code>false</code> と評価されます。</dd>
- <dt><code><dfn>light</dfn></code></dt>
- <dd>ユーザーがシステムに、明色のテーマを持つインターフェイスを好むと通知したことを示します。</dd>
- <dt><code><dfn>dark</dfn></code></dt>
- <dd>ユーザーがシステムに、暗色のテーマを持つインターフェイスを好むと通知したことを示します。</dd>
+**`prefers-color-scheme`** は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/Media_Queries/Using_media_queries#media_features)で、ユーザーがシステムに要求したカラーテーマが明色か暗色かを検出するために使用します。
+
+ユーザーはオペレーティングシステムの設定 (ライトまたはダークモードなど) やユーザーエージェントの設定で、この設定を示す場合があります。
+
+## 構文
+
+- `light`
+  - : ユーザーがシステムに、明色のテーマを持つインターフェイスにしたいと通知したか、アクティブな設定を示さなかったことを示します。
+- `dark`
+  - : ユーザーがシステムに、暗色のテーマを持つインターフェイスにしたいと通知したことを示します。
 </dl>
 
-<h2 id="Examples" name="Examples">例</h2>
+<h2 id="Examples">例</h3>
 
-<p>以下の要素は初期の色のテーマを持っています。これらの要素は、ユーザーの配色の好みに応じて、さらにテーマを設定することができます。</p>
+以下の要素は初期の色のテーマを持っています。これらの要素は、ユーザーの配色の好みに応じて、さらにテーマを設定することができます。
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div class="day"&gt;Day (initial)&lt;/div&gt;
-&lt;div class="day light-scheme"&gt;Day (changes in light scheme)&lt;/div&gt;
-&lt;div class="day dark-scheme"&gt;Day (changes in dark scheme)&lt;/div&gt; &lt;br&gt;
+```html
+<div class="day">Day (initial)</div>
+<div class="day light-scheme">Day (changes in light scheme)</div>
+<div class="day dark-scheme">Day (changes in dark scheme)</div> <br>
 
-&lt;div class="night"&gt;Night (initial)&lt;/div&gt;
-&lt;div class="night light-scheme"&gt;Night (changes in light scheme)&lt;/div&gt;
-&lt;div class="night dark-scheme"&gt;Night (changes in dark scheme)&lt;/div&gt;
-</pre>
+<div class="night">Night (initial)</div>
+<div class="night light-scheme">Night (changes in light scheme)</div>
+<div class="night dark-scheme">Night (changes in dark scheme)</div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.day   { background: #eee; color: black; }
+```css
+.day   { background: #eee; color: black; }
 .night { background: #333; color: white; }
 
 @media (prefers-color-scheme: dark) {
@@ -66,41 +62,25 @@ translation_of: Web/CSS/@media/prefers-color-scheme
   height: 2em;
   vertical-align: middle;
 }
-</pre>
+```
 
-<h3 id="Result" name="Result">結果</h3>
+### 結果
 
-<p>{{EmbedLiveSample("Examples")}}</p>
+{{EmbedLiveSample("Examples")}}
 
-<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', '#descdef-media-prefers-color-scheme', 'prefers-color-scheme')}}</td>
-   <td>{{Spec2('CSS5 Media Queries')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat("css.at-rules.media.prefers-color-scheme")}}</p>
+{{Compat}}
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
- <li><a href="https://www.youtube.com/watch?v=jmepqJ5UbuM">Video tutorial: Coding a Dark Mode for your Website</a></li>
- <li><a href="https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode">Redesigning your product and website for dark mode</a></li>
- <li><a href="https://blogs.windows.com/windowsexperience/2019/04/01/windows-10-tip-dark-theme-in-file-explorer/">Windows</a>, <a href="https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/dark-mode/">macOS</a>, <a href="https://www.theverge.com/2019/5/7/18530599/google-android-q-features-hands-on-dark-mode-gestures-accessibility-io-2019">Android</a> での色スキームの変更</li>
-</ul>
+- [Firefox での prefers-color-scheme のシミュレーション](/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#view_media_rules_for_prefers-color-scheme) (Firefox Page Inspector > Examine and edit CSS)
+- [Video tutorial: Coding a Dark Mode for your Website](https://www.youtube.com/watch?v=jmepqJ5UbuM)
+- [Redesigning your product and website for dark mode](https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode)
+- 色スキームの変更: [Windows](https://blogs.windows.com/windowsexperience/2019/04/01/windows-10-tip-dark-theme-in-file-explorer/)、[macOS](https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/dark-mode/)、[Android](https://www.theverge.com/2019/5/7/18530599/google-android-q-features-hands-on-dark-mode-gestures-accessibility-io-2019)、[その他のプラットフォーム](https://support.mozilla.org/en-US/questions/1271928)
 
-<div>{{QuickLinksWithSubpages("/ja/docs/Web/CSS/@media/")}}</div>
+{{QuickLinksWithSubpages("/ja/docs/Web/CSS/@media/")}}