color-schemeプロパティ
color-schemeプロパティを使って、要素が対応しているテーマをブラウザーに伝えます。
「color-schemeプロパティ」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
color-schemeとは
color-schemeプロパティは、要素（またはページ）が対応する配色をブラウザーに伝えます。ブラウザーはこの情報を使って、スクロールバー、フォームコントロール、チェックボックス、入力欄の境界線などの独自UI要素を、指定された配色に合わせてスタイル設定します。
color-schemeの値
指定できる値は次のとおりです。
normal: 要素はドキュメントのデフォルトを使用しますlight: 要素はライト配色のみをサポートしますdark: 要素はダーク配色のみをサポートしますlight dark: 両方をサポートし、ブラウザーが設定に基づいて選択しますdark light: ダークを優先し、ライトにフォールバックします
ブラウザーUI要素
ブラウザーは、color-schemeに応じて次の要素を自動的にスタイル設定します。
- スクロールバー
- 入力欄、textarea、selectのドロップダウン
- チェックボックス、ラジオボタン
- 範囲スライダー
- 日付／時刻ピッカー
html要素への設定
ルート要素にcolor-schemeを設定すると、ページ全体のシステムUIの表示が変わります。
<input type="checkbox" /> <select><option>A</option><option>B</option></select>
メタタグによる指定
CSSの読み込み前に早く適用できるよう、HTMLのメタタグとしてcolor-schemeを宣言することもできます。
<pre class="code-sample"><meta name="color-scheme" content="light dark"></pre>
カスタムカラーを使わないダークモード
最小限のダークモードでは、color-scheme: darkを設定し、フォーム要素やスクロールバーの処理をブラウザーに任せます。
<p>Native form controls and page background adapt to dark automatically.</p>
<input type="text" placeholder="Native input" />
prefers-color-schemeとの組み合わせ
prefers-color-schemeで設定を検出し、カスタムトークンとcolor-schemeプロパティの両方を同時に設定します。
<div class="demo">Themed via variables + color-scheme</div>
スコープ付きcolor-scheme
特定の要素にcolor-schemeを適用すると、ダークなページ内に独立したライト配色の領域を作成できます。
<div class="light-widget">Always-light widget<br/><input type="date" /></div>
強制カラー／Windowsのハイコントラスト
forced-colorsメディアクエリは、Windowsのハイコントラストモードを検出します。包括的なアクセシビリティ対応のために、color-schemeとforced-colorsを組み合わせて使用してください。
<div class="card">Card respects forced-colors mode</div>
system-colorキーワード
強制カラーが有効な場合は、ユーザーが設定したアクセシブルな配色に対応するCSSのシステムカラーキーワードを使用します。
<button>System-styled button</button>
確認問題
html要素にcolor-scheme: darkを設定すると、CSSではどのような動作が有効になりますか。
まとめ
color-schemeは、要素やページに対してブラウザー自身のUIコントロールをどのようにスタイル設定するかを指示します。グローバルにcolor-scheme: light darkを使用すると、ネイティブUIを自動的に適応させられます。CSSカスタムプロパティと組み合わせて、完全なダークモードを実装してください。CSSの読み込み前に早く適用するには、メタタグを使用します。
よくある質問
「color-schemeプロパティ」レッスンは無料ですか？
はい。「color-schemeプロパティ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「color-schemeプロパティ」で何を学びますか？
color-schemeプロパティを使って、要素が対応しているテーマをブラウザーに伝えます。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「color-schemeプロパティ」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- prefers-color-schemeメディアクエリ
- テーマ設定のためのCSS変数
- color-schemeプロパティ
- 自動・手動ダークモード切り替え