From 4e87a47b5583f9b3a476521b3ad5b998ae7987cd Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 27 Sep 2021 01:19:40 +0900 Subject: Web/CSS/@media/prefers-color-scheme を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/css/@media/prefers-color-scheme/index.html | 106 --------------------- .../web/css/@media/prefers-color-scheme/index.md | 106 +++++++++++++++++++++ 2 files changed, 106 insertions(+), 106 deletions(-) delete mode 100644 files/ja/web/css/@media/prefers-color-scheme/index.html create mode 100644 files/ja/web/css/@media/prefers-color-scheme/index.md (limited to 'files') diff --git a/files/ja/web/css/@media/prefers-color-scheme/index.html b/files/ja/web/css/@media/prefers-color-scheme/index.html deleted file mode 100644 index 270ae10125..0000000000 --- a/files/ja/web/css/@media/prefers-color-scheme/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: prefers-color-scheme -slug: Web/CSS/@media/prefers-color-scheme -tags: - - '@media' - - CSS - - Reference - - Web - - prefers-color-scheme - - ウェブ - - メディア特性 -translation_of: Web/CSS/@media/prefers-color-scheme ---- -
-

privacy.resistFingerprinting を true に設定している場合は、 {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} の設定は light に上書きされます。
- あるいは、ユーザーは ui.systemUsesDarkTheme という数値設定を作成して既定の動作を上書きし、 light (値: 0)、 dark (値: 1)、 no-preference (値: 2) の何れかの値を返すようにすることもできます。 (それ以外の値を指定すると、Firefox は light を返します。)

-
- -

prefers-color-scheme は CSS のメディア特性で、ユーザーがシステムに要求したカラーテーマが明色か暗色かを検出するために使用します。

- -

構文

- -
-
no-preference
-
ユーザーが知られている設定をシステムに対して行っていないことを示します。このキーワード値は boolean context では false と評価されます。
-
light
-
ユーザーがシステムに、明色のテーマを持つインターフェイスを好むと通知したことを示します。
-
dark
-
ユーザーがシステムに、暗色のテーマを持つインターフェイスを好むと通知したことを示します。
-
- -

例

- -

以下の要素は初期の色のテーマを持っています。これらの要素は、ユーザーの配色の好みに応じて、さらにテーマを設定することができます。

- -

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>
-
-<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>
-
- -

CSS

- -
.day   { background: #eee; color: black; }
-.night { background: #333; color: white; }
-
-@media (prefers-color-scheme: dark) {
-  .day.dark-scheme   { background:  #333; color: white; }
-  .night.dark-scheme { background: black; color:  #ddd; }
-}
-
-@media (prefers-color-scheme: light) {
-  .day.light-scheme   { background: white; color:  #555; }
-  .night.light-scheme { background:  #eee; color: black; }
-}
-
-.day, .night {
-  display: inline-block;
-  padding: 1em;
-  width: 7em;
-  height: 2em;
-  vertical-align: middle;
-}
-
- -

結果

- -

{{EmbedLiveSample("Examples")}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-color-scheme', 'prefers-color-scheme')}}{{Spec2('CSS5 Media Queries')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.at-rules.media.prefers-color-scheme")}}

- -

関連情報

- - - -
{{QuickLinksWithSubpages("/ja/docs/Web/CSS/@media/")}}
diff --git a/files/ja/web/css/@media/prefers-color-scheme/index.md b/files/ja/web/css/@media/prefers-color-scheme/index.md new file mode 100644 index 0000000000..270ae10125 --- /dev/null +++ b/files/ja/web/css/@media/prefers-color-scheme/index.md @@ -0,0 +1,106 @@ +--- +title: prefers-color-scheme +slug: Web/CSS/@media/prefers-color-scheme +tags: + - '@media' + - CSS + - Reference + - Web + - prefers-color-scheme + - ウェブ + - メディア特性 +translation_of: Web/CSS/@media/prefers-color-scheme +--- +
+

privacy.resistFingerprinting を true に設定している場合は、 {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} の設定は light に上書きされます。
+ あるいは、ユーザーは ui.systemUsesDarkTheme という数値設定を作成して既定の動作を上書きし、 light (値: 0)、 dark (値: 1)、 no-preference (値: 2) の何れかの値を返すようにすることもできます。 (それ以外の値を指定すると、Firefox は light を返します。)

+
+ +

prefers-color-scheme は CSS のメディア特性で、ユーザーがシステムに要求したカラーテーマが明色か暗色かを検出するために使用します。

+ +

構文

+ +
+
no-preference
+
ユーザーが知られている設定をシステムに対して行っていないことを示します。このキーワード値は boolean context では false と評価されます。
+
light
+
ユーザーがシステムに、明色のテーマを持つインターフェイスを好むと通知したことを示します。
+
dark
+
ユーザーがシステムに、暗色のテーマを持つインターフェイスを好むと通知したことを示します。
+
+ +

例

+ +

以下の要素は初期の色のテーマを持っています。これらの要素は、ユーザーの配色の好みに応じて、さらにテーマを設定することができます。

+ +

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>
+
+<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>
+
+ +

CSS

+ +
.day   { background: #eee; color: black; }
+.night { background: #333; color: white; }
+
+@media (prefers-color-scheme: dark) {
+  .day.dark-scheme   { background:  #333; color: white; }
+  .night.dark-scheme { background: black; color:  #ddd; }
+}
+
+@media (prefers-color-scheme: light) {
+  .day.light-scheme   { background: white; color:  #555; }
+  .night.light-scheme { background:  #eee; color: black; }
+}
+
+.day, .night {
+  display: inline-block;
+  padding: 1em;
+  width: 7em;
+  height: 2em;
+  vertical-align: middle;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Examples")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-color-scheme', 'prefers-color-scheme')}}{{Spec2('CSS5 Media Queries')}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.at-rules.media.prefers-color-scheme")}}

+ +

関連情報

+ + + +
{{QuickLinksWithSubpages("/ja/docs/Web/CSS/@media/")}}
-- cgit v1.2.3-54-g00ecf