---
title: 基本を学ぶ
description: "3分間のチュートリアルを読んで、Yamada UIのコンポーネント・スタイリング・レスポンシブデザイン・カラーモードを学ぶ。"
---

このガイドは、Yamada UIの概念を理解するのに役立ちます。開発を開始する前に、このガイドを読んでYamada UIを理解することをオススメします。

:::tip
このガイドは基本であり、Yamada UIで開発する**面白さ**を感じてもらうことが目的です。なので、各概念や機能を深く説明していません。もっと知りたくなった場合は、ページ内の各リンクをご覧ください。
:::

## コンポーネント

Yamada UIは、2つの方法でコンポーネントを提供しています。1つは、[CLI](https://yamada-ui.com/docs/components/cli.md)からコンポーネントをローカルにダウンロードする新しい方法。もう1つは、モジュールからコンポーネントをインポートする従来通りの方法です。

### ダウンロード

[CLI](https://yamada-ui.com/docs/components/cli.md)からコンポーネントをローカルにダウンロードするケースは、以下のものが考えられます。

- コンポーネントの[バリアントスタイル](https://yamada-ui.com/docs/components/styled.md#バリアントスタイル)または[サイズスタイル](https://yamada-ui.com/docs/components/styled.md#サイズスタイル)をカスタマイズする。
- コンポーネントの初期値またはロジックをカスタマイズする。
- コンポーネントのスタイルやロジックに不具合があり、直接修正する。

```bash
pnpm yamada-cli add button
```

```bash
npm yamada-cli add button
```

```bash
yarn yamada-cli add button
```

```bash
bun yamada-cli add button
```

:::note
Yamada UIがコンポーネントを更新した場合は、[CLI](https://yamada-ui.com/docs/components/cli.md)の[差分を確認する](https://yamada-ui.com/docs/components/cli.md#差分を確認する)や[コンポーネントを更新する](https://yamada-ui.com/docs/components/cli.md#コンポーネントを更新する)を行うことで、コンポーネントを簡単に更新することができます。もし、あなたの修正と競合しても[Git](https://git-scm.com)の[競合の提示方法](https://git-scm.com/docs/git-merge#_how_conflicts_are_presented)と同じように表示され、簡単に解決することができます。
:::

### インポート

コンポーネントに何も変更することなく使用する場合は、モジュールからコンポーネントをインポートするだけです。

```tsx
import { Button } from "@yamada-ui/react"
```

```tsx
import { Button } from "@/components/ui"
```

```tsx
import { Button } from "@workspaces/ui"
```

:::note
コンポーネントをもっと知りたい場合は、[こちら](https://yamada-ui.com/docs/components.md)をご覧ください。
:::

## スタイリング

[Style Props](https://yamada-ui.com/docs/styling/style-props.md)は、propsを使用して要素にスタイルを適用します。Style Propsは、[CSSプロパティ](https://developer.mozilla.org/ja/docs/Web/CSS/Properties)に準拠しており、すべてのプロパティをキャメルケースで提供しています。

```tsx
<Box p="md" bg="bg.contrast" color="fg.contrast">
  Box
</Box>
```

:::note
[Style Props](https://yamada-ui.com/docs/styling/style-props.md)は、[@mdn/browser-compat-data](https://github.com/mdn/browser-compat-data)を使用しています。ライブラリが更新されると、Style Propsも定期的に更新が行われます。
:::

### 条件付きスタイル

条件付きスタイルを使用することで、[擬似要素](https://yamada-ui.com/docs/styling/style-props.md#擬似要素)、[擬似クラス](https://yamada-ui.com/docs/styling/style-props.md#擬似クラス)、[セレクター](https://yamada-ui.com/docs/styling/style-props.md#セレクター)のスタイルを適用できます。

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

:::note
スタイリングをもっと知りたい場合は、[こちら](https://yamada-ui.com/docs/styling.md)をご覧ください。
:::

### カラースキーム

カラースキームは、値を基にしてコンポーネントにカラーコンテキストを生成します。これは、色の一貫性を向上させます。

```tsx
<VStack gap="md">
  <Box
    p="md"
    colorScheme="blue"
    bg="colorScheme.solid"
    color="colorScheme.contrast"
  >
    Solid
  </Box>
  <Box
    p="md"
    colorScheme="green"
    bg="colorScheme.subtle"
    color="colorScheme.fg"
  >
    Subtle
  </Box>
</VStack>
```

カラースキームは、親要素のカラースキームを継承します。

```tsx
<VStack gap="md" colorScheme="blue">
  <Box p="md" bg="colorScheme.solid" color="colorScheme.contrast">
    Provided by Parent
  </Box>
  <Box
    p="md"
    colorScheme="green"
    bg="colorScheme.subtle"
    color="colorScheme.fg"
  >
    Child
  </Box>
</VStack>
```

:::note
カラースキームをもっと知りたい場合は、[こちら](https://yamada-ui.com/docs/styling/color-scheme.md)をご覧ください。
:::

## レスポンシブデザイン

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

:::note
レスポンシブデザインをもっと知りたい場合は、[こちら](https://yamada-ui.com/docs/styling/responsive-design.md)をご覧ください。
:::

## カラーモード

Yamada UIには、アプリケーションのカラーモードを管理するためのサポートが組み込まれており、簡単にライトモードとダークモードを切り替えることができます。また、提供しているすべてのコンポーネントは、ダークモードをサポートしています。

カラーモードを[Style Props](https://yamada-ui.com/docs/styling/style-props.md)に適用するには、配列を設定します。

- 最初の要素にライトモードの値を設定します。
- 最後の要素にダークモードの値を設定します。

```tsx
<Box p="md" bg={["success", "warning"]} color="white">
  Box
</Box>
```

:::note
カラーモードをもっと知りたい場合は、[こちら](https://yamada-ui.com/docs/styling/color-mode.md)をご覧ください。
:::

## Congratulations!

おめでとうございます🎉

これで、あなたは**普通の山田**になることができました🥳

**普通の山田**になったアナタへ、山田からこの言葉を贈ります。

「次は、[応用を学ぶ](https://yamada-ui.com/docs/get-started/advanced.md)で待ってるねっ///」😘

## もっと学習する

Yamada UIをもっと知るために、応用やテーマを学んでみませんか？😎

- [応用を学ぶ](https://yamada-ui.com/docs/get-started/advanced.md): Yamada UIのテーマ・ローディング・通知・アニメーションを学ぶ。
- [コンポーネントを探索する](https://yamada-ui.com/docs/components.md): Yamada UIは、130以上の柔軟性が高いコンポーネントを提供しています。すべてのコンポーネントは、アニメーション・ダークモードをサポートしています。
- [スタイリングを学ぶ](https://yamada-ui.com/docs/styling.md): すべてのコンポーネントは、propsを使用してスタイリングができるように設計されています。
- [ソースコードを探索する](https://github.com/yamada-ui/yamada-ui): Yamada UIのパッケージ・ドキュメントサイトはオープンソースです。Yamada UIを気に入ったら、スターを付けてください。