データ属性を使用したCSS: コード例と方法

1. データ属性をセレクタとして使用する: データ属性に基づいて要素を選択し、CSSスタイルを適用することができます。例えば、以下のように書くことで、data-attributeというデータ属性を持つ要素を選択し、背景色を変更することができます。

   [data-attribute] {
    background-color: red;
   }

2. データ属性の値に基づいてスタイルを変更する: データ属性の値に応じて異なるスタイルを適用することもできます。例えば、以下のように書くことで、data-status属性の値が"active"の場合には背景色を緑に、それ以外の場合には赤に変更することができます。

   [data-status="active"] {
    background-color: green;
   }
   [data-status] {
    background-color: red;
   }

3. データ属性を使用した要素の組み合わせ: 複数のデータ属性を組み合わせて要素を選択し、スタイルを適用することも可能です。例えば、以下のように書くことで、data-category属性の値が"fruit"かつdata-color属性の値が"red"である要素を選択し、フォントカラーを白に変更することができます。

   [data-category="fruit"][data-color="red"] {
    color: white;
   }

上記はいくつかの基本的な例ですが、データ属性を使用してCSSを制御する方法はさまざまです。データ属性を活用することで、柔軟なスタイルの適用や要素の選択が可能になります。実際のプロジェクトに応じて、さまざまな方法を試してみてください。