---
title: レスポンシブデザイン
description: "Yamada UIは、画面サイズに応じてスタイルを変更する機能を提供しています。"
---

:::tip
デフォルトでは、`@media(max-width)`のメディアクエリを用いたレスポンシブデザインを採用しています。もし、`@media(min-width)`のメディアクエリを採用する場合は、[こちら](https://yamada-ui.com/docs/theming/breakpoints.md#メディアクエリ)をご覧ください。
:::

## 概要

レスポンシブデザインは、テーマで定義されたブレイクポイントを参照します。Yamada UIには、デフォルトのテーマがあり、[ブレイクポイント](https://yamada-ui.com/docs/theming/tokens/breakpoints.md)が定義されています。

:::note
ブレイクポイントを変更したい場合は、テーマの[ブレイクポイント](https://yamada-ui.com/docs/theming/breakpoints.md)をご覧ください。
:::

## 使い方

レスポンシブデザインを[Style Props](https://yamada-ui.com/docs/styling/style-props.md)に適用するには、ブレイクポイントをキーとしたオブジェクトを設定します。

- オブジェクトのキーは、テーマの[ブレイクポイント](https://yamada-ui.com/docs/theming/tokens/breakpoints.md)で定義されているキーを定義します。
- オブジェクトの値は、キーで設定するスタイルの値を定義します。

```tsx
<Box p="md" color="fg.contrast" bg={{ base: "bg.contrast", md: "success" }}>
  Box
</Box>
```

上記のコードは、次のようなCSSが生成されます。

```css
.Box {
  background: var(--ui-colors-bg-contrast);

  @media screen and (max-width: 768px) {
    background: var(--ui-colors-success);
  }
}
```

## ユーティリティ

Yamada UIには、レスポンシブなレイアウトを構築するために便利なカスタムフックを提供しています。

- [useBreakpoint](https://yamada-ui.com/docs/hooks/use-breakpoint.md): 現在のブレイクポイントを返すカスタムフックです。このフックは、ウィンドウのサイズの変更を監視し、適切な値を返します。
- [useBreakpointEffect](https://yamada-ui.com/docs/hooks/use-breakpoint-effect.md): ブレイクポイントが変更されたときにエフェクトを実行するカスタムフックです。
- [useUpdateBreakpointEffect](https://yamada-ui.com/docs/hooks/use-update-breakpoint-effect.md): 初回のレンダリング時にはエフェクトをスキップし、ブレイクポイントが変更されたときにエフェクトを実行するカスタムフックです。
- [useBreakpointState](https://yamada-ui.com/docs/hooks/use-breakpoint-state.md): 提供されたオブジェクトから現在のブレイクポイントを初期値として返すカスタムフックです。
- [useBreakpointValue](https://yamada-ui.com/docs/hooks/use-breakpoint-value.md): 提供されたオブジェクトから現在のブレイクポイントの値を返すカスタムフックです。このフックは、ウィンドウのサイズの変更を監視し、適切な値を返します。