Claude CodeでCSS Gridを実務レベルにする方法

CSS Gridは「ページ全体の設計図」として使う

CSS Gridは、縦方向と横方向を同時に扱えるCSSのレイアウト機能です。Flexboxが「一列に並ぶ部品の調整」に強いのに対して、Gridはヘッダー、サイドバー、本文、CTA、カード一覧のような画面全体の骨格に向いています。grid-template-areasは領域に名前を付ける書き方、minmax()は「最小幅と最大幅」を同時に指定する関数、auto-fitは入るだけ列を作って余白を自然に埋める指定です。初めて見る人には専門用語が多いですが、実務ではこの3つを押さえるだけでかなり安定します。

Claude Codeに任せる価値は、CSSを短く書かせることだけではありません。画面要件、既存のHTML、ブレークポイント、広告枠、CTA、アクセシビリティを一緒に渡すと、崩れにくい設計案、動くコード、確認観点まで同じ流れで作れます。Masaが記事ページの改修で一番つまずいたのは「PCだけ見て完成」と判断したことでした。スマホ幅でCTAカードがはみ出し、コードブロックが横スクロールし、広告枠の余白で本文が読みづらくなりました。Gridは強力ですが、最小幅と領域名を雑に扱うとすぐ壊れます。

この記事では、Claude Codeにそのまま依頼しやすい粒度で、ダッシュボード、記事カード、ランディングページ、Astro/Reactコンポーネントの4パターンを作ります。関連する基礎はレスポンシブデザイン、Flexboxパターン、CSS変数、アクセシビリティも一緒に読むと理解しやすいです。公式リファレンスはMDNのCSS Grid Layout、grid-template-areas、minmax()、repeat()を参照してください。

Claude Codeに渡す前提を整理する

Gridの失敗は、CSSプロパティの知識不足よりも「何を固定し、何を伸縮させるか」が曖昧なまま実装することで起きます。Claude Codeには、最初に次の条件を渡します。

項目	伝える内容	理由
領域	header、sidebar、main、footer、ctaなど	grid-template-areasの名前を安定させる
最小幅	カードは280px以上、本文は65ch前後など	文字と画像の潰れを防ぐ
伸縮	余白は1fr、カードはauto-fitなど	画面幅ごとに自然に増減させる
優先順位	CTA、価格表、本文、広告枠	収益導線を崩さない
検証幅	360px、768px、1024px、1440px	PCだけの見た目判断を避ける

依頼文は短くても構いません。ただし「レスポンシブにして」だけでは弱いです。「スマホでは1列、タブレットでは2列、PCではサイドバー付き。コードブロックとCTAがはみ出さないこと」のように、壊れて困る場所まで指定します。Claude Codeには、実装後に「min-width: 0不足、固定幅、領域名の不一致、キーボード操作、横スクロール」をレビューさせると精度が上がります。

コピペで動く基本HTML

まずはGridの対象になるHTMLです。Gridでは、親要素が「グリッドコンテナ」、直接の子要素が「グリッドアイテム」です。入れ子を増やしすぎると、どの要素を並べているのか分かりにくくなるため、最初はこの程度の構造に抑えます。

<div class="dashboard-shell">
  <header class="site-header">
    <a class="brand" href="/">ClaudeCodeLab</a>
    <nav class="top-nav" aria-label="Primary">
      <a href="/blog/claude-code-responsive-design">Responsive</a>
      <a href="/blog/claude-code-flexbox-patterns">Flexbox</a>
      <a href="/training/">Training</a>
    </nav>
  </header>

  <aside class="sidebar" aria-label="Article sections">
    <a href="#cards">Cards</a>
    <a href="#pitfalls">Pitfalls</a>
    <a href="#cta">CTA</a>
  </aside>

  <main class="content">
    <section class="hero-panel">
      <p class="eyebrow">CSS Grid guide</p>
      <h1>Gridで記事ページと管理画面を崩れにくくする</h1>
      <p>Named areas、minmax、auto-fitを組み合わせて、スマホからワイド画面まで同じHTMLで扱います。</p>
    </section>

    <section id="cards" class="card-grid" aria-label="Use cases">
      <article class="card">
        <h2>記事一覧</h2>
        <p>カード幅を280px以上に保ち、余白に応じて列数を増やします。</p>
      </article>
      <article class="card">
        <h2>価格表</h2>
        <p>CTAボタンの位置を揃えて、比較しやすいレイアウトにします。</p>
      </article>
      <article class="card">
        <h2>管理画面</h2>
        <p>サイドバーと本文を名前付き領域で管理します。</p>
      </article>
    </section>
  </main>

  <footer class="site-footer" id="cta">
    <p>Claude Codeの導入設計は <a href="/training/">研修・相談</a> で相談できます。</p>
  </footer>
</div>

grid-template-areasで画面の骨格を固定する

grid-template-areasは、見た目の設計図を文字列で表す書き方です。"header header"のように同じ名前を横に並べると、その領域が複数列にまたがります。名前がCSS側と子要素側で一致していないと配置されないため、Claude Codeには「領域名を変更したらHTML/CSSを同時に直す」と明示します。

