概要

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は、主要なモダンブラウザ（Chrome、Edge、Firefox、Safariなど）でサポートされていますが、古いバージョンや一部のレガシーブラウザでは使用できない場合があります。最新のブラウザの使用を推奨します。

  • Chrome: バージョン93以降
  • Firefox: バージョン92以降
  • Edge: バージョン93以降
  • Safari: バージョン15.4以降

使用する際の注意点

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

まとめ

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

参照:

accent-color（`CSS`） - MDN Web Docs