Zenn
🍃

ブラウザのフォントサイズ拡大をしてもレイアウトが崩れにくいTailwind CSS spacing設計の工夫

に公開
CSS
Tailwind CSS
tech

Tailwind CSS はデフォルトで rem 単位を spacing（padding, margin, gap, width など）に使っています。これはレスポンシブや拡大対応の観点で便利ですが、ユーザーがブラウザで「フォントサイズを拡大」したとき、意図せずレイアウト全体が膨らんでしまい、結果的にコンテンツの理解を妨げるようなレイアウト崩れが発生する場合があります。

今回はその問題に対処するための calc(rem + px) を活用した spacing 設計の工夫を紹介します。

なぜ問題になるのか？

Tailwind CSS の spacing は基本的に rem 単位。たとえば以下のようなユーティリティが使われています。

.w-40 {
  width: 10rem; /* 通常 160px */
}

しかし、ユーザーがブラウザ設定でフォントサイズを "200%" に拡大した場合、1rem = 32px となり、

width: 320px;

と、本来の2倍の幅になります。これにより、文字サイズに合わせて spacing や layout が意図せず拡大してしまうのです。

解決策：calc(rem + px) のハイブリッド spacing

この問題を緩和するため、spacing を rem だけに頼らず、固定値（px）を加えることで拡大率を抑える方法が有効です。

:root {
  --spacing: calc(0.0625rem + 3px);  // 16px / 0.0625 = 1px
}

ここで定義した --spacing: calc(0.0625rem + 3px); は、通常（1rem = 16px）では 4px です。
式のうち 0.0625rem はユーザーのフォントサイズ設定に応じて伸び縮みする可変成分、+ 3px は常に固定される不変成分なので、フォントを 2倍に拡大しても合計は 5px にとどまり、余白の拡大率を大幅に抑えられます。

下記は Tailwind CSS 標準の .w-4 と、ハイブリッド spacing 版 .w-4 を比較したときの実寸です。

拡大倍率 Tailwind 標準 .w-4(--spacing: .25rem) ハイブリッド .w-4(--spacing: calc(0.0625rem + 3px))
100% (1rem = 16px) 16 px 16 px
200% (1rem = 32px) 32 px 20 px

標準では余白や幅も文字と同じく2倍になりますが、ハイブリッド spacing では 16px → 20px と“膨らみすぎ”を抑え、レイアウトの破綻を防げます。

Tailwind CSS v4 の --spacing 変数はどう機能するのか？

Tailwind CSS v4 では、デザイントークンがすべて CSS カスタムプロパティ（変数）として公開 され、その中心に --spacing が置かれています。
公式ブログのリリースノートにもあるとおり、px-*, mt-*, w-*, h-* などのユーティリティはすべて calc(var(--spacing) * N) という形で生成されます。

@layer theme {
  :root {
    --spacing: 0.25rem;
  }
}
@layer utilities {
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .w-17 {
    width: calc(var(--spacing) * 17);
  }
}

--spacing の値を一カ所で更新すれば、全ユーティリティが連動してスケールする。これがハイブリッド spacing が機能する鍵です。

この仕組みを利用し、--spacing: calc(0.0625rem + 3px); と上書きすると、

  • rem 部分だけユーザー設定で拡大
  • 固定の 3px 部分は変わらない

という 可変＋固定のハイブリッド になり、結果として拡大率を抑制できます。

デモ例

以下の HTML コードでは、ボタンを押して html に .large クラスを付けると、フォントサイズが 200% に拡大されます。

まとめ

アクセシビリティのためにフォントサイズを拡大するのは重要ですが、それによって UI の余白や幅が極端に拡大してしまうと、コンテンツの理解を妨げるレイアウト崩れが起こるリスクがあります。

rem + px のハイブリッド spacing は、拡大率を抑制しつつ自然なスケーリングを保つ有効なテクニックです。

Tailwind CSS を使っているプロジェクトで拡大対応を考慮する際には、ぜひこの方法を検討してみてください。

※そもそも、spacingはremではなくpxに固定しても問題ないのではと思ったりもする。

Discussion