zudo-css とは
作成2026年3月18日更新2026年3月26日Takeshi Takatsudo
zudo-css は、主に AI コーディングエージェント向けに設計された CSS ベストプラクティスのドキュメントサイトです。AI エージェントが開発中に参照・適用できる、厳選された CSS テクニックやパターンを構造化されたリファレンスとして提供します。
目的
AI コーディングエージェントは、動作はするものの古いパターンに従っていたり、シンプルなタスクを複雑にしすぎたり、モダンな CSS の機能を見逃していたりする CSS を生成しがちです。このドキュメントは、そのギャップを埋めるために以下を提供します。
- 問題を起点とした記事（何がうまくいかないかから始まる構成）
- 各テクニックの動作を示すライブ CssPreview デモ
- アプローチの選択に関する判断ガイダンス
- AI がよくやるミスのセクション（具体的な落とし穴を解説）
技術スタック
このサイトは以下の技術で構築されています。
- Astro 5 — コンテンツコレクション（Content Collections）を備えた静的サイトジェネレーター
- MDX — Markdown とインタラクティブコンポーネントを組み合わせたコンテンツフォーマット
- Tailwind CSS v4 —
@tailwindcss/viteによるユーティリティファーストのスタイリング - React 19 — 目次、サイドバー、カラースキームピッカーのためのインタラクティブアイランド
- Shiki — デュアルテーマ対応のシンタックスハイライト
Cloudflare Pages に GitHub Actions 経由でデプロイされています。
記事カテゴリ
記事は CSS の領域ごとに整理されています。
| カテゴリ | トピック |
|---|---|
| Layout | センタリング、Flexbox、Grid、subgrid、ポジショニング、スタッキングコンテキスト、anchor positioning、aspect-ratio、論理プロパティ、gap vs margin、マルチカラム、fit/max/min-content、clamp() |
| Typography | 3階層フォントサイズ戦略、フルイドフォントサイズ、行の高さ、テキストオーバーフロー/行クランプ、バーティカルリズム、フォントローディング、可変フォント、日本語フォント、text-wrap balance/pretty |
| Color | 3階層カラー戦略、パレット戦略、OKLCH、color-mix()、currentColor、ダークモード、コントラスト/アクセシビリティ |
| Visual | 多層シャドウ、スムーズシャドウトランジション、グラデーション、ボーダー、clip-path/mask、フィルター、backdrop-filter、ブレンドモード、3D transforms、@property、CSSのみのパターン |
| Responsive | コンテナクエリ、clamp() によるフルイドデザイン、メディアクエリのベストプラクティス、レスポンシブグリッドパターン、レスポンシブ画像 |
| Interactive | トランジション、hover/focus/active 状態、scroll snap、scroll-driven animations、view transitions、()、()/()、親状態の子スタイリング、フォームコントロール、タッチターゲット、overscroll、prefers-reduced-motion |
| Methodology | コンポーネントファースト戦略、タイトトークン戦略（コンポーネントトークン、タイポグラフィトークン、カラートークン）、2階層サイズ戦略、BEM、CSS Modules、カスケードレイヤー、カスタムプロパティパターン、テーマ設定レシピ |
記事の構成
すべての記事は一貫したパターンに従っています。
- 問題 — よくあるミスとうまくいかない点
- 解決方法 — CssPreview デモ付きの推奨アプローチ
- 追加セクション — より深いテクニックと追加デモ
- 使い分け — テクニックを適用するための判断ガイダンス
CssPreview デモ
各記事で最も価値のあるパートです。CssPreview は CSS デモを、ビューポートコントロール（モバイル 320px、タブレット 768px、フル幅）付きの分離された iframe 内でレンダリングします。デモ内のインタラクションはすべて CSS のみで、JavaScript は使用しません。
AI との統合
このサイトには、すべての記事をインデックス化する css-wisdom という Claude Code スキルが含まれています。インストールすると、AI エージェントは開発中に /css-wisdom <topic> を呼び出して関連する CSS パターンを検索できます。詳しくは css-wisdom スキル のページを参照してください。