# zudo-css

> Pragmatic CSS knowledge for AI

## Docs

- [INBOX](https://takazudomodular.com/pj/zcss/ja/docs/inbox): 下書きおよび未整理のメモです。レビュー後に適切なカテゴリに移動します。
- [インタラクティブ](https://takazudomodular.com/pj/zcss/ja/docs/interactive): ホバー・フォーカス・アクティブ状態、トランジション、アニメーション、スクロール動作、インタラクティブパターンに関するベストプラクティスです。
- [レイアウト](https://takazudomodular.com/pj/zcss/ja/docs/layout): CSSレイアウト技術：Flexbox、Grid、配置パターン、スペーシング、サイジング、構成戦略について解説します。
- [CSS設計](https://takazudomodular.com/pj/zcss/ja/docs/methodology): CSSアーキテクチャ戦略：BEM、CSS Modules、ユーティリティファースト、デザイントークン、カスケードレイヤーについて解説します。
- [概要](https://takazudomodular.com/pj/zcss/ja/docs/overview): CSSベストプラクティスのドキュメントを執筆・管理するための、プロジェクトレベルの規約です。
- [レスポンシブ](https://takazudomodular.com/pj/zcss/ja/docs/responsive): コンテナクエリ、フルイドデザイン、メディアクエリ、レスポンシブパターンについて解説します。
- [スタイリング](https://takazudomodular.com/pj/zcss/ja/docs/styling): 色、シャドウ、ボーダー、エフェクトなどのビジュアルスタイリングテクニック。
- [タイポグラフィ](https://takazudomodular.com/pj/zcss/ja/docs/typography): フォントサイズ、行クランプ、バーティカルリズム、テキストオーバーフロー、およびタイポグラフィパターンについて解説します。
- [フォームコントロールのスタイリング](https://takazudomodular.com/pj/zcss/ja/docs/interactive/forms-and-accessibility/form-control-styling): 問題
- [スクロールスナップ](https://takazudomodular.com/pj/zcss/ja/docs/interactive/scroll/scroll-snap): 問題
- [:has()セレクター](https://takazudomodular.com/pj/zcss/ja/docs/interactive/selectors/has-selector): 問題
- [ホバー・フォーカス・アクティブ状態](https://takazudomodular.com/pj/zcss/ja/docs/interactive/states-and-transitions/hover-focus-active-states): 問題
- [Flexbox パターン](https://takazudomodular.com/pj/zcss/ja/docs/layout/flexbox-and-grid/flexbox-patterns): 問題
- [センタリングテクニック](https://takazudomodular.com/pj/zcss/ja/docs/layout/positioning/centering-techniques): 問題
- [fit-content, max-content, min-content](https://takazudomodular.com/pj/zcss/ja/docs/layout/sizing/fit-content): 問題
- [Object Fit と Object Position](https://takazudomodular.com/pj/zcss/ja/docs/layout/specialized/object-fit-and-position): 問題
- [BEM戦略](https://takazudomodular.com/pj/zcss/ja/docs/methodology/architecture/bem-strategy): :::note[歴史的背景]
- [カスタムプロパティパターンカタログ](https://takazudomodular.com/pj/zcss/ja/docs/methodology/design-systems/custom-properties-advanced/pattern-catalog): 堅牢なデザインシステム、レスポンシブレイアウト、コンポーネントアーキテクチャを構築するためのCSSカスタムプロパティパターンの包括的なコレクションです — すべてインタラクティブなデモ付きです。
- [カラートークンパターン](https://takazudomodular.com/pj/zcss/ja/docs/methodology/design-systems/tight-token-strategy/color-tokens): 問題
- [タイトトークン戦略](https://takazudomodular.com/pj/zcss/ja/docs/methodology/design-systems/tight-token-strategy): 問題
- [コンテナクエリ](https://takazudomodular.com/pj/zcss/ja/docs/responsive/container-queries): 問題
- [OKLCH カラースペース](https://takazudomodular.com/pj/zcss/ja/docs/styling/color/oklch-color-space): 問題
- [バックドロップフィルターとグラスモーフィズム](https://takazudomodular.com/pj/zcss/ja/docs/styling/effects/backdrop-filter-and-glassmorphism): 問題
- [CSSのみのパターンライブラリ](https://takazudomodular.com/pj/zcss/ja/docs/styling/effects/gradient-techniques/css-pattern-library): グラデーションのみで構築されたCSS装飾背景パターンの包括的なコレクションです。以下のすべてのパターンは  と  を使ってシームレスにタイリングし、画像は一切不要で、CSSカスタムプロパティでカスタマイズできます。
- [レイヤードナチュラルシャドウ](https://takazudomodular.com/pj/zcss/ja/docs/styling/shadows-and-borders/layered-natural-shadows): 問題
- [clamp()を使った流体フォントサイズ](https://takazudomodular.com/pj/zcss/ja/docs/typography/font-sizing/fluid-font-sizing): 問題
- [フォント読み込み戦略](https://takazudomodular.com/pj/zcss/ja/docs/typography/fonts/font-loading-strategies): 問題
- [テキストオーバーフローとラインクランプ](https://takazudomodular.com/pj/zcss/ja/docs/typography/text-control/text-overflow-and-clamping): 問題
- [タッチターゲットのサイズ設定](https://takazudomodular.com/pj/zcss/ja/docs/interactive/forms-and-accessibility/touch-target-sizing): 問題
- [スクロール駆動アニメーション](https://takazudomodular.com/pj/zcss/ja/docs/interactive/scroll/scroll-driven-animations): 問題
- [:is()と:where()セレクター](https://takazudomodular.com/pj/zcss/ja/docs/interactive/selectors/is-where-selectors): 問題
- [トランジションのベストプラクティス](https://takazudomodular.com/pj/zcss/ja/docs/interactive/states-and-transitions/transition-best-practices): 問題
- [CSS Grid パターン](https://takazudomodular.com/pj/zcss/ja/docs/layout/flexbox-and-grid/grid-patterns): 問題
- [ポジショニングガイド](https://takazudomodular.com/pj/zcss/ja/docs/layout/positioning/positioning-guide): 問題
- [aspect-ratio](https://takazudomodular.com/pj/zcss/ja/docs/layout/sizing/aspect-ratio): 問題
- [マルチカラムレイアウト](https://takazudomodular.com/pj/zcss/ja/docs/layout/specialized/multi-column-layout): 問題
- [コンポーネントファースト戦略](https://takazudomodular.com/pj/zcss/ja/docs/methodology/architecture/component-first-strategy): 問題
- [テーマレシピ](https://takazudomodular.com/pj/zcss/ja/docs/methodology/design-systems/custom-properties-advanced/theming-recipes): CSSカスタムプロパティを使った完全なテーマシステムレシピです。各レシピはプロダクション対応のパターンで、自分のプロジェクトに適応できます。これらのレシピは Three-Tier Color Strategy で説明されているレイヤードアーキテクチャ — パレットトークン、セマンティックテーマトークン、コンポーネントスコープのオーバーライド — をカスケードと  フォールバックを使って実装しています。
- [タイポグラフィトークンパターン](https://takazudomodular.com/pj/zcss/ja/docs/methodology/design-systems/tight-token-strategy/typography-tokens): 問題
- [2層サイズ戦略](https://takazudomodular.com/pj/zcss/ja/docs/methodology/design-systems/two-tier-size-strategy): 問題
- [zudo-css とは](https://takazudomodular.com/pj/zcss/ja/docs/overview/what-is-zudo-css): zudo-css は、主に AI コーディングエージェント向けに設計された CSS ベストプラクティスのドキュメントサイトです。AI エージェントが開発中に参照・適用できる、厳選された CSS テクニックやパターンを構造化されたリファレンスとして提供します。
- [clamp()によるフルイドデザイン](https://takazudomodular.com/pj/zcss/ja/docs/responsive/fluid-design-with-clamp): 問題
- [color-mix()](https://takazudomodular.com/pj/zcss/ja/docs/styling/color/color-mix): 問題
- [クリップパスとマスク](https://takazudomodular.com/pj/zcss/ja/docs/styling/effects/clip-path-and-mask): 問題
- [ボーダーテクニック](https://takazudomodular.com/pj/zcss/ja/docs/styling/shadows-and-borders/border-techniques): 問題
- [3層フォントサイズ戦略](https://takazudomodular.com/pj/zcss/ja/docs/typography/font-sizing/three-tier-font-size-strategy): 問題
- [バリアブルフォント](https://takazudomodular.com/pj/zcss/ja/docs/typography/fonts/variable-fonts): 問題
- [バーティカルリズム](https://takazudomodular.com/pj/zcss/ja/docs/typography/text-control/vertical-rhythm): 問題
- [prefers-reduced-motion（モーション軽減設定）](https://takazudomodular.com/pj/zcss/ja/docs/interactive/forms-and-accessibility/prefers-reduced-motion): 問題
- [オーバースクロールの挙動](https://takazudomodular.com/pj/zcss/ja/docs/interactive/scroll/overscroll-behavior): 問題
- [親要素の状態による子要素のスタイリング](https://takazudomodular.com/pj/zcss/ja/docs/interactive/selectors/parent-state-child-styling): 問題
- [ビュートランジション](https://takazudomodular.com/pj/zcss/ja/docs/interactive/states-and-transitions/view-transitions): 問題
- [サブグリッド](https://takazudomodular.com/pj/zcss/ja/docs/layout/flexbox-and-grid/subgrid): 問題
- [スタッキングコンテキスト](https://takazudomodular.com/pj/zcss/ja/docs/layout/positioning/stacking-context): 問題
- [clamp() による流体サイジング](https://takazudomodular.com/pj/zcss/ja/docs/layout/sizing/clamp-for-sizing): 問題
- [ネガティブマージンによる拡張 + パディングで戻す](https://takazudomodular.com/pj/zcss/ja/docs/layout/specialized/negative-margin-expand): 問題
- [CSS Modules 戦略](https://takazudomodular.com/pj/zcss/ja/docs/methodology/architecture/css-modules-strategy): 問題
- [高度なカスタムプロパティ](https://takazudomodular.com/pj/zcss/ja/docs/methodology/design-systems/custom-properties-advanced): 問題
- [マルチネームスペーストークン戦略](https://takazudomodular.com/pj/zcss/ja/docs/methodology/design-systems/multi-namespace-token-strategy): 問題
- [トークンプレビュー](https://takazudomodular.com/pj/zcss/ja/docs/methodology/design-systems/tight-token-strategy/token-preview): タイトトークン戦略で利用可能なすべてのトークンのビジュアルリファレンスです。スペーシング、カラー、タイポグラフィの値を選ぶ際のクイックチートシートとして使いましょう。
- [css-wisdom スキル](https://takazudomodular.com/pj/zcss/ja/docs/overview/css-wisdom-skill): スキルは、Claude Code のスキルで、このドキュメントサイト内のすべての CSS ベストプラクティス記事をインデックス化します。AI コーディングエージェントが開発中に関連する CSS パターンやテクニックをすばやく参照できるようにするためのものです。
- [レスポンシブ画像](https://takazudomodular.com/pj/zcss/ja/docs/responsive/responsive-images): 問題
- [currentColor パターン](https://takazudomodular.com/pj/zcss/ja/docs/styling/color/currentcolor-patterns): 問題
- [ブレンドモード](https://takazudomodular.com/pj/zcss/ja/docs/styling/effects/blend-modes): 問題
- [スムーズなシャドウトランジション](https://takazudomodular.com/pj/zcss/ja/docs/styling/shadows-and-borders/smooth-shadow-transitions): 問題
- [画面幅ベースのフォントサイズ定義](https://takazudomodular.com/pj/zcss/ja/docs/typography/font-sizing/screen-width-based-font-size): 問題
- [日本語フォントファミリーの指定](https://takazudomodular.com/pj/zcss/ja/docs/typography/fonts/japanese-font-family): 問題
- [text-wrap: balanceとpretty](https://takazudomodular.com/pj/zcss/ja/docs/typography/text-control/text-wrap-balance-pretty): 問題
- [gap と margin の使い分け](https://takazudomodular.com/pj/zcss/ja/docs/layout/flexbox-and-grid/gap-vs-margin): 問題
- [アンカーポジショニング](https://takazudomodular.com/pj/zcss/ja/docs/layout/positioning/anchor-positioning): 問題
- [論理プロパティ（Logical Properties）](https://takazudomodular.com/pj/zcss/ja/docs/layout/sizing/logical-properties): 問題
- [テーブルセルの幅制御](https://takazudomodular.com/pj/zcss/ja/docs/layout/specialized/table-cell-width-control): 問題
- [カスケードレイヤー](https://takazudomodular.com/pj/zcss/ja/docs/methodology/architecture/cascade-layers): 問題
- [コンポーネントトークンと任意の値](https://takazudomodular.com/pj/zcss/ja/docs/methodology/design-systems/tight-token-strategy/component-tokens): 問題
- [メディアクエリのベストプラクティス](https://takazudomodular.com/pj/zcss/ja/docs/responsive/media-query-best-practices): 問題
- [ダークモード戦略](https://takazudomodular.com/pj/zcss/ja/docs/styling/color/dark-mode-strategies): 問題
- [フィルターエフェクト](https://takazudomodular.com/pj/zcss/ja/docs/styling/effects/filter-effects): 問題
- [line-heightのベストプラクティス](https://takazudomodular.com/pj/zcss/ja/docs/typography/font-sizing/line-height-best-practices): 問題
- [Noto Sans Webフォントガイド](https://takazudomodular.com/pj/zcss/ja/docs/typography/fonts/noto-sans-webfont-guide): 問題
- [Prose Heading Spacing](https://takazudomodular.com/pj/zcss/ja/docs/typography/text-control/prose-heading-spacing): 問題
- [レスポンシブグリッドパターン](https://takazudomodular.com/pj/zcss/ja/docs/responsive/responsive-grid-patterns): 問題
- [カラーコントラストとアクセシビリティ](https://takazudomodular.com/pj/zcss/ja/docs/styling/color/color-contrast-accessibility): 問題
- [CSS 3Dトランスフォーム](https://takazudomodular.com/pj/zcss/ja/docs/styling/effects/css-3d-transforms): 問題
- [カラーパレット戦略](https://takazudomodular.com/pj/zcss/ja/docs/styling/color/color-palette-strategy): 問題
- [@property（型付きカスタムプロパティ）](https://takazudomodular.com/pj/zcss/ja/docs/styling/effects/at-property): 問題
- [3層カラー戦略](https://takazudomodular.com/pj/zcss/ja/docs/styling/color/three-tier-color-strategy): 問題
- [グラデーションテクニック](https://takazudomodular.com/pj/zcss/ja/docs/styling/effects/gradient-techniques): 問題