デザイン余白スケール計算機
基準の余白、比率、開始ステップ、トークン数を設定して階段状のスケールを作ります。
値を設定して余白スケールを生成します。
余白トークン
基準値 × 比率^ステップを丸めます。
使い方
使い方
- 正の基準値と px または rem、1 より大きい比率を入力します。
- 開始ステップとトークン数を選びます。
- 丸めた値を確認して CSS カスタムプロパティをコピーまたはダウンロードします。
幾何学的なトークン階段
各トークンは基準値 × 比率^ステップです。ステップ 0 は基準値を含みます。
明確な丸め方
px は最近傍の整数、rem は小数第 4 位までを残します。CSS コメントに元の式を記載します。
ローカル CSS 出力
計算はブラウザー内で行い、値やプロジェクトファイルを送信しません。
よくある質問
あわせて知りたいこと
なぜ px を丸めますか？
整数ピクセルは多くのトークンセットで扱いやすいためです。
開始ステップとは？
0 は基準値、1 は基準値 × 比率です。負のステップでは小さい値になります。
最適なデザインシステムを決めますか？
いいえ。予測可能な数学スケールを作るだけです。