| Variable | Preview | Light Mode | Dark Mode | Description |
|---|---|---|---|---|
--color-primary |
#31a9c7 | #60a5fa | プライマリカラー | |
--color-secondary |
#5865a7 | #a78bfa | セカンダリカラー | |
--color-success |
#00a859 | #22c55e | 成功色 | |
--color-danger |
#e1323c | #ef4444 | 危険・エラー色 | |
--color-warning |
#ebbb0c | #fbbf24 | 警告色 | |
--color-info |
#1ec2c2 | #22d3ee | 情報色 | |
--color-text |
#4c5059 | #e4e4e7 | メインテキスト色 | |
--color-bg |
#f9f9f9 | #0f0f0f | 背景色 | |
--color-box |
#ffffff | #18181b | ボックス・カード背景 | |
--color-border |
rgba(0,0,0,0.2) | rgba(255,255,255,0.1) | ボーダー色 |
| Variable | Value | Pixels | Usage Example |
|---|---|---|---|
--spacing-1 | 0.25rem | 4px | .m-1, .p-1 |
--spacing-2 | 0.5rem | 8px | .m-2, .p-2 |
--spacing-3 | 0.75rem | 12px | .m-3, .p-3 |
--spacing-4 | 1rem | 16px | .m-4, .p-4 |
--spacing-5 | 1.25rem | 20px | .m-5, .p-5 |
--spacing-6 | 1.5rem | 24px | .m-6, .p-6 |
--spacing-8 | 2rem | 32px | .m-8, .p-8 |
--spacing-10 | 2.5rem | 40px | .m-10, .p-10 |
--spacing-12 | 3rem | 48px | .m-12, .p-12 |
| Variable | Value | Pixels (16px base) |
|---|---|---|
--font-size-xs | 0.75rem | 12px |
--font-size-sm | 0.875rem | 14px |
--font-size-base | 1rem | 16px |
--font-size-lg | 1.125rem | 18px |
--font-size-xl | 1.25rem | 20px |
--font-size-2xl | 1.5rem | 24px |
--font-size-3xl | 1.875rem | 30px |
--font-size-4xl | 2.25rem | 36px |
| Variable | Value | Description |
|---|---|---|
--border-radius | 0.375rem | 基本ボーダー半径 |
--box-shadow | 0.1rem 0.2rem 1rem rgba(0,0,0,0.08) | 基本シャドウ |
| Class | CSS | Description |
|---|---|---|
.m-{n} | margin: var(--spacing-{n}) | 全方向マージン (1-12) |
.mt-{n} | margin-top: var(--spacing-{n}) | 上マージン |
.mr-{n} | margin-right: var(--spacing-{n}) | 右マージン |
.mb-{n} | margin-bottom: var(--spacing-{n}) | 下マージン |
.ml-{n} | margin-left: var(--spacing-{n}) | 左マージン |
.mx-{n} | margin-left/right: var(--spacing-{n}) | 水平マージン |
.my-{n} | margin-top/bottom: var(--spacing-{n}) | 垂直マージン |
.mx-auto | margin-left: auto; margin-right: auto | 中央配置 |
| Class | CSS | Description |
|---|---|---|
.p-{n} | padding: var(--spacing-{n}) | 全方向パディング (1-12) |
.pt-{n} | padding-top: var(--spacing-{n}) | 上パディング |
.pr-{n} | padding-right: var(--spacing-{n}) | 右パディング |
.pb-{n} | padding-bottom: var(--spacing-{n}) | 下パディング |
.pl-{n} | padding-left: var(--spacing-{n}) | 左パディング |
.px-{n} | padding-left/right: var(--spacing-{n}) | 水平パディング |
.py-{n} | padding-top/bottom: var(--spacing-{n}) | 垂直パディング |
| Class | CSS |
|---|---|
.d-none | display: none |
.d-block | display: block |
.d-inline | display: inline |
.d-inline-block | display: inline-block |
.d-flex | display: flex |
.d-inline-flex | display: inline-flex |
.d-grid | display: grid |
| Class | CSS | Description |
|---|---|---|
.flex-row | flex-direction: row | 横並び |
.flex-column | flex-direction: column | 縦並び |
.justify-start | justify-content: flex-start | 開始位置 |
.justify-center | justify-content: center | 中央 |
.justify-end | justify-content: flex-end | 終了位置 |
.justify-between | justify-content: space-between | 両端揃え |
.align-start | align-items: flex-start | 開始位置 |
.align-center | align-items: center | 中央 |
.align-end | align-items: flex-end | 終了位置 |
| Class | CSS | Description |
|---|---|---|
.grid | display: grid | グリッド表示 |
.grid-cols-{n} | grid-template-columns: repeat({n}, 1fr) | 列数 (1-12) |
.gap-{n} | gap: var(--spacing-{n}) | グリッド間隔 |
.col-span-{n} | grid-column: span {n} | 列の跨ぎ (1-12) |
| Class | Description | Example |
|---|---|---|
.btn | 基本ボタン | |
.btn-primary | プライマリ | |
.btn-secondary | セカンダリ | |
.btn-success | 成功 | |
.btn-danger | 危険 | |
.btn-sm | 小サイズ | |
.btn-lg | 大サイズ |
| Class | Description | Example |
|---|---|---|
.alert | 基本アラート | Alert |
.alert-primary | プライマリ | Primary |
.alert-success | 成功 | Success |
.alert-danger | エラー | Danger |
.alert-dismissible | 閉じるボタン付き | - |
| Class | Description | Example |
|---|---|---|
.badge | 基本バッジ | Badge |
.badge-primary | プライマリ | Primary |
.badge-success | 成功 | Success |
.badge-pill | ピル型 | Pill |
.badge-dot | ドット |
| Class | Description |
|---|---|
.card | 基本カード |
.card-header | カードヘッダー |
.card-body | カード本体 |
.card-footer | カードフッター |