frontend-css-patterns

フロントエンド CSS パターン

独自性のあるビジュアルデザインを実現するための実装パターンです。

デザイントークンの統合

プロジェクトに DESIGN.md ファイルがある場合は、そのトークンを信頼できる唯一の情報源として使用します。

/* Map DESIGN.md tokens to CSS custom properties */
:root {
  --color-primary: /* from {colors.primary} */;
  --color-accent: /* from {colors.accent} */;
  --font-display: /* from {typography.display.fontFamily} */;
  --spacing-md: /* from {spacing.md} */;
}

トークンが定義されている場合、色、フォント、間隔の値を独自に作成しないでください。CSS を生成する前に、YAML フロントマターから {token.ref} の参照を解決します。

タイポグラフィ

/* AVOID: Generic defaults */
font-family: Inter, system-ui, sans-serif;

/* PREFER: Distinctive pairings */
--font-display: 'Clash Display', 'Space Grotesk', sans-serif;
--font-body: 'Satoshi', 'General Sans', sans-serif;

/* Specific moods */
--font-luxury: 'Cormorant Garamond', serif;
--font-brutalist: 'JetBrains Mono', monospace;
--font-playful: 'Fredoka', 'Quicksand', sans-serif;

タイポグラフィのスケール：

:root {
  --text-hero: clamp(3rem, 10vw, 8rem);
  --text-display: clamp(2rem, 5vw, 4rem);
  --text-heading: clamp(1.5rem, 3vw, 2.5rem);
  --text-body: clamp(1rem, 1.5vw, 1.125rem);
}

色とテーマ

:root {
  /* Dominant + sharp accent */
  --color-bg: #0a0a0a;
  --color-fg: #fafafa;
  --color-accent: #ff3366;
  --color-accent-muted: #ff336633;
}

高コントラスト、限定的なパレット（3〜4 色）、際立つアクセントカラーを重視します。

モーション

細かなマイクロインタラクションを散りばめるより、インパクトの大きな瞬間に重点を置きます。

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.reveal {
  animation: fadeInUp 0.6s ease-out forwards;
}

.reveal:nth-child(1) { animation-delay: 0.1s; }
.reveal:nth-child(2) { animation-delay: 0.2s; }

ページ読み込み時のシーケンス、スクロールをトリガーとする表示、状態遷移に注目します。

空間構成

グリッドを崩します。

• 非対称性：要素を意図的にずらします
• 重なり：要素を重ねて奥行きを出します
• 斜めの流れ：視線を動的に誘導します
• 余白：コンテンツにゆとりを持たせます

.hero-image {
  position: relative;
  top: -5vh;      /* Overlap the header */
  right: -2rem;   /* Extend past container */
}

ビジュアルの詳細

/* Gradient overlay */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.05));
  pointer-events: none;
}

/* Glow effects */
.accent-element {
  box-shadow: 0 0 20px var(--color-accent-muted), 0 0 40px var(--color-accent-muted);
}

Tailwind のカスタマイズ

DESIGN.md がある場合は、トークンを直接エクスポートします。

npx design-md export --format tailwind

ない場合は、デフォルトを使わずにテーマを手動でカスタマイズします。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: { display: ['Clash Display', 'sans-serif'] },
      colors: { brand: { DEFAULT: '#ff3366', muted: 'rgba(255, 51, 102, 0.2)' } },
    },
  },
}