.dashboard-shell {
  --page-gap: clamp(1rem, 2vw, 2rem);
  --sidebar-width: minmax(14rem, 18rem);
  --content-width: minmax(0, 1fr);

  display: grid;
  grid-template-columns: var(--sidebar-width) var(--content-width);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  gap: var(--page-gap);
  min-height: 100svh;
  padding: var(--page-gap);
}

.site-header {
  grid-area: header;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.sidebar {
  grid-area: sidebar;
  align-self: start;
  position: sticky;
  top: 1rem;
}

.content {
  grid-area: content;
  min-width: 0;
}

.site-footer {
  grid-area: footer;
  border-top: 1px solid #d7dee8;
  padding-block-start: 1rem;
}

@media (width < 768px) {
  .dashboard-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "footer";
  }

  .site-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .sidebar {
    position: static;
  }
}

ここで重要なのは.content { min-width: 0; }です。Gridアイテムは中身の最小幅に引っ張られることがあり、長いURL、表、コードブロックがあると横幅を押し広げます。min-width: 0は「この領域は縮んでよい」とブラウザに伝える指定です。記事ページ、SaaS管理画面、ドキュメントサイトではかなり頻出の落とし穴です。

minmaxとauto-fitでレスポンシブカードを作る

カード一覧では、メディアクエリだけで列数を管理すると、画面幅とカード数の組み合わせが増えたときに調整がつらくなります。repeat(auto-fit, minmax(280px, 1fr))を使うと、カードが入るだけ列を作り、余ったスペースを自然に分配できます。

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
}

.card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.75rem;
  min-width: 0;
  border: 1px solid #d7dee8;
  border-radius: 8px;
  padding: 1rem;
  background: #ffffff;
}

.card h2 {
  margin: 0;
  font-size: 1.125rem;
}

.card p {
  margin: 0;
  color: #3f4b5f;
}

.card a,
.card button {
  justify-self: start;
}

auto-fillとauto-fitは似ています。auto-fillは空の列トラックを残し、auto-fitは空の列を畳んで既存カードを伸ばします。記事カードや価格表のように「少ない件数でも横幅を活かしたい」場合はauto-fitが扱いやすいです。一方、カレンダーや座席表のように空き枠も意味を持つUIではauto-fillの方が自然なことがあります。

Astroコンポーネントに切り出す

Astroサイトでは、カードグリッドをコンポーネント化しておくと記事一覧、関連記事、商品一覧に使い回せます。以下は外部データなしで動く最小例です。class:listに頼らず、まずは読みやすさ優先で書いています。

---
const items = [
  {
    title: "Responsive article cards",
    body: "auto-fit and minmax keep cards readable without many breakpoints.",
    href: "/blog/claude-code-responsive-design"
  },
  {
    title: "Flexbox patterns",
    body: "Use Flexbox inside cards when the direction is mostly one-dimensional.",
    href: "/blog/claude-code-flexbox-patterns"
  },
  {
    title: "CSS variables",
    body: "Tokenize gap, radius, and content width before asking Claude Code to scale the layout.",
    href: "/blog/claude-code-css-variables"
  }
];
---

<section class="related-grid" aria-label="Related guides">
  {items.map((item) => (
    <article class="related-card">
      <h2>{item.title}</h2>
      <p>{item.body}</p>
      <a href={item.href}>Read guide</a>
    </article>
  ))}
</section>

<style>
  .related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 1rem;
  }

  .related-card {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-width: 0;
    border: 1px solid #d7dee8;
    border-radius: 8px;
    padding: 1rem;
  }
</style>

Claude Codeにこのコンポーネントを直させるときは、「hrefは既存slugだけを使う」「カード内のリンクテキストを空にしない」「grid-template-columnsの最小幅を18rem未満にしない」など、編集してよい範囲と禁止事項を一緒に渡します。記事アーカイブでは存在しない内部リンクがSEO上の損失になるため、リンク先slugの確認も依頼してください。

React/TSXでCTA付きカードを実装する

ReactやNext.jsで使う場合は、配列データからカードを生成します。Gridは親コンテナだけで成立させ、カード内の縦揃えはカード自身を小さなGridにするのが扱いやすいです。

type ResourceCard = {
  title: string;
  description: string;
  href: string;
  cta: string;
};

const resources: ResourceCard[] = [
  {
    title: "CSS Grid review",
    description: "Check named areas, minmax rules, overflow, and mobile card behavior.",
    href: "/blog/claude-code-css-grid-mastery",
    cta: "Review checklist"
  },
  {
    title: "Claude Code training",
    description: "Design prompts, review rules, and implementation boundaries for your team.",
    href: "/training/",
    cta: "Consult training"
  },
  {
    title: "Template products",
    description: "Start with reusable CLAUDE.md and review prompts before scaling layout work.",
    href: "/products/",
    cta: "See products"
  }
];

