CSSカラースキームを使いこなして、アクセシビリティと使いやすさを向上させる

2024-04-02

CSSのカラースキーム（color-scheme）

CSSのcolor-schemeプロパティは、ユーザーのシステム設定に基づいて、ページ全体のカラーパレットを調整することができます。これは、ユーザーインターフェースのアクセシビリティと使いやすさを向上させるために役立ちます。

カラースキームの種類

CSSでは、以下の4つのカラースキームが定義されています。

light：明るい背景と暗い文字色
dark：暗い背景と明るい文字色
no-preference：ユーザー設定に従う
system：オペレーティングシステム設定に従う

設定方法

color-schemeプロパティは、以下の要素に設定することができます。

ルート要素 (html)：ページ全体のカラースキームを設定
個別要素：特定の要素のみカラースキームを変更

例

html {
  color-scheme: light;
}

.header {
  color-scheme: dark;
}

ブラウザサポート

color-schemeプロパティは、多くのブラウザでサポートされています。詳細は MDN Web Docs: https://developer.mozilla.org/ja/docs/Web/CSS/color-scheme を参照してください。

color-schemeプロパティは、メディアクエリと組み合わせて使用することができます。
prefers-color-schemeメディアクエリを使用して、ユーザー設定に基づいてスタイルを調整することができます。

補足

color-schemeプロパティは、まだ比較的新しい機能です。
color-schemeプロパティは、すべてのブラウザで同じように動作するわけではありません。

CSSカラースキームサンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>カラースキームサンプル</title>
</head>
<body>
  <h1>タイトル</h1>
  <p>本文</p>
</body>
</html>

html {
  color-scheme: light dark;
}

/* ライトモード */
@media (prefers-color-scheme: light) {
  body {
    background-color: white;
    color: black;
  }
}

/* ダークモード */
@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

個別要素にカラースキームを設定

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>カラースキームサンプル</title>
</head>
<body>
  <h1>タイトル</h1>
  <p>本文</p>
  <div class="header">
    <h1>ヘッダー</h1>
  </div>
</body>
</html>

html {
  color-scheme: light dark;
}

/* ライトモード */
@media (prefers-color-scheme: light) {
  body {
    background-color: white;
    color: black;
  }
}

/* ダークモード */
@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

.header {
  color-scheme: dark;
}

/* ヘッダーのライトモード */
@media (prefers-color-scheme: light) {
  .header {
    background-color: white;
    color: black;
  }
}

/* ヘッダーのダークモード */
@media (prefers-color-scheme: dark) {
  .header {
    background-color: #333;
    color: white;
  }
}

システム設定に追従

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>カラースキームサンプル</title>
</head>
<body>
  <h1>タイトル</h1>
  <p>本文</p>
</body>
</html>

html {
  color-scheme: system;
}

メディアクエリと組み合わせて使用

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>カラースキームサンプル</title>
</head>
<body>
  <h1>タイトル</h1>
  <p>本文</p>
</body>
</html>

html {
  color-scheme: light dark;
}

/* スマートフォンの場合 */
@media (max-width: 768px) {
  body {
    color-scheme: light;
  }
}

/* デスクトップの場合 */
@media (min-width: 769px) {
  body {
    color-scheme: dark;
  }
}

prefers-color-schemeメディアクエリ

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>カラースキームサンプル</title>
</head>
<body>
  <h1>タイトル</h1>
  <p>本文</p>
</body>
</html>

body {

CSSカラースキームを設定するその他の方法

CSSカスタムプロパティを使用して、カラースキームを定義し、ページ全体で再利用することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>カラースキームサンプル</title>
</head>
<body>
  <h1>タイトル</h1>
  <p>本文</p>
</body>
</html>

:root {
  --light-bg: white;
  --light-text: black;
  --dark-bg: black;
  --dark-text: white;
}

/* ライトモード */
@media (prefers-color-scheme: light) {
  body {
    background-color: var(--light-bg);
    color: var(--light-text);
  }
}

/* ダークモード */
@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--dark-bg);
    color: var(--dark-text);
  }
}

Sass/SCSSを使用して、カラースキームを定義し、コードをより簡潔に記述することができます。

$light-bg: white;
$light-text: black;
$dark-bg: black;
$dark-text: white;

html {
  color-scheme: light dark;
}

/* ライトモード */
@media (prefers-color-scheme: light) {
  body {
    background-color: $light-bg;
    color: $light-text;
  }
}

/* ダークモード */
@media (prefers-color-scheme: dark) {
  body {
    background-color: $dark-bg;
    color: $dark-text;
  }
}

JavaScriptを使用して、ユーザーのシステム設定に基づいてカラースキームを動的に設定することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>カラースキームサンプル</title>
</head>
<body>
  <h1>タイトル</h1>
  <p>本文</p>
</body>
</html>

const prefersColorScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;

