Documentation CSS

この記事で学べること

  • accent-colorプロパティの基本構文と使い方
  • チェックボックス、ラジオボタン、スライダーへの適用方法
  • 指定可能なカラーフォーマット（HEX、RGB、HSL）
  • ブラウザ対応状況と注意点
  • アクセシビリティへの配慮

概要

accent-colorは、CSSでフォーム要素のアクセントカラーを簡単に変更するためのプロパティです。これを使用すると、チェックボックス、ラジオボタン、レンジスライダーなどのユーザーインターフェース要素に統一感のあるデザインを適用できます。例えば、ブランドカラーをアクセントとして設定することで、サイト全体のデザインを統一するのに役立ちます。

accent-colorの使い方

accent-colorプロパティは、主にフォーム要素に対してアクセントカラーを設定するために使用されます。これにより、ユーザーが選択した要素のカラーが指定した色に変更されます。

基本的な構文

input {
  accent-color: カラー値;
}

カラー値には、以下のような様々なカラーフォーマットが使用できます：

  • 色のキーワード（例: red, blue）
  • HEX値（例: #ff5733）
  • RGB値（例: rgb(255, 87, 51)）
  • HSL値（例: hsl(9, 100%, 60%)）

使用例

チェックボックスとラジオボタンのアクセントカラーを変更

以下のコードは、チェックボックスとラジオボタンのアクセントカラーを青色に変更する例です。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>accent-colorのデモ</title>
    <style>
      input[type="checkbox"],
      input[type="radio"] {
        accent-color: blue;
      }
    </style>
  </head>
  <body>
    <h2>accent-colorの例</h2>
    <label>
      <input type="checkbox" checked />
      チェックボックス
    </label>
    <label>
      <input type="radio" name="example" checked />
      ラジオボタン
    </label>
  </body>
</html>

このコードをブラウザで実行すると、チェックボックスとラジオボタンの選択部分が青色で表示されます。

カスタムカラーを使ったスライダーのデザイン

accent-colorを使用して、スライダーのアクセントカラーも変更できます。以下は、スライダーのハンドル部分をカスタムカラーに変更する例です。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>accent-colorのスライダー例</title>
    <style>
      input[type="range"] {
        accent-color: #ff5733; /* オレンジ色 */
      }
    </style>
  </head>
  <body>
    <h2>accent-colorを使用したスライダー</h2>
    <input type="range" min="0" max="100" value="50" />
  </body>
</html>

この例では、スライダーのハンドル部分が指定したオレンジ色に変わります。

ブラウザ対応

accent-colorは、主要なモダンブラウザでサポートされています。

ブラウザサポートバージョン
Chrome93以降
Firefox92以降
Edge93以降
Safari15.4以降
Opera79以降
iOS Safari15.4以降
Android Chrome93以降

使用する際の注意点

  1. アクセシビリティの考慮
    accent-colorを使用する際には、コントラストが十分にあるか確認しましょう。特に視覚的なアクセシビリティが必要な場合、色の組み合わせに注意が必要です。
  2. 指定する色の一貫性
    サイト全体で一貫した色のテーマを使用することで、ユーザーにとって使いやすいインターフェースを提供できます。ブランドカラーを使用することで、よりプロフェッショナルな見た目を実現できます。
  3. 古いブラウザへの対応
    古いブラウザではaccent-colorが機能しない場合があります。その場合はデフォルトのスタイルが使用されるので、事前に確認しておくと良いでしょう。

まとめ

accent-colorプロパティを使用することで、フォーム要素のデザインに統一感を持たせ、ユーザーエクスペリエンスを向上させることができます。色の設定が簡単なため、開発者にとっても便利なプロパティです。モダンなブラウザがサポートしているため、デザインに柔軟性を持たせつつ、アクセシブルなサイトを構築するのに最適です。

ポイントの振り返り

項目内容
対象要素checkbox, radio, range, progress
指定可能な値auto, カラー値
カラーフォーマットキーワード, HEX, RGB, HSL
継承あり（子要素に継承）
デフォルト値auto

参考文献

円