---
title: サイズ
description: "横幅や縦幅などに使用するトークンのリスト。"
---

## 使い方

```tsx
<Box w="md" />
```

```tsx
<Box h="md" />
```

## トークン

| Token | Value        |
| ----- | ------------ |
| `1`   | `"0.25rem"`  |
| `2`   | `"0.5rem"`   |
| `3`   | `"0.75rem"`  |
| `4`   | `"1rem"`     |
| `5`   | `"1.25rem"`  |
| `6`   | `"1.5rem"`   |
| `7`   | `"1.75rem"`  |
| `8`   | `"2rem"`     |
| `9`   | `"2.25rem"`  |
| `10`  | `"2.5rem"`   |
| `11`  | `"2.75rem"`  |
| `12`  | `"3rem"`     |
| `13`  | `"3.25rem"`  |
| `14`  | `"3.5rem"`   |
| `15`  | `"3.75rem"`  |
| `16`  | `"4rem"`     |
| `20`  | `"5rem"`     |
| `24`  | `"6rem"`     |
| `28`  | `"7rem"`     |
| `32`  | `"8rem"`     |
| `36`  | `"9rem"`     |
| `40`  | `"10rem"`    |
| `44`  | `"11rem"`    |
| `48`  | `"12rem"`    |
| `52`  | `"13rem"`    |
| `56`  | `"14rem"`    |
| `60`  | `"15rem"`    |
| `64`  | `"16rem"`    |
| `68`  | `"17rem"`    |
| `72`  | `"18rem"`    |
| `76`  | `"19rem"`    |
| `80`  | `"20rem"`    |
| `84`  | `"21rem"`    |
| `88`  | `"22rem"`    |
| `92`  | `"23rem"`    |
| `96`  | `"24rem"`    |
| `0.5` | `"0.125rem"` |
| `1.5` | `"0.375rem"` |
| `2.5` | `"0.625rem"` |
| `3.5` | `"0.875rem"` |
| `4.5` | `"1.125rem"` |
| `5.5` | `"1.375rem"` |
| `6.5` | `"1.625rem"` |
| `7.5` | `"1.875rem"` |
| `px`  | `"1px"`      |

## セマンティックトークン

| Token  | Value           |
| ------ | --------------- |
| `fit`  | `"fit-content"` |
| `max`  | `"max-content"` |
| `min`  | `"min-content"` |
| `dvh`  | `"100dvh"`      |
| `dvw`  | `"100dvw"`      |
| `full` | `"100%"`        |
| `lvh`  | `"100lvh"`      |
| `lvw`  | `"100lvw"`      |
| `svh`  | `"100svh"`      |
| `svw`  | `"100svw"`      |
| `vh`   | `"100vh"`       |
| `vw`   | `"100vw"`       |
| `9xs`  | `"1rem"`        |
| `8xs`  | `"2rem"`        |
| `7xs`  | `"3rem"`        |
| `6xs`  | `"4rem"`        |
| `5xs`  | `"6rem"`        |
| `4xs`  | `"8rem"`        |
| `3xs`  | `"10rem"`       |
| `2xs`  | `"12rem"`       |
| `xs`   | `"16rem"`       |
| `sm`   | `"20rem"`       |
| `md`   | `"24rem"`       |
| `lg`   | `"28rem"`       |
| `xl`   | `"32rem"`       |
| `2xl`  | `"38rem"`       |
| `3xl`  | `"44rem"`       |
| `4xl`  | `"50rem"`       |
| `5xl`  | `"56rem"`       |
| `6xl`  | `"64rem"`       |
| `7xl`  | `"72rem"`       |
| `8xl`  | `"80rem"`       |
| `9xl`  | `"88rem"`       |

## フラクショナルトークン

| Token   | Value                    |
| ------- | ------------------------ |
| `1/2`   | `"calc(100% / 2)"`       |
| `1/3`   | `"calc(100% / 3)"`       |
| `1/4`   | `"calc(100% / 4)"`       |
| `1/5`   | `"calc(100% / 5)"`       |
| `1/6`   | `"calc(100% / 6)"`       |
| `1/12`  | `"calc(100% / 12)"`      |
| `2/3`   | `"calc(100% / 3 * 2)"`   |
| `2/5`   | `"calc(100% / 5 * 2)"`   |
| `2/6`   | `"calc(100% / 6 * 2)"`   |
| `2/12`  | `"calc(100% / 12 * 2)"`  |
| `3/4`   | `"calc(100% / 4 * 3)"`   |
| `3/5`   | `"calc(100% / 5 * 3)"`   |
| `3/6`   | `"calc(100% / 6 * 3)"`   |
| `3/12`  | `"calc(100% / 12 * 3)"`  |
| `4/5`   | `"calc(100% / 5 * 4)"`   |
| `4/6`   | `"calc(100% / 6 * 4)"`   |
| `4/12`  | `"calc(100% / 12 * 4)"`  |
| `5/6`   | `"calc(100% / 6 * 5)"`   |
| `5/12`  | `"calc(100% / 12 * 5)"`  |
| `6/12`  | `"calc(100% / 12 * 6)"`  |
| `7/12`  | `"calc(100% / 12 * 7)"`  |
| `8/12`  | `"calc(100% / 12 * 8)"`  |
| `9/12`  | `"calc(100% / 12 * 9)"`  |
| `10/12` | `"calc(100% / 12 * 10)"` |
| `11/12` | `"calc(100% / 12 * 11)"` |