カスタムプロパティパターンカタログ

堅牢なデザインシステム、レスポンシブレイアウト、コンポーネントアーキテクチャを構築するためのCSSカスタムプロパティパターンの包括的なコレクションです — すべてインタラクティブなデモ付きです。

レスポンシブカスタムプロパティ

@mediaでブレークポイントごとに変化するカスタムプロパティは、ユーティリティクラスなしのレスポンシブデザインシステムを作成します。トークンを一度定義すれば、メディアクエリがそれを適応させます。

:root {
  --content-padding: 1rem;
}
@media (min-width: 768px) {
  :root {
    --content-padding: 2rem;
  }
}

--content-paddingを参照するすべての要素がブレークポイントで自動的に更新されます — コンポーネントごとのオーバーライドは不要です。

CSSカウンターとカスタムプロパティ

CSSカウンターは自動番号付けを生成します。カスタムプロパティと組み合わせることで、カウンターのスタイリングを設定可能にします — 親要素から色、サイズ、形状を変更できます。

コンポーネントツリーのカスタムプロパティ継承

親コンポーネントがカスタムプロパティを設定し、深くネストされた子が自動的にそれを継承します — プロップドリリングも追加クラスも不要です。これはコンポーネントテーマの最も強力なパターンの一つです。

calcベースのスペーシングスケール

単一のベーススペーシング単位を定義し、calc()でスケール全体を導出します。ベース値を変更すると、すべてのスペーシングトークンが一度に再構成されます。

:root {
  --space-unit: 8px;
  --space-xs: calc(var(--space-unit) * 0.5);
  --space-sm: var(--space-unit);
  --space-md: calc(var(--space-unit) * 2);
  --space-lg: calc(var(--space-unit) * 3);
  --space-xl: calc(var(--space-unit) * 5);
}

カスタムプロパティによるカラーシステム

HSLコンポーネントを個別のカスタムプロパティに分離することで、最大の柔軟性を得られます。1つの色定義からホバー状態、明るい/暗いバリアント、透明度を導出できます。

:root {
  --primary-h: 220;
  --primary-s: 80%;
  --primary-l: 50%;
}
.button {
  background: hsl(var(--primary-h) var(--primary-s) var(--primary-l));
}
.button:hover {
  background: hsl(var(--primary-h) var(--primary-s) calc(var(--primary-l) - 10%));
}

参考リンク

• Using CSS custom properties (variables) - MDN
• A Complete Guide to Custom Properties - CSS-Tricks
• Custom Properties as State - Chris Coyier