【HTML Living Standard】color-scheme属性値の使い方
color-scheme属性値の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
color-schemeプロパティは、HTMLドキュメントがサポートするカラースキーム（配色）に関する情報をブラウザに伝えるためのプロパティです。具体的には、ウェブページがライトモード（明るい配色）やダークモード（暗い配色）といった、さまざまな表示設定に対応しているかどうかを示す役割を担います。
このプロパティを使用することで、ブラウザはユーザーのシステム設定や個々のブラウザ設定で選択されている配色（例えば、ダークモード設定）を考慮し、ウェブページをレンダリングする際の初期表示を最適化できます。ユーザーがダークモードを好む設定にしている場合、color-schemeプロパティが「dark」をサポートしていることを示していれば、ブラウザはその情報に基づいてページをダークモードで表示しようと試みます。
使用方法は、HTMLドキュメントの<head>セクション内に<meta>要素として記述します。例えば、ライトモードとダークモードの両方をサポートする場合、<meta name="color-scheme" content="light dark">のように指定します。ここでname属性にcolor-schemeを指定し、content属性にサポートするカラースキームのキーワード（light、dark、only lightなど）をスペース区切りで記述します。
このプロパティを適切に設定することで、ユーザーは自身の環境設定に合わせた一貫した閲覧体験を得ることができ、ウェブページのアクセシビリティとユーザーインターフェースの利便性を向上させることができます。CSSのprefers-color-schemeメディアクエリと組み合わせることで、さらに詳細なスタイル調整も可能になります。システムエンジニアを目指す方にとって、ユーザーの好みに合わせた柔軟なウェブページ提供は、現代のウェブ開発において重要な考慮事項の一つです。
構文(syntax)
1<meta name="color-scheme" content="light dark">
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTMLでカラーテーマ対応を実装する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>カラーテーマ対応サンプル</title> 7 <!-- 8 この meta タグは、このページがライトモードとダークモードの両方に対応することを 9 ブラウザに伝えます。ユーザーのシステム設定に応じて、ブラウザは自動的に 10 デフォルトのテキスト色や背景色を調整します。 11 --> 12 <meta name="color-scheme" content="dark light"> 13 <style> 14 /* 15 color-schemeの効果を確認しやすくするため、 16 CSSで明示的な背景色や文字色は設定していません。 17 これにより、ブラウザのデフォルトスタイルが color-scheme に従って変化するのを確認できます。 18 */ 19 body { 20 font-family: sans-serif; 21 margin: 20px; 22 padding: 20px; 23 } 24 h1 { 25 margin-bottom: 20px; 26 } 27 p { 28 line-height: 1.6; 29 } 30 </style> 31</head> 32<body> 33 <h1>システムテーマに対応するWebページ</h1> 34 <p>このページは、<code><meta name="color-scheme" content="dark light"></code> メタタグを使って、ユーザーのOSやブラウザのシステム設定（ダークモード/ライトモードなど）に自動的に対応します。</p> 35 <p>お使いのシステムのテーマ設定を変更して、このページの見た目がどのように変化するかを確認してみてください。</p> 36</body> 37</html>
このHTMLのサンプルコードは、Webページをユーザーのシステムテーマ（ダークモードやライトモードなど）に対応させるための基本的な設定を示しています。ここで重要なのは、<meta name="color-scheme" content="dark light">という記述です。
このmetaタグは、Webページがダークモードとライトモードの両方に対応していることをブラウザに伝えます。これにより、ユーザーが使用しているOSやブラウザの設定がダークモードであれば、ブラウザはページのデフォルトの背景色や文字色を自動的に暗いテーマに調整し、ライトモードであれば明るいテーマに調整して表示します。
color-schemeはmetaタグのname属性の値として使用され、content属性で対応するテーマを"dark light"のように指定します。この機能は、特定の引数を取ったり、値を戻したりするものではなく、Webページの表示設定をブラウザに伝えるための宣言的な情報として機能します。
サンプルコードのCSS部分では、明示的な背景色や文字色が設定されていません。これは、color-schemeの設定がブラウザのデフォルトスタイルにどのように影響を与えるかを明確に確認するためです。これにより、ユーザーはシステムのテーマ設定を変更するだけで、このページの見た目が自動的に切り替わるのを体験できます。
この設定を利用することで、Webページはユーザーの環境に合わせた快適な視覚体験を提供し、特別なJavaScriptを記述することなく、手軽にダークモード対応などを実現できます。
この<meta name="color-scheme">タグは、ブラウザがユーザーのOS設定（ダークモード/ライトモードなど）に合わせて、デフォルトのテキスト色や背景色を自動調整するためのものです。しかし、CSSでbackground-colorやcolorを明示的に指定すると、このメタタグによるデフォルト色の調整効果は上書きされてしまうため注意が必要です。より細やかなデザイン調整や、特定のテーマに限定したい場合は、CSSの@media (prefers-color-scheme)ルールと組み合わせて利用することが推奨されます。また、この機能は全てのブラウザや環境で完全にサポートされているわけではないため、動作確認を行うことが大切です。このメタタグは必ずHTMLの<head>要素内に記述してください。
HTML color-schemeでダークモード対応する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>カラースキームの例</title> 7 8 <!-- 9 meta要素でcolor-schemeを指定することで、 10 ブラウザにこのページがどのカラースキーム（darkまたはlight）をサポートしているかを伝えます。 11 これにより、ユーザーのシステム設定に基づいて、ブラウザが適切なデフォルトスタイルを適用しやすくなります。 12 "dark light"は、ダークモードとライトモードの両方をサポートすることを示します。 13 --> 14 <meta name="color-scheme" content="dark light"> 15 16 <style> 17 /* 18 デフォルトのスタイルはライトモードを想定しています。 19 フォントはシンプルに、背景は白、文字は黒。 20 */ 21 body { 22 font-family: sans-serif; 23 background-color: #ffffff; /* ライトモードの背景色 */ 24 color: #333333; /* ライトモードの文字色 */ 25 margin: 20px; 26 padding: 0; 27 } 28 29 h1 { 30 color: #1a1a1a; 31 } 32 33 p { 34 line-height: 1.6; 35 } 36 37 /* 38 @media (prefers-color-scheme: dark) は、 39 ユーザーのシステム設定がダークモードである場合にのみ適用されるスタイルを定義します。 40 これにより、ユーザーの好みに合わせてページの見た目を切り替えることができます。 41 */ 42 @media (prefers-color-scheme: dark) { 43 body { 44 background-color: #1a1a1a; /* ダークモードの背景色 */ 45 color: #e0e0e0; /* ダークモードの文字色 */ 46 } 47 48 h1 { 49 color: #f0f0f0; 50 } 51 } 52 </style> 53</head> 54<body> 55 <h1>カラースキームのデモページ</h1> 56 <p> 57 このページは、ユーザーのシステム設定に応じてダークモードとライトモードの両方に対応しています。 58 システムの「外観モード」を切り替えることで、このページの見た目がどのように変化するかを確認できます。 59 </p> 60 <p> 61 例えば、お使いのオペレーティングシステム（Windows, macOS, Android, iOSなど）の設定で、 62 「ダークモード」または「ライトモード」を選択してみてください。 63 </p> 64 <p> 65 ブラウザは`<meta name="color-scheme" content="dark light">`の記述を読み取り、 66 ユーザーのシステム設定に基づいて、適切なCSSルール（特に`@media (prefers-color-scheme: dark)`内）を適用します。 67 </p> 68</body> 69</html>
このHTMLのcolor-schemeは、ウェブページがユーザーのシステム設定に応じた色テーマ（ダークモードやライトモード）をどのように扱うかをブラウザに伝えるためのものです。特に、ユーザーのオペレーティングシステムやブラウザの全体設定がダークモードであるかライトモードであるかに応じて、ページの表示を最適化することを目的としています。
サンプルコードでは、<meta name="color-scheme" content="dark light">という記述を<head>セクションに配置しています。これは、このウェブページがダークモードとライトモードの両方に対応していることをブラウザに明示的に宣言する役割を果たします。この宣言により、ブラウザはユーザーのシステム設定に基づいて、ページに適用するデフォルトのスタイル（例えば、フォーム要素の背景色など）を適切に判断しやすくなります。
さらに、CSSの@media (prefers-color-scheme: dark)というルールは、ユーザーがダークモードを好む設定にしている場合にのみ適用されるスタイルを定義しています。この部分で、ページの背景色や文字色などをダークモードに適した色に設定することで、ユーザーの好みに合わせたシームレスな見た目の切り替えを実現しています。
color-scheme自体は、直接的な引数を受け取ったり、特定の値（戻り値）を返したりする機能ではありません。これは、ウェブページの表示に関するブラウザへのヒントを提供する属性値として機能します。この仕組みにより、開発者はユーザーにとってより快適な閲覧体験を提供できるようになります。
このサンプルコードは、ユーザーのシステム設定に合わせてウェブページの表示モードを切り替えるカラースキーム対応の基本を示しています。特に注意すべき点として、<meta name="color-scheme" content="dark light">は、このページがダークモードとライトモードの両方をサポートすることをブラウザに伝える重要な役割があります。この記述がない場合、ブラウザが自動的に色の反転などを行い、意図しない見た目になる可能性があるため、必ず記述しましょう。
次に、@media (prefers-color-scheme: dark)内のCSSスタイルは、ユーザーのシステム設定がダークモードの場合にのみ適用されます。通常、このメディアクエリの外側でライトモードのデフォルトスタイルを定義し、ダークモードで変更したい部分だけをこのブロック内で上書きするように記述することが推奨されます。正しく動作しているか確認するには、お使いのオペレーティングシステム（OS）のテーマ設定を「ダークモード」や「ライトモード」に切り替えてテストしてください。これにより、ユーザーにとって快適な閲覧体験を提供できます。