mcpField
C
css

css

github.com/mindrallyデザイン・UI2871.2k 回インストール3 週間前に更新
リポジトリ

css について

アクセシブルでレスポンシブ、保守しやすいインターフェースを作るための CSS 開発ガイドラインです。レイアウトや命名、性能、ブラウザー対応、最新の CSS 実践を扱います。

主な機能

  1. 01セマンティック HTML と外部スタイルシート
  2. 02レスポンシブな Flexbox・Grid レイアウト
  3. 03CSS 変数と BEM 命名
  4. 04詳細度とスタイルシートの構成
  5. 05アクセシビリティとブラウザー向けフォールバック

活用シーン

  1. 01レスポンシブなページレイアウトの設計
  2. 02コンポーネントのスタイルシート整理
  3. 03CSS のアクセシビリティと互換性の確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/mindrally/skills --skill css

インストール後、Claude Code で/cssを入力して読み込まれたか確認します。

詳細

CSS 開発ガイドライン

基本原則

  • アクセシビリティと SEO を向上させるため、セマンティック HTML を記述します
  • スタイル設定には CSS を使用し、インラインスタイルは避けます
  • メディアクエリと柔軟なレイアウトを使用して、レスポンシブデザインを実現します
  • インラインスタイルや埋め込みスタイルより、外部スタイルシートを優先します

レイアウト手法

Flexbox
  • 1 次元のレイアウト（行または列）には Flexbox を使用します
  • justify-content と align-items を活用して配置します
  • レスポンシブな折り返しには flex-wrap を使用します
  • 一貫した間隔を保つため、マージンより gap プロパティを優先します
Grid
  • 2 次元のレイアウトには CSS Grid を使用します
  • grid-template-columns と grid-template-rows でグリッドテンプレートを定義します
  • 名前付きテンプレート領域には grid-area を使用します
  • レスポンシブなグリッドには auto-fit と auto-fill を活用します

単位とタイポグラフィ

  • ユーザー設定を尊重するため、タイポグラフィには rem 単位を使用します
  • コンポーネントに対する相対的なサイズ指定には em 単位を使用します
  • フォントサイズに px を使うのは避け、境界線や固定要素に限定します
  • 適切な場合は clamp() で流動的なタイポグラフィを実装します
  • 全画面レイアウトでは、ビューポート単位（vw、vh）を慎重に使用します

CSS 変数（カスタムプロパティ）

  • :root にデザイントークンを CSS 変数として定義します
  • 色、間隔、タイポグラフィ、影には変数を使用します
  • コンテキストごとに変数を上書きして、テーマを実装します
  • 意味が分かる名前を変数に付けます（例：--color-primary、--spacing-md）

命名規則

BEM 手法
  • ブロック：独立したコンポーネント（例：.card）
  • エレメント：ブロックの一部（例：.card__title）
  • モディファイア：ブロックまたはエレメントのバリエーション（例：.card--featured）
ベストプラクティス
  • クラス名には小文字とハイフンを使用します
  • スタイル設定に ID を使うのは避け、JavaScript のフック用に限定します
  • 単一クラスのセレクターを使用し、詳細度を低く保ちます
  • スタイルの競合を防ぐため、スタイルの適用範囲をコンポーネントに限定します

詳細度の管理

  • 可能な限り、詳細度を 0-1-0（単一クラス）に保ちます
  • !important 宣言は避けます
  • カスケードは意図的に使用し、偶発的な適用を避けます
  • 詳細度の制御には CSS レイヤー（@layer）を検討します

レスポンシブデザイン

  • モバイルファーストのメディアクエリを実装します
  • 柔軟なレイアウトには相対単位を使用します
  • 複数のビューポートサイズでテストします
  • コンポーネント単位のレスポンシブ対応には、コンテナクエリを検討します

パフォーマンス

  • セレクターの複雑さを最小限に抑えます
  • 深くネストしたセレクターは避けます
  • 効率的なセレクター（要素セレクターよりクラスセレクター）を使用します
  • 独立したコンポーネントには CSS のコンテインメントを活用します
  • ファーストビューのコンテンツにはクリティカル CSS を検討します

モダン CSS の機能

  • 比率の維持には aspect-ratio を使用します
  • Flexbox と Grid で gap を活用します
  • 論理プロパティ（margin-inline、padding-block）を使用します
  • transition プロパティで滑らかなトランジションを実装します
  • 機能検出には @supports を使用します

構成

  • スタイルシートを論理的に構成します（ベース、レイアウト、コンポーネント、ユーティリティ）
  • ファイルはモジュール化し、役割を絞ります
  • 複雑なスタイルにはコメントで説明を加えます
  • 宣言内のプロパティ順序を統一します

ブラウザー互換性

  • 必要に応じてベンダープレフィックスを使用します（Autoprefixer の利用を検討してください）
  • 対象ブラウザーでテストします
  • 新しい機能にはフォールバックを用意します
  • プログレッシブエンハンスメントのアプローチを採用します

アクセシビリティ

  • 十分な色のコントラストを確保します（最低でも WCAG AA）
  • キーボード操作用に、視認できるフォーカススタイルを用意します
  • スクリーンリーダーに影響する方法でコンテンツを非表示にするのは避けます
  • アニメーションには prefers-reduced-motion メディアクエリを使用します

コメント

Markdown 対応