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;
}

// 使用例
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を参照してください。