このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

color-scheme”プロパティ:対応するカラー・スキームCSS3で追加

記事Jul. 17th,2021
対応するカラー・スキームを示すプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 color-scheme: normal;
適用対象 すべての要素とテキスト
継承 Yes
パーセント値 パーセント値は指定できません
計算値 normal”、もしくは定義済みのカラー・スキームのリスト
アニメーション 離散

color-scheme”プロパティは要素が対応するカラー・スキームを示すプロパティです。

メディア・クエリprefers-color-scheme”メディア・フィーチャーではフォーム・コントロールなどのユーザー・エージェントの影響下にある要素のカラー・スキームを変更することができませんが、“color-scheme”プロパティを使用することで要素がどのカラー・スキームで描画されるべきなのかを示すことができます。

ルート要素に適用することで文書全体のカラー・スキームを示すことができます。個別の要素に適用することで一部だけを別のカラー・スキームにすることもできます。

color-scheme”プロパティで示されたカラー・スキームはユーザーが望むカラー・スキームと突き合わされ、実際に使用されるカラー・スキームが決定されます。

meta”要素で同様の指定を行うことでCSSの読み込みを待たずにフォーム・コントロールなどのユーザー・エージェントの影響下にある要素や背景色などを望ましいカラー・スキームに合わせた色で表示することができます。meta”要素による指定は“表現上のヒント”として扱われ、“color-scheme”プロパティによって上書きできます。

サンプルコード

:root { color-scheme: light dark;}

説明
normal 要素はどのカラー・スキームにも対応しておらず、ブラウザのデフォルトのカラー・スキームで描画するべきであることを示す (多くの場合“light”に似たカラー・スキームになります。)
light 要素が明るいカラー・スキームに対応していることを示す
dark 要素が暗いカラー・スキームに対応していることを示す
only ユーザー・エージェントがカラー・スキームを上書きすることを禁止する
共通キーワード

normal”キーワードは単独で使用し、“light”、“dark”や“only”キーワードとの併用はできません。

light”キーワード、“dark”キーワードは必要なものをホワイトスペースで区切って記述します。

only”キーワードは必要であれば“light”キーワードと“dark”キーワードの前もしくは後にホワイトスペースを挟んで1個だけ記述します。

仕様書

定義されている仕様書
Level 1
作業草稿(WD)
color-scheme
定義あり
Level 1
作業草稿(WD)
normal
定義あり
light
定義あり
dark
定義あり
only
定義あり

使用例

デフォルトのカラー・スキーム

:root { color-scheme: normal;}
表示サンプルはリンク先を参照新しいウィンドウで表示します

明るいカラー・スキーム

:root { color-scheme: light;}
表示サンプルはリンク先を参照新しいウィンドウで表示します

暗いカラー・スキーム

:root { color-scheme: dark;}
表示サンプルはリンク先を参照新しいウィンドウで表示します

明るいカラー・スキームと暗いカラー・スキーム

:root { color-scheme: light dark;}
表示サンプルはリンク先を参照新しいウィンドウで表示します

カラー・スキームの上書を禁止する

:root { color-scheme: light only;}
表示サンプルはリンク先を参照新しいウィンドウで表示します
:root { color-scheme: dark only;}
表示サンプルはリンク先を参照新しいウィンドウで表示します
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク