Claude CodeでFlexbox実装を安定させる実務パターン

Flexboxは一方向のUIを崩さないための道具

Flexboxは、CSSで要素を横方向または縦方向に並べ、余白、伸び縮み、折り返しを調整するためのレイアウト機能です。専門用語では「一次元レイアウト」と呼ばれます。初心者向けに言い換えると、ナビゲーション、ボタン列、カード一覧、検索フォーム、CTA帯のように、同じ行または同じ列に並ぶ部品を安定させる道具です。

Claude Codeに「いい感じに整えて」とだけ頼むと、Flexboxを使うべき場所、Gridに任せるべき場所、スマホ幅での折り返し、長い文字列、キーボード操作まで指定されません。結果として、デスクトップではきれいでも、360px幅で横スクロールが出たり、CTAボタンが潰れたり、カードのタイトルが親幅を押し広げたりします。

この記事では、Claude Codeへどう依頼するか、どのCSSをコピペすれば動くか、どこで検証するかを実務目線で整理します。対象は、Claude Codeを使い始めたばかりで「CSSは読めるが、レイアウトの失敗を先回りする自信はまだない」人です。より広いレスポンシブ設計はClaude Codeレスポンシブデザイン、見た目の統一はデザインシステム実装、読み上げやフォーカスはアクセシビリティ対応も合わせて確認してください。

公式情報はMDNのフレックスボックスの基本概念、flexプロパティ、gapプロパティ、仕様寄りの確認にはCSS Flexible Box Layout Module Level 1を参照します。Claude Codeの出力をレビューするときも、これらを基準にすると「なんとなく」ではなく説明できる判断になります。

flowchart LR
  A["作りたいUI"] --> B["Flex container"]
  B --> C["main axis: 主軸"]
  B --> D["cross axis: 交差軸"]
  C --> E["gap / flex / wrap"]
  D --> F["align-items / min-width"]
  E --> G["ナビ・カード・フォーム・CTA"]
  F --> G

最初に覚えるFlexbox用語

display: flexを指定した親要素をflex container、直下の子要素をflex itemと呼びます。主軸はアイテムが流れる方向で、flex-direction: rowなら横、columnなら縦です。交差軸はその反対方向です。justify-contentは主軸方向の並べ方、align-itemsは交差軸方向の揃え方を調整します。

gapはアイテム間の余白です。昔のCSSでは子要素にmargin-rightやmargin-bottomを付けていましたが、Flexboxでは親にgapを置くほうが読みやすく、折り返したときの余白も安定します。flex-wrap: wrapは、横幅が足りないときに次の行へ回す指定です。スマホで横スクロールを出したくないUIでは必ず候補に入ります。

初心者が混乱しやすいのはflexの一括指定です。flex: 1 1 220pxは、flex-grow: 1、flex-shrink: 1、flex-basis: 220pxをまとめた書き方です。平たく言えば「まず220pxを目安にし、余裕があれば伸び、足りなければ縮む」です。すべてにflex: 1を付けると便利そうに見えますが、ボタン、ロゴ、アイコンまで不自然に伸びることがあります。

もう一つ重要なのがmin-width: 0です。Flex itemは初期状態で中身より小さく縮みにくいため、長いタイトル、URL、メールアドレス、コード名を含むカードが親幅を押し広げることがあります。「Flexboxなのに横スクロールが消えない」ときは、かなり高い確率でこの指定を確認します。

Claude Codeに渡す依頼文

Claude Codeへの依頼では、見た目の希望より先に制約を渡します。対象ファイル、壊してはいけないCTA、ブレークポイント、折り返し、長文時の挙動、検証幅を明記すると、修正のやり直しが減ります。

既存のCSS命名に合わせて、Flexboxでレスポンシブなナビ、カード一覧、問い合わせフォーム、CTA帯を実装してください。
デスクトップは横並び、720px以下は必要な箇所だけ縦積みにしてください。
余白はgapで管理し、リンク群とCTA群は別のflex containerに分けてください。
長いタイトル、URL、メールアドレスがはみ出さないようにmin-width: 0とoverflow-wrapを入れてください。
HTMLとCSSはコピペで動く形にし、360px、720px、1024pxで横スクロールが出ないか確認してください。

ここで「必要な箇所だけ」と書くのが大切です。画面が狭いからといって、すべてを縦積みにすると、ヘッダーのロゴとCTAの距離が伸びすぎたり、カード一覧が間延びしたりします。Claude Codeには、どのグループが折り返してよいか、どの要素は縮めないかを伝えます。