export function ResourceGrid() {
  return (
    <section className="resource-grid" aria-label="CSS Grid resources">
      {resources.map((resource) => (
        <article className="resource-card" key={resource.href}>
          <h2>{resource.title}</h2>
          <p>{resource.description}</p>
          <a href={resource.href}>{resource.cta}</a>
        </article>
      ))}
    </section>
  );
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1rem;
}

.resource-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.75rem;
  min-width: 0;
  border: 1px solid #d7dee8;
  border-radius: 8px;
  padding: 1rem;
}

.resource-card a {
  justify-self: start;
}

実務ユースケースを3つ以上で考える

1つ目はメディアの記事一覧です。カードの件数が3件、7件、11件のように半端でも、auto-fitなら余白が自然に伸びます。タグ、読了時間、著者名が増えても、カード内をgrid-template-rows: auto 1fr autoにしておくとCTA位置を揃えられます。

2つ目はSaaSや社内ツールのダッシュボードです。サイドバー、フィルター、メイン表、詳細パネルを名前付き領域にすると、モバイルで順序を変えるときにCSSだけで対応しやすくなります。ただし、表やコードログを入れる領域にはmin-width: 0とoverflow: autoを忘れないでください。

3つ目は価格表や比較表です。価格カードはCTAが収益に直結するため、見た目の装飾より「同じ高さで比較できること」「ボタンが見えること」「スマホで押しやすいこと」を優先します。比較記事なら、デザインシステムで定義した余白、色、角丸を使い、Grid側では列の増減だけを扱うと保守しやすいです。

4つ目はポートフォリオやギャラリーです。画像の縦横比が混ざる場合は、むやみにgrid-row: span 2を使うより、aspect-ratioでカードの枠を安定させた方が読み込み時のガタつきが減ります。画像最適化や読み込み速度はパフォーマンス最適化と合わせて確認します。

よくある落とし穴

一番多いのは、grid-template-columns: repeat(3, 1fr)をPC前提で書いたままスマホに持ち込む失敗です。360px幅でも3列を維持しようとしてカードが潰れ、ボタンや長い単語がはみ出します。カードにはrepeat(auto-fit, minmax(min(100%, 280px), 1fr))を基本形として使い、必要なときだけメディアクエリで調整します。

次に多いのは、grid-template-areasの名前ミスです。CSSで"sidebar main"と書いているのに、子要素がgrid-area: side;になっていると意図どおりに配置されません。Claude Codeに修正させるときは、領域名の一覧を出させてから変更させると安全です。

3つ目は、Gridを使う場所とFlexboxを使う場所の混同です。ページ全体やカード一覧はGrid、ボタン内のアイコンとテキスト、ナビゲーションの横並び、カード内の小さな配置はFlexboxが向いています。どちらか一方だけで全部を解決しようとすると、CSSが読みにくくなります。

4つ目は、広告枠やCTAを後から差し込むことです。記事公開後に広告、無料PDF、Gumroad商品リンク、研修導線を追加すると、Gridの余白と順序が崩れることがあります。収益導線は最初から領域として置き、モバイルで本文を邪魔しない位置に移動できるようにします。

Claude Codeにレビューさせる観点

実装後は「見た目が良いか」ではなく、壊れ方を探します。Claude Codeには、変更したCSS、HTML、Astro/TSXコンポーネントを渡し、次の観点でレビューさせます。

観点	確認内容
レスポンシブ	360px、768px、1024px、1440pxで横スクロールがない
可読性	本文幅、カード幅、見出し、コードブロックが潰れない
CTA	研修、商品、問い合わせ導線がスマホでも押せる
アクセシビリティ	landmark、見出し階層、リンク文言が自然
保守性	GridとFlexboxの役割が混ざりすぎていない

このレビューはAdSense品質にも効きます。薄いコード断片だけの記事ではなく、実装の意図、失敗例、確認方法、内部リンク、公式リンク、CTAまで揃えると、読者が実際に試せる記事になります。

まとめ

CSS Gridは、grid-template-areasで骨格を読みやすくし、minmax()で最小幅を守り、auto-fitでカード数と画面幅の変化に対応すると実務で使いやすくなります。Claude Codeには、完成形だけでなく「壊れてほしくない条件」と「確認する画面幅」を渡してください。

自分のサイトや社内画面でこの設計を使うなら、教材・テンプレート一覧でCLAUDE.mdやレビュー用プロンプトを先に整えると手戻りが減ります。チームでClaude Codeの導入、CSS設計、レビュー運用、収益導線までまとめて整えたい場合は、Claude Code研修・導入相談で実リポジトリ前提の相談ができます。

この記事で紹介した内容を実際に試した結果、min-width: 0とauto-fit + minmax()を先に入れるだけで、記事カードとCTAの横はみ出しはかなり減りました。逆に、PC幅のスクリーンショットだけで判断したレイアウトは、広告枠や長い日本語見出しを入れた瞬間に崩れやすいです。Claude Codeには「生成」だけでなく「壊れる幅を探すレビュー」まで任せるのが、CSS Gridを実務で使う近道です。