Claude Code के साथ Usage Guide

モダンなメディアqueryでresponsive設計を極める

メディアqueryはresponsiveデザインの基盤ですが、最新のCSS仕様では範囲構文やContainer Queries आदिpowerfulなfeaturesがaddされてい है।Claude Code का उपयोग करके、モダンなメディアqueryを効果的にutilizationしたstyleを効率よくimplementationでき है।

नया範囲構文（Media Query Range）

> 最新のメディアquery範囲構文で、主要ブレークポイントのstyleを書いて。

/* 従来のलिखने का तरीका */
@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; }
}

/* tabレット */
@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を使ったresponsivecardcomponentをबनाओ。

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

/* containersizeに応じたstyle */
.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;
  }
}

usersettings系メディアquery

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

/* animation軽減 */
@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とのintegration

// メディアqueryを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>
  );
}

印刷用style

@media print {
  /* navigation・footer非display */
  nav, footer, .sidebar, .share-buttons {
    display: none !important;
  }

  /* linkURL display */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }

  /* page分割制御 */
  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;
  }
}

Summary

メディアqueryはCSS GridやFlexbox के साथ combineる बातで、真のresponsiveデザインを実現し है।Claude Code का उपयोग करके、Container Queriesやprefers-*系query आदि最新仕様へのsupportも素早くimplementationでき है।accessibilityの観点 से、prefers-reduced-motionへのsupportは必須 है।Container Queriesの最新仕様はCSS Containment Module Level 3をदेखें。