CSSカスタムプロパティによるカードコンポーネント

カードコンポーネントは、コンテンツを格納する自己完結型のコンテナです。デザインの目標は、スペーシングトークンによる一貫したパディング、エイリアストークンによるテーマ対応の色、JavaScriptを使わないレスポンシブなサイズ設定、CSSカスタムプロパティによるバリエーション（elevated、outlined、flat）のサポートです。

設定可能な値にはCSSカスタムプロパティを使用し、単一の.cardクラスを使います。内部要素（header、body、footer）はカードのスコープから値を継承します。これにより、コードベース全体でカードのインスタンス間に生じるスタイルのばらつきを抑えられます。

個別のルールセットを記述するのではなく、バリエーションクラスでカードレベルのカスタムプロパティを上書きします。バリエーションクラスでは変更された変数だけを再定義すればよく、変更されないプロパティは繰り返し記述しなくてもベースの値を自動的に継承します。

親のテーマクラスが--color-surfaceを変更すると、そのテーマ内にあるすべてのカードの背景が自動的に更新されます。カード固有のテーマ上書きコードは必要ありません。エイリアストークンシステムが透過的に処理します。

カスタムプロパティのオーバーライドと clamp() を使うと、パディングを流動的に設定できます。--card-padding: clamp(1rem, 4vw, 2rem) のように定義します。ビューポートが大きいほど余裕のあるパディングになり、小さいビューポートでは最小限のパディングになります。すべてを1つのトークン定義から制御できます。

CSS Grid の auto-fill と minmax を使ったカードグリッドでは、レイアウトが自動的に整います。grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) のように指定すると、カードが利用可能なスペースを埋め、メディアクエリのブレークポイントなしで自動的に折り返されます。

画像コンテナに aspect-ratio: 16/9 を指定すると、カード画像のアスペクト比を統一できます。object-fit: cover によって画像がコンテナを埋めるため、元画像のサイズに関係なくカードの高さが揃います。

カードを少し浮き上がらせる hover と focus-within の状態を追加します。transform: translateY(-2px) と、より強い box-shadow を使います。transition: transform 200ms ease, box-shadow 200ms ease でアニメーションさせると、滑らかでコンポジターに適したインタラクションのフィードバックになります。

ストレッチリンクを使ってカード全体をクリック可能にします。カードを相対配置にし、メインリンクを inset: 0 で絶対配置します。スクリーンリーダーはリンクテキストを読み上げ、オーバーレイがカード全体を視覚的に覆うため、マウスユーザーもカード全体を操作できます。

CSS アニメーションを使ったスケルトンのシマー効果でコンテンツを置き換える .card--loading バリエーションを追加します。background: linear-gradient(90deg, var(--color-skeleton-from), var(--color-skeleton-to)) を background-size: 200% と animation: shimmer 1.5s infinite でアニメーションさせます。

ダークモードでは、--color-surface トークンが明るい色から暗い色へ自動的に変わります。浮き上がったカードの奥行きを box-shadow に依存している場合、暗い背景ではその効果が見えにくくなるため、控えめなボーダーを追加するか、surface の色のコントラストを強めて、ダークモードでも浮き上がりを認識できるようにします。

CSS カスタムプロパティを使うと、ルールセット全体を複製せずにカードのバリエーションを作成できるのはなぜですか？

CSS カスタムプロパティを使ってカードコンポーネントを構築すると、柔軟でテーマに対応し、バリエーションも扱える UI の基本部品になります。ベース変数でデフォルト値を設定し、バリエーションクラスで必要な部分だけを上書きし、テーマクラスで全体を上書きします。レスポンシブなサイズ設定、アクセシブルなリンク、読み込み状態と組み合わせることで、このパターンはデザインシステム全体に無理なく拡張できます。