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

meta”要素~“name="color-scheme"HTML Living Standardで定義

記事Jul. 12th,2021
Jul.16th,2020
ウェブページが対応するカラー・スキームを示す
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

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-schemeHTML Living Standardで定義 文書が対応するカラー・スキーム
content="" メタデータの値 カラー・スキーム CSSのcolor-scheme”プロパティの値
任意属性
グローバル属性

仕様書

HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
color-scheme
定義なし

定義なし

定義なし

定義なし

定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク