![この記事はHTML Living Standardに対応しています。](../../../s-utilities/image/article/ha-artinfo-htmlls-pc.png)
![この記事はHTML Living Standardに対応しています。](../../../s-utilities/image/article/ha-artinfo-htmlls-sp.png)
#
“name="color-scheme"”
“name="color-scheme"”が指定された“meta”要素はウェブページが対応するカラー・スキームを示します。
ウェブページが対応するカラー・スキームはCSSの“color-scheme”プロパティで示すことができますが、“meta”要素で示すことでCSSの読み込みを待たずにフォーム・コントロールなどのユーザー・エージェントの影響下にある要素や背景色などを望ましいカラー・スキームに合わせた色で表示することができます。
“content”属性の値は“html”要素の“color-scheme”プロパティの値として設定され、“表現上のヒント”として扱われます。
“name="color-scheme"”が指定された“meta”要素を複数配置してはいけません。
サンプルコード
ウェブページはライトモードにだけ対応している
<meta name="color-scheme" content="light">
ウェブページはライトモードとダークモードに対応している
<meta name="color-scheme" content="light dark">
#
属性と値
属性 | 値 | ||
---|---|---|---|
属性 | 説明 | 値 | 説明 |
必須属性 | |||
name="" | メタデータの名前 | color-scheme![]() |
文書が対応するカラー・スキーム |
content="" | メタデータの値 | カラー・スキーム | CSSの“color-scheme”プロパティの値 |
任意属性 | |||
グローバル属性 |
#