スペーシングスケールジェネレーター
この余白スケール作成ツールは、4・5・6・8 px の基本単位から 12・16・20 段階の余白システムを作り、px または rem の CSS カスタムプロパティとして書き出します。
このツールについて
この余白スケール作成ツールは、4・5・6・8 px の基本単位から 12・16・20 段階の余白システムを作り、px または rem の CSS カスタムプロパティとして書き出します。
使い方
- 4 px や 8 px などの基本単位を選びます。
- 出力を px か rem から選びます。
- 必要な段階数を選びます。
- 「CSS 変数をコピー」をクリックし、スケールをスタイルシートに追加します。
知っておきたいこと
- Tailwind CSS の余白は 4 px（0.25 rem）単位に基づいています。
- Material Design は 8 dp グリッドを使い、細かな調整には 4 dp を使います。
- 0.5、1、1.5、2、3、4、6、8 のような倍数で、ほとんどの余白のニーズをカバーできます。
- ここでの rem の値は、ルートのフォントサイズを 16 px として計算しています。
- 決まったスケールを使うと場当たり的なピクセル値がなくなり、レイアウトの見た目に一貫性が生まれます。
すべてブラウザ内で動作します。入力した内容がアップロード・保存されることはありません。
よくある質問
余白は 4px と 8px のどちらのシステムを使うべきですか？
レイアウトには 8 px が一般的な初期値で、4 px は情報量の多いインターフェースや小さなコンポーネントでより細かく調整できます。多くのチームは 8 px のリズムの中で 4 px 刻みを使っています。
デザインシステムにおける余白スケールとは？
マージン、パディング、gap に使う、あらかじめ決めた余白の値のセットです。これにより、どの画面でも同じ刻みが使われます。
スケールを CSS で使うには？
変数をコピーし、padding: var(--space-4); のように使えば、コンポーネント間で余白を一貫させられます。
これは Tailwind の余白と同じですか？
基本単位を 4 px、出力を rem にすると、Tailwind の標準の余白スケールと同じ倍数になります。