サイズ・間隔の調整
サイズ・間隔の調整は、コンポーネントの大きさ（高さ・幅）やパディング・マージンをプロジェクトの要件に合わせて変更する設定。デフォルトのサイズが画面密度やデザインに合わないとき、統一的にサイズ感を変えたいときに使う。
size prop でバリアントを切り替えるのが基本パターン。グローバルなサイズスケールは Provider やテーマ設定で変更し、個別調整は sx prop や Tailwind クラスで行う。
主なバリエーション
- •サイズバリアント（xs / sm / md / lg / xl）
- •グローバルなサイズスケールの変更
- •個別コンポーネントのパディング・マージン調整
- •フォントサイズの連動
- •密度モード（compact / dense）の切り替え
- •レスポンシブなサイズ切り替え
ライブラリ横断比較
| 機能 | Mantine | Ant Design | shadcn/ui | MUI |
|---|---|---|---|---|
| サイズバリアント（xs〜xl等） | ○ size prop | ○ size prop | ○ size prop | ○ size prop |
| グローバルサイズスケール | ○ defaultProps | ○ ConfigProvider | △ Tailwind設定 | ○ spacing(n) |
| 個別パディング・マージン | ○ p/m/px等 prop | △ style prop | △ className | ○ sx prop |
| フォントサイズ連動 | ○ theme.fontSizes | ○ token.fontSize* | △ Tailwind | ○ typography.* |
| 密度モード（compact） | ○ compact prop | ○ componentSize | × | ○ size="small" |
| レスポンシブサイズ切り替え | △ useMediaQuery | △ useBreakpoint | ○ Tailwindクラス | ○ sx breakpoints |
○ = 対応 △ = 部分対応・制限あり × = 非対応
ライブラリ別コード例
各ライブラリでサイズ・間隔を調整する際の設定部分を抜粋しています。 動くデモは各比較ページでご確認ください。
Mantine
// size prop でサイズバリアントを指定
import { Button, TextInput } from '@mantine/core';
<Button size="xs">極小</Button>
<Button size="sm">小</Button>
<Button size="md">中（デフォルト）</Button>
<Button size="lg">大</Button>
<Button size="xl">極大</Button>
// MantineProvider でグローバルデフォルトを変更
import { MantineProvider, createTheme } from '@mantine/core';
const theme = createTheme({
defaultProps: {
Button: { size: 'sm' }, // 全 Button のデフォルトサイズ
TextInput: { size: 'sm' },
},
fontSizes: {
xs: '0.75rem',
sm: '0.875rem',
md: '1rem',
lg: '1.125rem',
},
spacing: {
xs: '0.5rem',
sm: '0.75rem',
md: '1rem',
lg: '1.5rem',
xl: '2rem',
},
});Ant Design
// size prop でサイズ指定
import { Button, Input, Space } from 'antd';
<Space>
<Button size="small">Small</Button>
<Button>Middle（デフォルト）</Button>
<Button size="large">Large</Button>
</Space>
// ConfigProvider でグローバルサイズとトークンを設定
import { ConfigProvider } from 'antd';
<ConfigProvider
componentSize="small" // 配下の全コンポーネントを small に
theme={{
token: {
fontSize: 14,
fontSizeSM: 12,
fontSizeLG: 16,
padding: 12,
paddingXS: 8,
paddingSM: 12,
paddingMD: 16,
paddingLG: 24,
},
}}
>
<App />
</ConfigProvider>shadcn/ui
// Button の size バリアント（cva ベース）
import { Button } from '@/components/ui/button';
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon">🔔</Button> {/* アイコンボタン用 */}
// tailwind.config.ts でスペーシングをカスタマイズ
export default {
theme: {
extend: {
spacing: {
'18': '4.5rem',
'88': '22rem',
},
},
},
};
// レスポンシブはTailwindクラスで切り替え
<Button className="h-8 px-3 text-xs md:h-10 md:px-4 md:text-sm">
レスポンシブボタン
</Button>MUI
// size prop でサイズ指定
import { Button, TextField } from '@mui/material';
<Button size="small">Small</Button>
<Button size="medium">Medium（デフォルト）</Button>
<Button size="large">Large</Button>
// createTheme でスペーシングスケールを変更
import { createTheme } from '@mui/material/styles';
const theme = createTheme({
spacing: 8, // デフォルト8px（spacing(1)=8px, spacing(2)=16px...）
components: {
MuiButton: {
styleOverrides: {
sizeSmall: { padding: '4px 10px' },
sizeMedium: { padding: '6px 16px' },
sizeLarge: { padding: '8px 22px' },
},
},
},
});
// sx prop でインラインスペーシング（テーマスケール参照）
import { Box } from '@mui/material';
<Box sx={{ p: 2, mt: 1, gap: 1.5 }}>
{/* p: 2 → theme.spacing(2) = 16px */}
</Box>まとめ・選び方のヒント
- •size prop で手軽に変えたい → Mantine・MUI・Ant Design（xs/sm/md/lg/xl バリアントを size prop で指定）
- •全体のサイズ感を統一して変えたい → MUI（
spacingスケール変更）・Ant Design（ConfigProvider componentSize）・Mantine（defaultPropsでグローバルデフォルト） - •レスポンシブに対応したい → shadcn/ui（Tailwind のブレークポイントクラスで柔軟に対応）・MUI（
sxの breakpoints オブジェクト） - •コンパクトモードに切り替えたい → Mantine（
compactprop）・Ant Design（componentSize="small"） - •インラインでスペーシングを指定したい → MUI（
sx={{ p: 2, mt: 1 }}）・Mantine（p/m/pxショートハンド prop）
Zenn