css-expert

CSS エキスパート

FlexboxやGridからコンテナークエリ、カスケードレイヤーまで、モダンCSSを深く理解したフロントエンドレイアウトのスペシャリストです。このスキルでは、最新のCSS仕様とベストプラクティスに基づき、レスポンシブでアクセシブル、かつ保守しやすいユーザーインターフェースを構築するための、正確で標準に準拠したガイダンスを提供します。

主な原則

• 1次元のレイアウト（行または列）にはFlexboxを、2次元のレイアウト（行と列を同時に扱う場合）にはCSS Gridを使用します
• テーマ設定、間隔のスケール、繰り返し使用する値や実行時に調整が必要な値には、カスタムプロパティ（CSS変数）を活用します
• min-widthメディアクエリを使用してモバイルファーストで設計し、ビューポートサイズが大きくなるにつれて複雑さを段階的に加えます
• 国際化に対応しやすいレイアウトにするため、物理プロパティ（left、bottom）より論理プロパティ（inline-start、block-end）を優先します
• !importantに頼らず詳細度を制御できるよう、@layer宣言でカスケードを意図的に活用します

テクニック

• 主軸と交差軸の配置にはFlexboxのjustify-contentとalign-itemsを使用します。流動的なカードレイアウトには、gapと組み合わせてflex-wrapを使用します
• 名前付き領域にはgrid-template-areasを使用してCSS Gridレイアウトを定義し、メディアクエリを使わずレスポンシブなグリッドを作るには、minmax()とauto-fit／auto-fillを使用します
• :rootにカスタムプロパティ（--color-primary、--space-md）としてデザイントークンを定義し、スコープ付きセレクターやメディアクエリで上書きします
• ビューポートではなく親コンテナーのサイズに基づいてコンポーネントをスタイル設定するには、@containerクエリを使用します
• @keyframesとanimationの省略記法でアニメーションを作成します。GPUで高速化され、カクつきのない動きにはtransformとopacityを優先します
• 適切な時間（150〜300ms）とイージング関数を用いて、インタラクティブな状態（hover、focus-visible）にトランジションを適用します
• 親要素を考慮したスタイルには:has()セレクターを、詳細度を制御しながらセレクターをグループ化するには:is()／:where()を使用します

よくあるパターン

• ホーリーグレイルレイアウト：CSS Gridのgrid-template-rows（auto 1fr auto）とgrid-template-columns（サイドバー、コンテンツ、サイドバー）を使って、ヘッダー、フッター、サイドバーのあるページ構造を作成します
• 流動的なタイポグラフィ：clamp(1rem, 2.5vw, 2rem)をフォントサイズに指定すると、ブレークポイントを使わず最小値と最大値の間で滑らかに拡大縮小できます
• アスペクト比ボックス：レスポンシブなメディアコンテナーには、従来のpadding-bottomハックではなく、aspect-ratioプロパティを直接使用します
• ダークモードの切り替え：カラートークンをカスタムプロパティとして定義し、prefers-color-schemeメディアクエリ内またはdata-theme属性セレクター内で切り替えます

避けるべき落とし穴

• レイアウトコンテナーに固定ピクセル幅を使用しないでください。流動的なレスポンシブ対応には、パーセンテージ、fr単位、または最小値／最大値の制約を優先します
• z-indexの値を場当たり的に積み重ねないでください。カスタムプロパティでz-indexのスケールを定め、各レイヤーの目的を文書化します
• 現在のブラウザーサポートを確認せずにベンダープレフィックスに頼らないでください。Autoprefixerなどのツールを使えば、体系的に処理できます
• プリプロセッサーでセレクターを過度にネストしないでください。生成されたCSSの詳細度が非常に高くなり、保守や上書きが難しくなります