Prefers-Color-SchemeとPrefers-Reduced-Motion
ダークモードやモーション低減アニメーションに対する、ユーザーのシステム設定を尊重します。
「Prefers-Color-SchemeとPrefers-Reduced-Motion」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
ユーザー設定に関するメディア特性
CSSでは、画面サイズ以外のユーザーのシステム設定も問い合わせることができます。これにより、サイト上でユーザーが操作しなくても、自動的なダークモードやアクセシビリティに配慮したアニメーションを実現できます。
prefers-color-scheme
ユーザーがOSをライトモードまたはダークモードに設定しているかどうかを検出します：
<p>This page follows your OS color-scheme preference.</p>
自動ダークモードの実装
最もすっきりした実装方法は、設定に応じて値を切り替えるCSS変数を使用することです：
<p>Auto dark mode via CSS variables.</p>
prefers-reduced-motion
アニメーションによって吐き気や不快感を覚えるユーザーもいます。prefers-reduced-motion: reduceメディア特性は、このアクセシビリティ設定を検出します。
<div class="box spun"></div>
モーション設定への配慮
すべてのアニメーションを無効にするのではなく、控えめな代替アニメーションを用意します：
<div class="card">Card with motion-aware transition</div>
prefers-contrast
ユーザーがより高いコントラスト（アクセシビリティのため）またはより低いコントラストを好むかどうかを検出します。それに応じて色を調整します：
<p>Contrast-aware text</p>
prefers-reduced-transparency
視覚障害のあるユーザーの中には、透明度を下げた表示を好む人もいます。backdrop-filterやopacityを使った効果を弱めます：
<div class="glass-card">Glass card</div>
JavaScriptからの設定へのアクセス
window.matchMedia()を使うと、JavaScriptからこれらの設定を問い合わせることができます：
<div class="demo dark-mode" id="demo">Preference-aware box (dark-mode class toggled via JS below)</div>
<script>
const dark = window.matchMedia('(prefers-color-scheme: dark)');
dark.addEventListener('change', e => {
document.getElementById('demo').classList.toggle('dark-mode', e.matches);
});
</script>
システム設定と手動切り替え
デフォルトではシステム設定に従い、ユーザーが切り替えで上書きできるようにします。上書き設定をlocalStorageに保存し、<html>にクラスを適用します：
<div class="theme dark">Manual dark override applied via class</div>
prefers-reduced-data
ユーザーがデータセーバーモードを有効にしているかどうかを検出します。より小さい画像を配信したり、必須ではないリソースを省略したりできます：
<div class="hero">Hero banner</div>
DevToolsでのテスト
Chrome DevToolsのRenderingタブでは、OSの設定を変更せずに、ダークモードやモーションの削減など、さまざまなメディア特性をエミュレートできます。
クイックチェック
自動ダークモードと、ユーザーによる手動切り替えの両方をサポートするには、どのように実装するのが最適ですか？
まとめ
prefers-color-schemeを使うと、自動ダークモードを実現できます。アクセシビリティのため、prefers-reduced-motionを使ってアニメーションを無効化または簡略化してください。両方ともCSS変数を使って実装すると、コードをすっきりと保守しやすくできます。ユーザーがOSの設定とは別に自分の設定を制御できるよう、必ず手動の上書き機能も用意してください。
AI チューターと学ぶ CSS — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 40
- レッスン
- 159
よくある質問
「Prefers-Color-SchemeとPrefers-Reduced-Motion」レッスンは無料ですか？
はい。「Prefers-Color-SchemeとPrefers-Reduced-Motion」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「Prefers-Color-SchemeとPrefers-Reduced-Motion」で何を学びますか？
ダークモードやモーション低減アニメーションに対する、ユーザーのシステム設定を尊重します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「Prefers-Color-SchemeとPrefers-Reduced-Motion」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 構文と一般的なブレークポイント
- 幅・高さ・向きのクエリ
- Prefers-Color-SchemeとPrefers-Reduced-Motion
- 複数のメディアクエリの結合