How to Streamline CSS Styling with Claude Code

CSSスタイリングでClaude Codeが活躍する場面

デザインカンプからのCSS実装、レスポンシブ対応、ダークモード対応など、スタイリング作業は手間がかかります。Claude Codeはデザインの意図を理解し、効率的にスタイルを生成できます。

Tailwind CSSコンポーネントの生成

> Tailwind CSSで以下のカードコンポーネントを作成して：
> - 画像、タイトル、説明文、タグ、投稿日
> - ホバーで影が強くなるアニメーション
> - ダークモード対応
> - モバイルレスポンシブ

function BlogCard({ post }: { post: Post }) {
  return (
    <article className="group rounded-xl overflow-hidden border border-gray-200
      bg-white shadow-sm transition-shadow duration-300 hover:shadow-lg
      dark:border-gray-700 dark:bg-gray-800">

      <div className="aspect-video overflow-hidden">
        <img
          src={post.image}
          alt={post.title}
          className="h-full w-full object-cover transition-transform
            duration-300 group-hover:scale-105"
        />
      </div>

      <div className="p-4 sm:p-6">
        <div className="mb-2 flex flex-wrap gap-2">
          {post.tags.map(tag => (
            <span key={tag} className="rounded-full bg-blue-100 px-2.5 py-0.5
              text-xs font-medium text-blue-800
              dark:bg-blue-900 dark:text-blue-200">
              {tag}
            </span>
          ))}
        </div>

        <h2 className="mb-2 text-lg font-bold text-gray-900
          line-clamp-2 dark:text-white sm:text-xl">
          {post.title}
        </h2>

        <p className="mb-4 text-sm text-gray-600 line-clamp-3
          dark:text-gray-300">
          {post.description}
        </p>

        <time className="text-xs text-gray-500 dark:text-gray-400">
          {new Date(post.date).toLocaleDateString('en-US')}
        </time>
      </div>
    </article>
  );
}

CSSアニメーションの生成

> ローディングスピナーをCSSアニメーションで作成して。
> Tailwindのユーティリティとカスタムアニメーションを組み合わせて。

/* tailwind.config.jsに追加するカスタムアニメーション */
@layer utilities {
  @keyframes spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  @keyframes pulse-ring {
    0% { transform: scale(0.8); opacity: 1; }
    100% { transform: scale(1.4); opacity: 0; }
  }

  .animate-spinner {
    animation: spinner 1s linear infinite;
  }

  .animate-pulse-ring {
    animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  }
}

function LoadingSpinner({ size = 'md' }: { size?: 'sm' | 'md' | 'lg' }) {
  const sizeClasses = {
    sm: 'h-5 w-5 border-2',
    md: 'h-8 w-8 border-3',
    lg: 'h-12 w-12 border-4',
  };

  return (
    <div className="flex items-center justify-center">
      <div className={`${sizeClasses[size]} animate-spinner rounded-full
        border-gray-300 border-t-blue-600
        dark:border-gray-600 dark:border-t-blue-400`}
      />
    </div>
  );
}

既存スタイルのリファクタリング

> src/styles/ 配下のCSSファイルを分析して、
> 重複しているスタイルを共通化して。
> 使われていないCSSクラスを特定してDeleteして。

Claude Codeはプロジェクト全体のCSSを分析し、重複パターンの統合や不要クラスの除去を提案します。

レスポンシブデザインの一括対応

> 全ページコンポーネントのレスポンシブ対応をチェックして。
> 320px〜1440pxまで問題ないか確認して、修正が必要な箇所を直して。

// レスポンシブなグリッドレイアウトの例
function ProductGrid({ products }: { products: Product[] }) {
  return (
    <div className="grid grid-cols-1 gap-4
      sm:grid-cols-2 sm:gap-6
      lg:grid-cols-3
      xl:grid-cols-4 xl:gap-8">
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

ダークモードの実装

> プロジェクト全体にダークモードを追加して。
> システム設定に追従し、ユーザーが手動で切り替えられるようにして。

// hooks/useTheme.ts
import { useEffect, useState } from 'react';

type Theme = 'light' | 'dark' | 'system';

export function useTheme() {
  const [theme, setTheme] = useState<Theme>(() => {
    return (localStorage.getItem('theme') as Theme) || 'system';
  });

  useEffect(() => {
    const root = document.documentElement;
    const systemDark = window.matchMedia('(prefers-color-scheme: dark)');

    function applyTheme() {
      const isDark = theme === 'dark' ||
        (theme === 'system' && systemDark.matches);
      root.classList.toggle('dark', isDark);
    }

    applyTheme();
    systemDark.addEventListener('change', applyTheme);
    localStorage.setItem('theme', theme);

    return () => systemDark.removeEventListener('change', applyTheme);
  }, [theme]);

  return { theme, setTheme };
}

Summary

Claude Codeを活用すれば、コンポーネントのスタイリングからレスポンシブ対応、ダークモード実装まで、CSSに関わる作業を大幅に効率化できます。デザインの要件を具体的にプロンプトで伝えることがコツです。効果的なプロンプトの書き方はプロンプトテクニック完全ガイドを参照してください。スタイリングの規約はCLAUDE.mdに記述しておくと一貫性を保てます。

詳しくはAnthropic公式ドキュメントやTailwind CSS公式サイトをご覧ください。