Usage Guide: Claude Code 활용 가이드

モダンなメディア쿼리で반응형설계を極める

メディア쿼리は반응형デザインの基盤ですが、最新のCSS仕様では範囲構文やContainer Queriesなど強力な機能が추가されています。Claude Code를 활용하면 モダンなメディア쿼리を효과적으로활용した스타일を効率よく구현할 수 있습니다。

新しい範囲構文（Media Query Range）

> 最新のメディア쿼리範囲構文で、主要브레이크포인트の스타일を書いて。

/* 従来の書き方 */
@media (min-width: 768px) and (max-width: 1023px) {
  .container { padding: 1.5rem; }
}

/* 新しい範囲構文（Level 4） */
@media (768px <= width < 1024px) {
  .container { padding: 1.5rem; }
}

/* ブレークポイントの体系的な定義 */
/* モバイル */
@media (width < 640px) {
  .grid { grid-template-columns: 1fr; }
}

/* タブレット */
@media (640px <= width < 1024px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* デスクトップ */
@media (width >= 1024px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

/* ワイドスクリーン */
@media (width >= 1440px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}

Container Queries

> Container Queries를 사용한반응형カード컴포넌트를 생성해줘。

/* 親コンテナの定義 */
.card-container {
  container-type: inline-size;
  container-name: card;
}

/* コンテナサイズに応じたスタイル */
.card {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

@container card (width < 300px) {
  .card {
    grid-template-columns: 1fr;
  }
  .card__image {
    aspect-ratio: 16 / 9;
  }
}

@container card (300px <= width < 500px) {
  .card {
    grid-template-columns: 120px 1fr;
  }
  .card__image {
    aspect-ratio: 1;
  }
}

@container card (width >= 500px) {
  .card {
    grid-template-columns: 200px 1fr;
    padding: 1.5rem;
  }
  .card__title {
    font-size: 1.25rem;
  }
}

사용자설정系メディア쿼리

/* ダークモード */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1a2e;
    --text-color: #eee;
    --card-bg: #16213e;
  }
}

/* アニメーション軽減 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* コントラスト向上 */
@media (prefers-contrast: more) {
  :root {
    --border-color: #000;
    --text-color: #000;
  }
  .btn {
    border: 2px solid #000;
    font-weight: bold;
  }
}

/* 透明度低減 */
@media (prefers-reduced-transparency) {
  .overlay {
    background: var(--bg-color);
    opacity: 1;
  }
}

JavaScriptとの연동

// メディア쿼리をJavaScriptで監視
function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const mql = window.matchMedia(query);
    setMatches(mql.matches);

    const handler = (e: MediaQueryListEvent) => setMatches(e.matches);
    mql.addEventListener('change', handler);
    return () => mql.removeEventListener('change', handler);
  }, [query]);

  return matches;
}

// Usage example
function ResponsiveLayout() {
  const isMobile = useMediaQuery('(width < 640px)');
  const isDark = useMediaQuery('(prefers-color-scheme: dark)');
  const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');

  return (
    <div>
      {isMobile ? <MobileNav /> : <DesktopNav />}
      {/* コンテンツ */}
    </div>
  );
}

印刷用스타일

@media print {
  /* ナビゲーション・フッター非表示 */
  nav, footer, .sidebar, .share-buttons {
    display: none !important;
  }

  /* リンクURLを表示 */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }

  /* ページ分割制御 */
  h1, h2, h3 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }
}

정리

メディア쿼리はCSS GridやFlexboxと組み合わせることで、真の반응형デザインを実現します。Claude Code를 활용하면 Container Queriesやprefers-*系쿼리など最新仕様への대응も빠르게구현할 수 있습니다。アクセシビリティの観点から、prefers-reduced-motionへの대응は必須です。Container Queriesの最新仕様はCSS Containment Module Level 3를 참고하세요.