ホーム/基盤//スペーシング Spacing

Spacing

8px ベースユニットのスペーシングスケール。一貫した余白で視覚的なリズムと階層を作る。

Scale

Token	px	rem	Tailwind
space.0	0	0	0
space.025	2	0.125rem	0.5
space.050	4	0.25rem	1
space.075	6	0.375rem	1.5
space.100	8	0.5rem	2
space.150	12	0.75rem	3
space.200	16	1rem	4
space.250	20	1.25rem	5
space.300	24	1.5rem	6
space.400	32	2rem	8
space.500	40	2.5rem	10
space.600	48	3rem	12
space.800	64	4rem	16
space.1000	80	5rem	20

Small0–8px

コンポーネント内部のスペーシング

Medium12–24px

コンポーネント間のスペーシング

Large32–80px

ページレベルのレイアウトスペーシング

一貫した余白は要素間の意味的なまとまりを生む。同じ種類の要素には同じスペーシングを使う。

関連する要素は近くに配置し、距離で関係性を表現する。距離が近い＝関係が強い。

余白のサイズで視覚的な重要度を示す。大きな余白は大きなセクション区切りを意味する。

一貫性と変化のバランスで自然なリズムを作る。機械的な均等配置を避け、意図のある余白設計を行う。

/* padding */

p-2 /* 8px */

px-4 py-3 /* 16px / 12px */

/* margin */

mt-6 /* 24px */

mb-8 /* 32px */

/* gap */

gap-2 /* 8px */

gap-4 /* 16px */