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になると完全にセピア色になります。


margin、position、transform、flexbox、gridを比較

offsetプロパティは、以下の2つの役割を担います。要素の配置を調整するアニメーションの開始位置を制御するoffsetプロパティの値は、以下の2つの方法で指定できます。長さ(px, em, remなど)百分率(%)長さの場合、要素の親要素の座標系に基づいて、絶対的なオフセットを指定します。百分率の場合、要素自身のサイズに基づいて、相対的なオフセットを指定します。


ルビの配置を自在に操る! CSS Miscellaneous の ruby-position プロパティ

使い方[値] には、以下のいずれかを指定できます。over:ルビをベース文字の上部に配置します。before:ルビをベース文字の左側に配置します。after:ルビをベース文字の右側に配置します。各値の詳細over と under: ruby-align プロパティと組み合わせて、ルビの左右の位置を調整できます。 ルビの縦方向の位置は、line-height プロパティによって影響を受けます。


max-block-size プロパティ vs. max-height/max-width:徹底比較

max-block-size プロパティは、以下の用途に使用できます。要素の最大高さを制限する要素の縦横比を維持するmax-block-size プロパティの値には、以下のいずれかを指定できます。長さ: ピクセル (px)、センチメートル (cm)、ポイント (pt) などの絶対値を指定します。



レスポンシブにも対応! justify-tracks プロパティを使ったマルチデバイス対応レイアウト

justify-tracks プロパティは、CSS Grid レイアウトにおいて、グリッドコンテナの行方向に配置されたトラックの間隔と配置を制御します。これは、masonry レイアウトと組み合わせて使用することで、より柔軟で洗練されたレイアウトを作成することができます。


CSS Miscellaneous: view-timeline-name 詳細解説

view-timeline-name は CSS の Miscellaneous モジュールで定義されるプロパティで、スクロールタイムラインの名前を指定します。スクロールタイムラインは、スクロールによってアニメーションを制御するために使用されます。


CSSの「Miscellaneous」:詳細解説 - overflow-x を使いこなしてコンテンツのはみ出しを制御する

値とその動作visible: デフォルト値。コンテンツのはみ出し部分を切り取らずに表示します。横方向にスクロールバーが表示されます。hidden: コンテンツのはみ出し部分を切り取ります。横方向のスクロールバーは表示されません。scroll: 要素の幅を超えたコンテンツを非表示にし、横方向のスクロールバーを表示します。


margin、position、transform、flexbox、gridを比較

offsetプロパティは、以下の2つの役割を担います。要素の配置を調整するアニメーションの開始位置を制御するoffsetプロパティの値は、以下の2つの方法で指定できます。長さ(px, em, remなど)百分率(%)長さの場合、要素の親要素の座標系に基づいて、絶対的なオフセットを指定します。百分率の場合、要素自身のサイズに基づいて、相対的なオフセットを指定します。


Flexbox や CSS Grid で実現!Miscellaneous 書き込みモードの代替方法

writing-modeプロパティには、horizontal-tb、vertical-rl、vertical-lrなど、いくつかの標準的な書き込みモードがあります。さらに、Miscellaneousと呼ばれる特殊な書き込みモードも存在します。