if (prefersColorScheme) {
  document.body.classList.add("dark-mode");
} else {
  document.body.classList.add("light-mode");
}

ライブラリ

Chroma.jsなどのライブラリを使用して、カラースキームを簡単に設定することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>カラースキームサンプル</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.5.0/chroma.min.js"></script>
</head>
<body>
  <h1>タイトル</h1>
  <p>本文</p>
</body>
</html>

const chroma = new Chroma();

const lightTheme = chroma.scale("light").colors(5);
const darkTheme = chroma.scale("dark").colors(5);

const prefersColorScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;

if (prefersColorScheme) {
  document.body.style.backgroundColor = darkTheme[0];
  document.body.style.color = darkTheme[1];
} else {
  document.body.style.backgroundColor = lightTheme[0];
  document.body.style.color = lightTheme[1];
}

これらの方法は、それぞれ利点と欠点があります。プロジェクトのニーズに合った方法を選択してください。

ゲーム理論：ビジネス、政治、日常生活に潜む戦略的思考

ゲーム理論の基本的な要素は以下の3つです。プレイヤー: 意思決定を行う主体戦略: プレイヤーが選択できる行動の選択肢利得: プレイヤーが各戦略を選択したときの得られる利益ゲーム理論は、これらの要素を数学的なモデルを用いて分析することで、プレイヤーがどのような戦略を選択するのか、どのような結果になるのかを予測することができます。

CSSでセピア色の世界へようこそ！画像や要素をレトロに変身させる魔法の方法

CSSの「Filter Effects」機能の一つである「sepia()」は、画像や要素をモノクロ化し、茶褐色（セピア色）のトーンを適用する関数です。古い写真のようなレトロな雰囲気を演出したい場合などに効果的に使用できます。構文n は、セピア色の強さを表す数値です。0.0の場合は元の画像の色合いが維持され、1.0になると完全にセピア色になります。

CSS Grid Layoutにおける grid-column プロパティ：詳細ガイド

grid-columnプロパティは、CSS Grid Layoutにおいて、グリッド内の要素の列位置を指定するために使用されます。このプロパティは、単一の要素の配置だけでなく、複雑なレイアウトを構築するための強力なツールとなります。基本的な使い方

counter-increment vs JavaScript：連番・カウントアップの最適解は？

仕組みカウンターは名前付きの変数のようなもので、各要素に個別に値を割り当てることができます。counter-increment を使って、要素ごとにカウンターの値を増加させます。カウンターの値は、content プロパティを使ってコンテンツとして表示することができます。

角丸デザインを簡単に実現！CSSのborder-radiusプロパティ

CSSにおける "Miscellaneous" カテゴリは、要素の形状、配置、装飾などをコントロールするプロパティ群を指します。その中でも "round" は、要素の角を丸く表現する機能を提供するプロパティです。round プロパティborder-radius プロパティは、要素の境界線の角の丸みを設定します。値をピクセル単位で指定することで、角の丸み具合を調整できます。

CSS Transforms matrix3d() 関数の詳細解説: 3D 空間における要素のあらゆる変形を可能にする強力なツール

matrix3d() の仕組み:matrix3d() は、16 個の数字からなる 3D 変形マトリックスを受け取り、そのマトリックスに基づいて要素を変形します。マトリックス内の各数字は、要素の位置、回転、拡大縮小、傾斜など、特定の変形パラメータに対応します。

属性セレクター、擬似クラスセレクター、擬似要素セレクター：表現力を広げる高度なセレクター

隣接兄弟セレクター（+）概要: ある要素の直後に続く兄弟要素を選択例:上記の例では、h1要素の直後に続くp要素のみ赤色で表示されます。一般兄弟セレクター（~）概要: ある要素のすべての兄弟要素を選択例:上記の例では、h1要素の後に続くすべてのp要素のフォントサイズが16pxになります。

WebVTT字幕をスタイリッシュに！ ::cueでできる字幕装飾のすべて

::cue は、WebVTT 字幕で表示されるテキスト装飾を制御する CSS 疑似要素です。字幕のスタイルを個別に設定することで、読みやすさや視覚的な訴求力を向上させることができます。主な用途字幕のフォント、サイズ、色、位置などを設定字幕の背景色や影を設定

CSSグラデーションでsin関数を活用して円形グラデーションや波形グラデーションを作成する方法

sin関数は以下の構文で記述します。<angle> は角度を指定します。角度は度数法またはラジアン法で指定できます。例：sin関数はアニメーションのタイミング関数として使用できます。例えば、以下のようなコードは、要素を上下に波打たせるアニメーションを作成します。

「absolute-size」以外のサイズ指定方法

「absolute-size」は、CSSで使用されるフォントサイズの指定方法の一つで、ピクセル（px）やインチ（in）などの単位を用いて、具体的な大きさを直接指定します。これは、親要素のサイズやブラウザの設定などに左右されず、常に指定された大きさで表示されるという特徴があります。