Masaが実務で何度かやった失敗は、最初の依頼で「スマホ対応」としか書かなかったことです。その結果、Claude Codeは@mediaだけを追加し、長い日本語タイトルや英語URLの検証まではしてくれませんでした。いまは、依頼文に「長文」「最小幅」「横スクロール」「CTAを維持」を必ず入れています。

ユースケース1: レスポンシブナビゲーション

ナビゲーションはFlexboxの代表的なユースケースです。ロゴ、リンク、CTAを同じ行に置き、狭い画面ではリンクだけ折り返します。ここで全体にjustify-content: space-betweenを1回だけ指定すると、リンク数が増えた瞬間に余白が不自然になります。ロゴ、リンク群、CTAを分け、リンク群だけを小さなFlex containerにするほうが安全です。

実務サイトでは、ナビの右端に無料相談、資料請求、ログイン、購入導線などが置かれます。このCTAが小さくなったり、2行に割れたり、画面外へ出たりすると、見た目の問題だけでなく収益導線の問題になります。ClaudeCodeLabでも、学習導線はClaude Code教材へ、導入相談はClaude Code研修・相談へつなげるため、CTAの表示は最後まで確認します。

ナビのレビューでは、まずロゴが縮んでいないか、次にリンクが自然に折り返すか、最後にCTAが押しやすい高さを保っているかを見ます。white-space: nowrapをCTAだけに使うのは有効ですが、リンク全体に入れるとスマホ幅で横スクロールの原因になります。

ユースケース2: カード一覧

記事一覧、料金プラン、機能紹介、導入事例のカードは、2枚から4枚程度ならFlexboxで十分扱えます。flex: 1 1 220pxを使うと、カードは220pxを基準に並び、余裕があれば伸び、足りなければ折り返します。列数を厳密に制御したい商品グリッドならCSS Gridを選びますが、横一列と折り返しを自然に作りたいだけならFlexboxのほうが読みやすいです。

カードで特に危ないのは、タイトル、タグ、URL、価格ラベルの長さです。日本語だけなら折り返せても、英語の長いサービス名、claude-code-flexbox-patternsのようなスラッグ、メールアドレスが入ると、カードの中身が縮まず親幅を押し広げます。カード本体にmin-width: 0、テキストにoverflow-wrap: anywhereを入れておくと、Claude Codeの初回実装でも崩れにくくなります。

もう一つの判断基準は、カードの高さをそろえるかどうかです。Flexboxは横方向の分配が得意ですが、複数行に折り返したカードの高さを完全にそろえる目的には向きません。高さまで厳密に揃えたい場合は、カード内部をFlexboxで縦方向に組み、ボタンにmargin-top: autoを使うと実務では十分きれいに見えます。

ユースケース3: フォームと検索バー

フォームもFlexboxのユースケースです。ラベル、入力欄、送信ボタンを横に並べ、スマホでは縦に積みます。メルマガ登録、問い合わせ、検索、クーポン入力のように、短いフォームほどレイアウトの乱れが目立ちます。ボタンが潰れると押しにくくなり、入力欄が狭すぎるとユーザーはメールアドレスを確認できません。

フォームでは、inputにflex: 1 1 16remを与え、buttonはflex: 0 0 autoにします。つまり入力欄は伸び縮みしてよいが、ボタンは内容幅を保つ、という設計です。さらにmin-width: 12remを入力欄へ入れておくと、極端に狭い幅では自然に折り返しやすくなります。

Claude Codeへは、見た目だけでなくHTMLの関連付けも依頼します。labelのforとinputのidを一致させる、type="email"やrequiredを使う、フォーカスリングを消さない、Enter送信が動く、という点です。Flexboxは見た目の機能ですが、実務のフォームはアクセシビリティと検証を同時に扱う必要があります。

ユースケース4: CTA帯とフッター導線

記事末尾のCTA帯もFlexboxが向いています。左側に短い説明、右側にボタンを置き、狭い幅では縦に積みます。ここで重要なのは、ボタンを2つ並べる場合に優先順位を見た目で示すことです。たとえば、すぐ使える教材はClaude Code教材へ、チーム導入やレビュー体制の相談は研修・相談へ分けると、読者は次の行動を選びやすくなります。

CTA帯でありがちな失敗は、文章、価格、ボタン、注記をすべて中央寄せにしてしまうことです。短いキャンペーンページなら成立しますが、技術記事の末尾では読み終えた直後に判断できる構造のほうが自然です。説明文は左、操作は右、スマホでは説明からボタンへ縦に読む、という順番を守ると安定します。

