Claude Code के साथ Efficiently Implementing Responsive Design

responsiveデザインको Claude Code सेimplement करना

responsiveデザインはWebサイトの必須要件ですが、ブレークポイント設計やlayout切り替えには多くの考慮がज़रूरी है।Claude Code से「モバイルsupportにして」と伝える से हीappropriateなimplementation generateでき है।

モバイルファーストのlayout

> モバイルファーストでresponsiveなdashboardlayoutを作って。
> sidebar、header、メインコンテンツの3column構成にして。

export function DashboardLayout({ children }: { children: React.ReactNode }) {
  const [sidebarOpen, setSidebarOpen] = useState(false);

  return (
    <div className="min-h-screen bg-gray-50">
      {/* モバイルオーバーレイ */}
      {sidebarOpen && (
        <div
          className="fixed inset-0 bg-black/50 z-40 lg:hidden"
          onClick={() => setSidebarOpen(false)}
        />
      )}

      {/* sidebar */}
      <aside
        className={`fixed inset-y-0 left-0 z-50 w-64 bg-white border-r transform transition-transform duration-200 lg:translate-x-0 lg:static lg:z-auto ${
          sidebarOpen ? "translate-x-0" : "-translate-x-full"
        }`}
      >
        <nav className="p-4 space-y-2">
          <a href="#" className="block px-3 py-2 rounded-lg hover:bg-gray-100">
            dashboard
          </a>
          <a href="#" className="block px-3 py-2 rounded-lg hover:bg-gray-100">
            usermanagement
          </a>
          <a href="#" className="block px-3 py-2 rounded-lg hover:bg-gray-100">
            settings
          </a>
        </nav>
      </aside>

      {/* メインエリア */}
      <div className="lg:ml-0 flex flex-col min-h-screen lg:flex-row">
        <div className="flex-1">
          {/* header */}
          <header className="sticky top-0 bg-white border-b px-4 py-3 flex items-center gap-4">
            <button
              onClick={() => setSidebarOpen(true)}
              className="lg:hidden p-2 rounded-lg hover:bg-gray-100"
            >
              <span className="sr-only">menuを開く</span>
              ☰
            </button>
            <h1 className="text-lg font-semibold">dashboard</h1>
          </header>

          {/* コンテンツ */}
          <main className="p-4 md:p-6 lg:p-8">{children}</main>
        </div>
      </div>
    </div>
  );
}

responsivegrid

card型のコンテンツを画面幅に応じて最適にlayoutし है।

export function ResponsiveGrid({ items }: { items: CardItem[] }) {
  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6">
      {items.map((item) => (
        <article
          key={item.id}
          className="bg-white rounded-lg shadow-sm border overflow-hidden hover:shadow-md transition-shadow"
        >
          <img
            src={item.image}
            alt={item.title}
            className="w-full h-40 sm:h-48 object-cover"
            loading="lazy"
          />
          <div className="p-4">
            <h3 className="font-semibold text-base md:text-lg line-clamp-2">
              {item.title}
            </h3>
            <p className="text-sm text-gray-600 mt-2 line-clamp-3">
              {item.description}
            </p>
          </div>
        </article>
      ))}
    </div>
  );
}

containerqueryのutilization

CSS Container Queriesを使えば、親要素のsizeに応じたresponsivesupportがpossible है।

.card-container {
  container-type: inline-size;
  container-name: card;
}

.card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* containerが400px以ऊपरなら横並び */
@container card (min-width: 400px) {
  .card {
    grid-template-columns: 200px 1fr;
  }
}

/* containerが600px以ऊपरならइसके अलावाリッチに */
@container card (min-width: 600px) {
  .card {
    grid-template-columns: 250px 1fr auto;
  }
}

responsiveタイポグラフィ

clamp()を使った流動的なfontsizeのsettings है।

:root {
  --font-size-sm: clamp(0.8rem, 0.17vw + 0.76rem, 0.89rem);
  --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
  --font-size-lg: clamp(1.25rem, 0.61vw + 1.1rem, 1.58rem);
  --font-size-xl: clamp(1.56rem, 1vw + 1.31rem, 2.11rem);
  --font-size-2xl: clamp(1.95rem, 1.56vw + 1.56rem, 2.81rem);
  --font-size-3xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
p { font-size: var(--font-size-base); }

responsivetable

モバイルでもtabledataを見やすくする方法 है।

export function ResponsiveTable({ data, columns }: TableProps) {
  return (
    <>
      {/* デスクトップdisplay */}
      <div className="hidden md:block overflow-x-auto">
        <table className="w-full">
          <thead>
            <tr className="border-b">
              {columns.map((col) => (
                <th key={col.key} className="px-4 py-3 text-left text-sm font-medium">
                  {col.label}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {data.map((row, i) => (
              <tr key={i} className="border-b hover:bg-gray-50">
                {columns.map((col) => (
                  <td key={col.key} className="px-4 py-3 text-sm">
                    {row[col.key]}
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* モバイル：carddisplay */}
      <div className="md:hidden space-y-4">
        {data.map((row, i) => (
          <div key={i} className="bg-white border rounded-lg p-4 space-y-2">
            {columns.map((col) => (
              <div key={col.key} className="flex justify-between">
                <span className="text-sm text-gray-500">{col.label}</span>
                <span className="text-sm font-medium">{row[col.key]}</span>
              </div>
            ))}
          </div>
        ))}
      </div>
    </>
  );
}

darkモードとの組み合わせはdarkモードimplementationを、デザインシステム全体の設計はデザインシステムbuildदेखें。

Summary

Claude Code का उपयोग करके、モバイルファーストのlayout設計、containerqueryのutilization、responsivetable तक、responsiveデザインのcomplexなimplementationをefficiently完了でき है।「इस画面をモバイルsupportにして」と依頼するだけ है।

विस्तार से जानने के लिएClaude Codeofficial documentationをदेखें。