カテゴリー: 開発ツール
フルイドスペーシングスケール ジェネレーター
clamp() ベースのスペーシングトークン一式を作成
狭いビューポートと広いビューポートでの基準スペーシングサイズ、そしてスケール比率を指定すると、それぞれが独立した clamp() として2つの幅の間をなめらかに変化する --space-* カスタムプロパティ一式が得られます。そのまま :root に貼り付けられます。
| トークン | 出力 |
|---|---|
| --space-3xs | clamp(0.0988rem, 0.0601rem + 0.1718vw, 0.1975rem) |
| --space-2xs | clamp(0.1481rem, 0.0902rem + 0.2576vw, 0.2963rem) |
| --space-xs | clamp(0.2222rem, 0.1353rem + 0.3865vw, 0.4444rem) |
| --space-sm | clamp(0.3333rem, 0.2029rem + 0.5797vw, 0.6667rem) |
| --space-md | clamp(0.5rem, 0.3043rem + 0.8696vw, 1rem) |
| --space-lg | clamp(0.75rem, 0.4565rem + 1.3043vw, 1.5rem) |
| --space-xl | clamp(1.125rem, 0.6848rem + 1.9565vw, 2.25rem) |
| --space-2xl | clamp(1.6875rem, 1.0272rem + 2.9348vw, 3.375rem) |
| --space-3xl | clamp(2.5313rem, 1.5408rem + 4.4022vw, 5.0625rem) |
出力
:root {
--space-3xs: clamp(0.0988rem, 0.0601rem + 0.1718vw, 0.1975rem);
--space-2xs: clamp(0.1481rem, 0.0902rem + 0.2576vw, 0.2963rem);
--space-xs: clamp(0.2222rem, 0.1353rem + 0.3865vw, 0.4444rem);
--space-sm: clamp(0.3333rem, 0.2029rem + 0.5797vw, 0.6667rem);
--space-md: clamp(0.5rem, 0.3043rem + 0.8696vw, 1rem);
--space-lg: clamp(0.75rem, 0.4565rem + 1.3043vw, 1.5rem);
--space-xl: clamp(1.125rem, 0.6848rem + 1.9565vw, 2.25rem);
--space-2xl: clamp(1.6875rem, 1.0272rem + 2.9348vw, 3.375rem);
--space-3xl: clamp(2.5313rem, 1.5408rem + 4.4022vw, 5.0625rem);
}各トークンはそれぞれ独立した clamp() なので、すべてのステップが2つのビューポート幅の間でなめらかに変化します。
このページの処理はすべてブラウザ内で行われます。アップロードは一切ありません。
このツールでできること
単一のフルイドな clamp() は1つの値には便利ですが、たいていのレイアウトには一貫したスペーシングステップのスケール全体が必要で、それぞれの clamp() を手で書くと同じ計算ミスがトークンの数だけ増えてしまいます。このツールはビューポート範囲の両端での基準サイズと比率を1組受け取り、タイプスケールを組み立てるのと同じ方法で、中央のステップを軸にした対称なトークンのスケールを生成します。これによりビューポートが変化してもスケール全体の比例関係が保たれます。
使い方
- 狭いビューポート幅と広いビューポート幅での基準スペーシングサイズを設定します。
- ステップ間のスケール比率を設定します。
- 生成された --space-* カスタムプロパティの :root ブロックをコピーします。
プライバシー
このツールはすべてブラウザ内で動作します。入力した内容がアップロード・保存・共有されることはなく、タブを閉じれば消えます。
よくある質問
- なぜ9段階なのですか?
- 9段階にすると中央値の上下に4段階ずつ確保でき、後から名前を追加で考える必要なく、細かいインラインの余白から大きなセクション間の余白までたいていのレイアウトをカバーできます。
- サーバーに何か送信されますか?
- いいえ。すべての clamp() は入力した数値からページ内で計算されるため、表と CSS 出力が即座に更新されます。
- CSS clamp ジェネレーターと併用できますか?
- できます。このツールは1組の入力からスケール全体を組み立てるもので、CSS clamp ジェネレーターは見出しサイズのような単発の値のためのものです。どちらも同じ計算方法を使っています。