CSS Academy · レッスン

prefers-color-schemeメディアクエリ

prefers-color-schemeメディアクエリを使って、ユーザーのシステムがダークモードとライトモードのどちらを設定しているかを検出します。

レッスン 1/413 ステップ

「prefers-color-schemeメディアクエリ」はCoddyKit上の無料CSS Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。

自動ダークモードを使う理由

多くのユーザーは、快適さやバッテリー駆動時間（OLED画面の場合）、アクセシビリティのために、OSレベルでダークモードを有効にしています。prefers-color-schemeメディアクエリはこの設定を検出し、サイトを自動的に適応させます。

クエリの値

値は2つあります。

light — ユーザーが明るい配色を好む場合（または設定がない場合）
dark — ユーザーがダークモードを好む場合

<p>This page respects your OS dark mode setting.</p>

モバイルファーストのダークテーマ

ユーザーの多くがOLEDモバイルデバイスを利用している場合は、ダークテーマを基本スタイルにすることを検討してください。

<p>Dark by default; switches to light in light mode.</p>

CSS変数によるアプローチ

最もすっきりした実装は、配色ごとにトークンセットを定義する方法です。

<div class="card">Themed card using CSS variables</div>

ダークモードの画像

まぶしい画像が表示されないように、ダークモードでは画像の明るさを下げてください。

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='120'><rect width='200' height='120' fill='%23ff6347'/></svg>" alt="demo" />

JavaScriptでの検出

動的な動作を実現するには、JavaScriptでダークモードの設定を確認します。

<p id="theme-status">Checking...</p>
<script>
  const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  document.getElementById('theme-status').textContent = isDark ? 'System is in DARK mode' : 'System is in LIGHT mode';
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    document.getElementById('theme-status').textContent = e.matches ? 'System is in DARK mode' : 'System is in LIGHT mode';
  });
</script>

DevToolsでのテスト

Chrome DevToolsでは、Renderingタブ → Emulate CSS prefers-color-schemeを選択します。OSの設定を変更せずに、ライトとダークを切り替えられます。Firefoxでは、DevTools → Inspectorタブ → 目のアイコンのメニューを使用します。

ダークモードの配色原則

効果的なダークモードにするには、次の点に注意してください。

背景には純粋な黒ではなくダークグレーを使用する — 目の疲れを軽減できます
浮き上がりを表す影を減らす — より高いレイヤーには、より明るい背景色を使用します
見やすくなるように、境界線の色を明るく調整する
テキストのコントラスト比を確認する — 異なる比率が必要になる場合があります

色の反転というアンチパターン

ダークモードにするために、filter: invert(1)ですべての色を単純に反転しないでください。画像やアイコンの色が不自然になります。各要素に適した色を持つ、適切なダークモード用のトークンを使用してください。

パフォーマンス: フラッシュの回避

JavaScriptでテーマを切り替える場合は、ページのレンダリング前に<head>内の<script>タグで<html>にテーマのクラスを同期的に適用し、スタイル未適用テーマのフラッシュ（FOUT）を防いでください。

メタテーマカラー

ブラウザーUIの色（モバイルのアドレスバーやタスクスイッチャー）をダークテーマに合わせて更新します。

<pre class="code-sample">&lt;meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff"&gt;
&lt;meta name="theme-color" media="(prefers-color-scheme: dark)"  content="#1a1a2e"&gt;</pre>

確認問題

OSがダークモードに設定されている場合にダークモードのスタイルを適用するには、どのメディアクエリ値を使用しますか。

対話的なレッスンで答える

まとめ

prefers-color-scheme: darkはOSのダークモード設定を検出します。メディアクエリ内でCSS変数のトークン値を切り替えて、自動ダークモードを実装します。ダークモードでは画像の明るさを下げてください。DevToolsでテストし、ブラウザーのtheme-colorメタタグを更新すると、モバイルでの体験を完全に整えられます。

無料で開始

AI チューターと学ぶ CSS — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 40
レッスン: 159

無料で学習を始めるコース全体を表示

よくある質問

「prefers-color-schemeメディアクエリ」レッスンは無料ですか？

はい。「prefers-color-schemeメディアクエリ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。

「prefers-color-schemeメディアクエリ」で何を学びますか？

prefers-color-schemeメディアクエリを使って、ユーザーのシステムがダークモードとライトモードのどちらを設定しているかを検出します。ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

CSS Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「prefers-color-schemeメディアクエリ」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このCSS Academyレッスンでコードを書いて実行できますか？

はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← CSS Academyに戻る