CSSスペーシングスケールのrem変換（4pxから64px）

remでスペーシングスケールを構築する

一貫したスペーシングスケールはあらゆるデザインシステムの基盤です。ピクセルベースのスケールをremに変換すると、ユーザーの好みに適応します。

4pxベースグリッド（Tailwindスタイル）

px	rem	Tailwindクラス	用途
0	0	p-0	リセット
1	0.0625	p-px	ヘアラインボーダー
2	0.125	p-0.5	タイトなインラインスペーシング
4	0.25	p-1	アイコンとテキストの間隔
8	0.5	p-2	コンパクトなパディング
12	0.75	p-3	小さいカードパディング
16	1	p-4	標準パディング
20	1.25	p-5	ミディアムパディング
24	1.5	p-6	大きいカードパディング
32	2	p-8	セクションスペーシング
40	2.5	p-10	大きなセクションスペーシング
48	3	p-12	ページセクションギャップ
64	4	p-16	主要レイアウトスペーシング

8pxベースグリッド（Material Design）

Material Designは8pxを基本的なスペーシング単位として使用しています：

1ユニット =  8px = 0.5rem
2ユニット = 16px = 1rem
3ユニット = 24px = 1.5rem
4ユニット = 32px = 2rem
6ユニット = 48px = 3rem
8ユニット = 64px = 4rem

なぜスペーシングにremを使うのか

タイポグラフィだけでなくスペーシングにもremを使用すると、ユーザーがブラウザのフォントサイズを増加させた際にレイアウト全体が比例的にスケーリングされます。テキストがコンテナからはみ出さず、パディングが窮屈にならず、視覚的なリズムが維持されます。

CSSカスタムプロパティパターン

:root {
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */
}

このパターンにより、remからpxへのマッピングを一か所に保持しながら、CSS全体でスペーシング値を参照できます。