Efficiently Implementing Responsive Design：Claude Code 实战指南

响应式デザインを通过 Claude Code 实现

响应式デザインはWebサイトの必須要件ですが、断点设计や布局切换には多くの考慮が是必要的。使用 Claude Code「モバイル支持にして」と伝える只需合适的实现を生成可以。

モバイルファーストの布局

> モバイルファーストで响应式なダッシュボード布局を作って。
> 侧边栏、头部、メイン内容の3カラム结构にして。

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)}
        />
      )}

      {/* サイドバー */}
      <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">
            ダッシュボード
          </a>
          <a href="#" className="block px-3 py-2 rounded-lg hover:bg-gray-100">
            ユーザー管理
          </a>
          <a href="#" className="block px-3 py-2 rounded-lg hover:bg-gray-100">
            設定
          </a>
        </nav>
      </aside>

      {/* メインエリア */}
      <div className="lg:ml-0 flex flex-col min-h-screen lg:flex-row">
        <div className="flex-1">
          {/* ヘッダー */}
          <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">メニューを開く</span>
              ☰
            </button>
            <h1 className="text-lg font-semibold">ダッシュボード</h1>
          </header>

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

响应式网格

カード类型の内容を画面幅に応じて最適に布局します。

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

容器查询の活用

CSS Container Queriesを使えば、親要素のサイズに応じた响应式支持が是可能的。

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

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

/* コンテナが400px以上なら横並び */
@container card (min-width: 400px) {
  .card {
    grid-template-columns: 200px 1fr;
  }
}

/* コンテナが600px以上ならさらにリッチに */
@container card (min-width: 600px) {
  .card {
    grid-template-columns: 250px 1fr auto;
  }
}

响应式タイポグラフィ

clamp()使用…的流動的な字体サイズの配置です。

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

响应式表格

モバイルでも表格数据を見やすくする方法です。

export function ResponsiveTable({ data, columns }: TableProps) {
  return (
    <>
      {/* デスクトップ表示 */}
      <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>

      {/* モバイル：カード表示 */}
      <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>
    </>
  );
}

ダークモードとの組み合わせはダークモード实现を、デザインシステム全体の设计はデザインシステム构建。

总结

借助 Claude Code，モバイルファーストの布局设计、容器查询の活用、响应式表格まで、响应式デザインの複雑な实现を高效地完成可以。「这个画面をモバイル支持にして」と依頼する只需す。

详情请参阅Claude Code官方文档。