コピペで動くHTML

次のHTMLは、ナビ、カード、フォーム、CTA帯を1ページで確認できる最小構成です。CSSは次のセクションのコードをstyles.cssへ置くか、HTMLの<style>タグへ貼り付けてください。リンク先はこのサイトの実在する導線に合わせています。

<main class="flex-demo">
  <nav class="site-nav" aria-label="Primary">
    <a class="site-nav__brand" href="/">ClaudeCodeLab</a>
    <div class="site-nav__links">
      <a href="/blog/claude-code-responsive-design/">Responsive</a>
      <a href="/blog/claude-code-design-system/">Design System</a>
      <a href="/blog/claude-code-accessibility/">Accessibility</a>
    </div>
    <a class="site-nav__cta" href="/training/">相談する</a>
  </nav>

  <section class="intro-panel">
    <p class="eyebrow">Flexbox pattern</p>
    <h1>崩れにくいUIをClaude Codeで作る</h1>
    <p>
      ナビゲーション、カード一覧、フォーム、CTAを同じFlexbox設計で扱い、
      スマホ幅でも読みやすいレイアウトにします。
    </p>
  </section>

  <section class="card-row" aria-label="Use cases">
    <article class="feature-card">
      <h2>Navigation</h2>
      <p>ロゴ、リンク、CTAを横並びにし、狭い幅ではリンクだけ自然に折り返します。</p>
      <a href="/blog/claude-code-responsive-design/">詳しく読む</a>
    </article>
    <article class="feature-card">
      <h2>Cards</h2>
      <p>記事、料金、機能のカードを均等幅に近づけながら、長文も折り返します。</p>
      <a href="/products/">教材を見る</a>
    </article>
    <article class="feature-card">
      <h2>Forms</h2>
      <p>入力欄とボタンを横並びにし、スマホでは縦に積んで押しやすくします。</p>
      <a href="/training/">実装相談へ</a>
    </article>
  </section>

  <form class="signup-form" action="/thanks/" method="post">
    <label for="email">無料チェックリストを受け取る</label>
    <input id="email" name="email" type="email" placeholder="you@example.com" required />
    <button type="submit">ダウンロード</button>
  </form>

  <aside class="cta-band">
    <div>
      <p class="eyebrow">Next action</p>
      <h2>Claude CodeのUI実装を型にする</h2>
      <p>コピペできる型は教材で増やし、チーム導入やレビュー設計は相談で整理できます。</p>
    </div>
    <div class="cta-band__actions">
      <a href="/products/">教材を見る</a>
      <a href="/training/">相談する</a>
    </div>
  </aside>
</main>

コピペで動くCSS

box-sizing、gap、flex-wrap、min-width: 0、overflow-wrapを最初から入れます。特別なライブラリは不要で、HTMLファイルとCSSファイルだけで動きます。

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #172026;
  background: #f6f8fb;
}

a {
  color: inherit;
  text-decoration: none;
}

.flex-demo {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 24px 0 48px;
}

.site-nav,
.site-nav__links,
.card-row,
.signup-form,
.cta-band,
.cta-band__actions {
  display: flex;
  gap: 16px;
}

.site-nav {
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 14px 0;
}

.site-nav__brand {
  flex: 0 0 auto;
  font-weight: 800;
}

.site-nav__links {
  flex: 1 1 420px;
  justify-content: center;
  flex-wrap: wrap;
  min-width: 0;
}

.site-nav__links a,
.site-nav__cta,
.feature-card a,
.signup-form button,
.cta-band__actions a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 0 14px;
}

.site-nav__cta,
.signup-form button,
.cta-band__actions a:first-child {
  flex: 0 0 auto;
  color: #fff;
  background: #0f766e;
  font-weight: 700;
}

.intro-panel,
.feature-card,
.cta-band {
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  background: #fff;
}

.intro-panel {
  padding: 32px;
  margin: 18px 0;
}

