VIDEO LESSON

CSSのcolor-schemeの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 7:52動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、カラー・スキームです。
0:07ダークモードに対応しようとして、背景を暗く、文字を明るく変えたのに、入力欄やボタン、
0:13スクロールバーだけが白いまま残ってしまった、という経験はないでしょうか。
0:19それらの部品はブラウザーが用意する標準の見た目で描かれていて、ページの配色を伝えない限り自動では切り替わりません。
0:29カラー・スキームは、その標準部品に対して、この要素は暗い配色で描いてよい、
0:34とブラウザーへ意図を伝えるためのプロパティです。
0:39基本の書き方から実例、間違えやすい点まで、順番に見ていきましょう。
0:44書き方を確認します。
0:46カラー・スキームは、対象の要素に値をひとつ書くだけです。
0:50たとえばクラス名デモを持つ要素へ、プロパティ名、コロン、値のダーク、セミコロンと書くと、
0:55その要素と内側の標準部品が暗い配色の候補になります。
1:01ページ全体に効かせたい場合は、ルート要素、つまりエイチティーエムエル要素を選ぶルートという書き方で指定するのが一般的です。
1:10逆に、ページの一部分だけ暗いパネルにしたいときは、そのパネルにだけ書く、
1:14という使い方もできます。
1:18プロパティ名の後ろにコロンを置き、値の最後にセミコロンを付ける、という宣言の基本の形は、
1:22ほかのプロパティと同じです。
1:27まずはこの一行を、自分のページのルートへ書くところから始めてください。
1:32指定できる値の読み方です。
1:34ノーマルは初期値で、特別な意図を伝えない、という意味です。
1:39ライトは明るい配色、ダークは暗い配色に対応していることを伝えます。
1:44ポイントは、ライト・ダークのように空白で区切って複数を並べられることです。
1:50これは、この要素は明暗どちらの配色でも描ける、という宣言になります。
1:55ブラウザーは、その中から利用者の端末設定に合う方を選んで描きます。
2:01ひとつだけ書くと、その配色だけが候補になるため、端末が逆のモードでも部品は指定した側の色で描かれます。
2:09まずは、ページ全体にはライト・ダークの両方を書き、特定のパネルだけ単独の値を書く、
2:13という組み立てを覚えてください。
2:18初期値と継承を確認します。
2:20初期値はノーマルで、継承はします。
2:24継承する、というのは、親の要素に書けば内側の要素へ自動で伝わる、という性質です。
2:31ページ全体に効かせるときにルートへの指定が便利なのは、この継承のおかげでもあります。
2:39汎用的な値も書けます。
2:41親の計算値を使うインヘリット、仕様の初期値に戻すイニシャル、アンセットは継承するプロパティなのでインヘリットと同じ扱いになります。
2:53ふだんはライト、ダーク、あるいはその両方を直接書けば十分です。
2:59なお、継承するといっても、内側の要素に別の値が書いてあれば、そちらが優先されます。
3:06部分だけ逆の配色にしたいときは、この上書きの仕組みを使います。
3:12ここが一番間違えやすい点です。
3:15カラー・スキームをダークにしても、自分で指定した本文の色や背景色が、自動で反転するわけではありません。
3:23効くのは、ブラウザーが描く標準部品の配色です。
3:27具体的には、入力欄やチェックボックスのようなフォーム部品、スクロールバー、
3:32文字を選択したときの下地などに影響します。
3:36つまり、ページの暗い背景は自分でシーエスエスに書き、そのうえで部品の明暗をカラー・スキームで合わせる、
3:42という二段構えが必要です。
3:47指定しても本文の見た目が変わらない、と感じたら、それは故障ではなく仕様どおりの動きです。
3:54実例を見ていきます。
3:56まずエイチティーエムエルの用意です。
3:58ステージという箱の中に、デモというクラスを持つ要素を置き、その中にラベルと入力欄、
4:02ボタンを並べます。
4:05入力欄には、練習用の文字をあらかじめ入れておきます。
4:09準備として、頭の部分にはスタイルシートを読み込むリンクを置いてください。
4:14この入力欄とボタンが、ブラウザーの標準部品です。
4:17ラベルには入力欄と結びつけるためのフォー属性、入力欄には同じ値のアイディーを付けておきます。
4:24次のシーエスエスで、この部品の明暗がどう変わるかを確認します。
4:28次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。
4:33まずステージとデモに、余白や枠線などの土台の見た目を整えます。
4:39ここで注目してほしいのが、デモの背景と文字色に使っているキャンバスとキャンバステキストという値です。
4:48これらはブラウザーが持つシステムカラーで、配色の明暗に合わせて自動で切り替わります。
4:55そのうえで、今回の主役であるカラー・スキーム、ダークをデモへ追加します。
5:01すると入力欄やボタンといった標準部品が、暗い配色で描かれるようになります。
5:08値を変えて比べてみましょう。
5:10最後のカラー・スキームの値だけを、ダークからライトに置き換えます。
5:16すると、背景や文字に使ったシステムカラーも明るい側へ切り替わり、入力欄やボタンも明るい配色で描かれます。
5:25比較のコツは、変えるのはこの値ひとつだけにすることです。
5:30保存して再読み込みし、どの部品の色が変わったか、逆に何が変わらなかったかを言葉で整理してみてください。
5:38とくに入力欄の内側の色と、ボタンの面の色に注目すると、標準部品への効き方がはっきり見えます。
5:46システムカラーとの組み合わせを、もう少し掘り下げます。
5:51キャンバスは背景向け、キャンバステキストは文字向けのシステムカラーで、カラー・スキームで伝えた明暗に応じて、
5:56ブラウザーが適切な色を選んでくれます。
6:02自分で決めた色をベタ書きすると、この連動は起きません。
6:06ダークモード対応では、背景や文字にシステムカラーや変数を使い、どちらの配色で描くかの判断を、
6:14カラー・スキームと、利用者の設定を判定するメディアクエリ、プリファーズ・カラー・スキームに任せる組み立てが定番です。
6:23部品と地の色を同じ仕組みで動かすのが、破綻しない対応のコツです。
6:28効かないときの確認手順です。
6:30まず前提として、本文や背景が変わらないのは仕様です。
6:34確認すべきは、標準部品の色が切り替わっているかどうかです。
6:39開発者ツールを開き、ネットワークでスタイルシートが取得できているか、エレメンツで対象のクラスとセレクターが一致しているかを見ます。
6:49スタイルズで宣言が打ち消し線になっていれば、別の宣言に負けています。
6:55コンピューテッドでカラー・スキームの最終的な値も確認できます。
7:00それでも部品が変わって見えないときは、部品自体に背景色などを自分で指定していないかも見直してください。
7:08自前の指定があると、標準の配色よりそちらが優先されます。
7:13最後に互換性とまとめです。
7:15ブラウザーの対応は、クロームとエッジがエイティワン以降、ファイアフォックスがナインティシックス以降、
7:21サファリがサーティーン以降で、現在の主要ブラウザーでは広く使えます。
7:27練習としては、まずダークとライトの違いを言葉で説明し、次に文章量や親の幅だけを変えて結果を比べてみてください。
7:35まとめます。
7:36カラー・スキームは、標準部品の明暗の意図をブラウザーへ伝える指定です。
7:42ページの色そのものは自分のシーエスエスで整え、部品の配色はカラー・スキームで合わせる。
7:48この役割分担を覚えておいてください。
7:51お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

color-schemeの役割と主な指定値を解説。入力部品などの標準UIの明暗が変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのcolor-schemeの使い方：指定値・実例・効かない原因とブラウザー互換性 →