テック技報最新号へ →
デザイン

余白のトークンはremかpxの二択にしない。%・cqi・コンテナクエリも使い分ける

余白のデザイントークンをremやpxの固定値だけで作ると、レスポンシブやコンテナクエリと合わない場面が出る。役割で単位を使い分け、レイアウトの責任範囲もはっきりさせる。

@tak_dcxi · 投稿 2026-02-23
#CSS#デザイントークン#余白#Tailwind#コンテナクエリ

どんな問題を解決するか / いつ使うか

デザイントークンやTailwindの余白設計を決めるとき。AIに書かせるCSSの方針を決めるとき。

やり方

  1. 部品の中の余白（ボタンのパディングなど）は rem/px のトークン。
  2. レイアウト上の余白（セクション間、カラムの間隔）は、% や cqi（コンテナの幅基準）、clamp() を使う。
  3. コンポーネントはメディアクエリではなくコンテナクエリで、置かれた場所の幅に合わせる。
  4. Tailwind を使う場合は、Tailwindに任せる範囲（デザイントークンと見た目のスタイル）と、構造・周囲との関係を書く範囲（スコープ付きCSSなど）を決めてチームで共有する。複数人で作業するなら技術をそろえ、ルールから外れた書き方が増えないようにする。
  5. 決めた方針はDESIGN.md／AGENTS.mdに書いてAIにも守らせる。

注意点・対応状況

  • @tak_dcxi はTailwindへの批判的な立場からの意見（グリッドやAnchor Positioningと相性が悪い、任意値が多くなる、など）。チームの方針に合わせて取り入れる。
  • 「Tailwindの作者も単位付きのスペーシング設計を後悔している」は投稿者の主張で、未確認。

出典

X の元の投稿を開く