Spacing Calculator

使い方

1. 基準サイズ（2〜32 px）を入力します。これがスケールの最小段です。
2. 比率を選びます：1（リニア）から 2 まで。1.5 なら 1 段上がるたびに 1.5 倍になります。
3. 段数（4〜10）を入力します。段名は 3xs・2xs・xs・sm・md・lg・xl・2xl・3xl・4xl で、小さい順です。
4. 出力単位を選びます：rem（rem 基準で割る、既定は 16）または px。
5. 表を確認します。各段に px 値・rem 値と、相対サイズを示すバーが表示されます。
6. 出力カードから :root のカスタムプロパティをコピーします。

こんなときに

• デザイントークンファイル: コンポーネントを作る前に --space-* 変数を生成する。
• 余白の整理: 行き当たりばったりの値を、短い名前のスケールに置き換える。
• レスポンシブレイアウト: 段数を絞れば、ルートフォントサイズが大きくても使いやすい。
• タイポグラフィと間隔の連動: 字号スケールと同じ比率を間隔にも使う。
• モジュラースケールの教材: 1 つの比率から段階がどう生まれるかを示せる。

プライバシーについて

スケールはこのページ内の算術です。基準サイズ・比率・1 回の除算だけ。データの送信はなく、オフラインでも動作します。

FAQ

Q: 各段の計算式は？ A: n 段目は基準サイズに比率の n 乗を掛けた値で、最小段は n = 0 から始まります。基準 4・比率 1.5 なら最初の数段は 4・6・9・13.5・20.25 px で、小数第 2 位まで表示します。

Q: rem 換算の仕組みは？ A: 各 px 値を rem 基準（既定 16）で割ります。ルートのフォントサイズが違う場合は rem 基準の欄を変更すると、すべての rem 値が更新されます。

Q: 小数が付く値があるのは？ A: 比率は小数ピクセルを生じます。これは間隔トークンでは一般的です。px は小数第 2 位、rem は小数第 3 位まで保持します。整数ピクセルが必要な場合は手で丸めてください。

Q: CSS のコメントと出力単位が違うのは？ A: 各変数の横のコメントは常に px 値です。出力単位が rem でも実寸をすぐ読めます。