スペーシング
Figmaに定義済み
一貫したスペーシングを使用することで、視覚的なリズムと階層を作り出します。 4pxを基本単位として、8の倍数を中心にスペーシングを設定してください。
コード例
スペーシングの使用方法
Tailwind CSSのスペーシングユーティリティ
flex gap-4
Item 1
Item 2
Item 3
space-y-2
Row 1
Row 2
p-4 vs p-8
p-4
p-8
スペーシングスケール
4px
gap-1 / 最小単位、アイコンとテキストの間隔
8px
gap-2 / コンパクトな要素間
12px
gap-3 / 関連要素間
16px
gap-4 / 標準的な要素間
24px
gap-6 / セクション内の区切り
32px
gap-8 / セクション間
48px
gap-12 / 大きなセクション間
64px
gap-16 / ページセクション間
レイアウトグリッド
コンテンツの配置に使用するグリッドシステムです。
12カラムグリッド
1
2
3
4
5
6
7
8
9
10
11
12
コンテンツ幅の例
Full width (100%)
Max width: 896px (max-w-4xl)
Max width: 672px (max-w-2xl)
コンポーネント内のスペーシング
ボタン内パディング
カード内パディング
p-4 (16px)
コンパクトカード
p-6 (24px)
標準カード
p-8 (32px)
ゆったりカード
フォーム要素の間隔
フォーム要素間: space-y-4 (16px)