.eyebrow {
  margin: 0 0 8px;
  color: #0f766e;
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

.intro-panel h1,
.cta-band h2 {
  margin: 0 0 12px;
}

.intro-panel p,
.feature-card p,
.cta-band p {
  overflow-wrap: anywhere;
}

.card-row {
  flex-wrap: wrap;
  margin: 18px 0;
}

.feature-card {
  flex: 1 1 220px;
  min-width: 0;
  padding: 20px;
}

.feature-card h2 {
  margin-top: 0;
}

.feature-card a {
  width: fit-content;
  margin-top: 8px;
  border: 1px solid #0f766e;
  color: #0f766e;
  font-weight: 700;
}

.signup-form {
  align-items: end;
  flex-wrap: wrap;
  margin: 20px 0;
  padding: 20px;
  border-radius: 8px;
  background: #e8f5f3;
}

.signup-form label {
  flex: 1 1 180px;
  font-weight: 700;
}

.signup-form input {
  flex: 1 1 16rem;
  min-width: 12rem;
  min-height: 44px;
  border: 1px solid #9fb3c8;
  border-radius: 8px;
  padding: 0 12px;
}

.signup-form button {
  border: 0;
  cursor: pointer;
}

.cta-band {
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 24px;
}

.cta-band > div:first-child {
  flex: 1 1 360px;
  min-width: 0;
}

.cta-band__actions {
  flex: 0 1 320px;
  flex-wrap: wrap;
}

.cta-band__actions a {
  flex: 1 1 140px;
  border: 1px solid #0f766e;
  font-weight: 700;
}

@media (max-width: 720px) {
  .site-nav,
  .signup-form,
  .cta-band {
    align-items: stretch;
  }

  .site-nav__links {
    justify-content: flex-start;
  }

  .site-nav__cta,
  .signup-form button {
    width: 100%;
  }
}

よくある落とし穴と直し方

一つ目の落とし穴は、flex: 1を何にでも付けることです。カードや入力欄には便利ですが、ロゴ、短いボタン、アイコンに付けると不自然に伸びます。伸びてよい要素にはflex: 1 1 220px、内容幅を保つ要素にはflex: 0 0 autoのように役割を分けます。

二つ目は、min-width: 0を忘れることです。カードのタイトル、検索語、URL、メールアドレスが長いと、親の幅を超えて横スクロールになります。Claude CodeがCSSを出したら、長い文字列を仮データへ入れて検証してください。実データが短い状態だけでOKを出すと、公開後に崩れます。

三つ目は、余白を子要素のmarginでばらばらに管理することです。折り返しが起きると、右端や最終行に余白が残り、見た目が揃いません。Flexboxでは親にgapを指定し、例外的な余白だけを個別指定にします。

四つ目は、視覚的な順番をorderで大きく変えることです。見た目ではCTAが先でも、キーボードやスクリーンリーダーの読み順はHTMLの順番に従います。どうしてもorderを使う場合は、Tabキーで自然に操作できるか確認します。

レビューと検証チェックリスト

Claude Codeの実装を受け取ったら、まずコードの構文を見ます。HTMLタグが閉じているか、CSSの波括弧が対応しているか、同じクラス名をHTMLとCSSで使っているかを確認します。次に、ブラウザで360px、720px、1024pxを確認します。横スクロール、ボタンの潰れ、カード本文のはみ出し、フォームのラベル欠落を見ます。

レビューの観点は次の表にまとめられます。

観点	確認すること	失敗したときの修正
ナビ	ロゴ、リンク、CTAが狭い幅で見えるか	リンク群だけflex-wrapし、CTAはflex: 0 0 autoにする
カード	長いタイトルが親幅を押し広げないか	カードにmin-width: 0、文字にoverflow-wrapを入れる
フォーム	入力欄とボタンが押しやすいか	入力欄は伸縮、ボタンは内容幅、狭い幅で縦積みにする
CTA	/products/と/training/への導線が見えるか	CTA帯をFlexboxで分け、ボタンを折り返せるようにする

最後に、Claude Codeへ「このCSSで不要な指定、アクセシビリティ上の懸念、モバイル幅のリスクをレビューして」と再依頼します。実装エージェントとレビューステップを分けると、同じ思い込みで通過するリスクが減ります。

実際に試した結果

この記事のサンプルをローカルHTMLに貼り、360px、720px、1024px相当の幅で確認したところ、カードは3列から2列、1列へ自然に折り返し、フォームの入力欄とボタンも横スクロールなしで表示できました。以前Masaが失敗した「長い記事タイトルがカードを押し広げる」ケースは、min-width: 0とoverflow-wrap: anywhereで再現後に解消できました。公開用の記事では、CSSの正しさだけでなく、CTAが読者の次の行動につながるかも重要です。コピペできる型を増やしたい場合は教材一覧を、チームのUI実装ルールを整えたい場合は研修・相談を確認してください。