# コンポーネントの状態を作成
*スキルレベル: 中級*
## 開始前に
* [画面とコンポーネント](/ja/component-basics.md)および[フィルターと条件](/ja/component-basics/conditions-and-filtering.md)について知っておく必要あり
* この機能を使用するには有料のAdaloプランは必要ありません
## 手順
複数の状態を持つコンポーネントを作成する必要がある場合もあるかと思います。例えば、入力が行われるまでグレーアウトされているボタンなどです。Adaloが画面をレンダリングする方法により、これを非常に簡単に行うことができます。Adaloは画面を上から下にレンダリングするため、非表示のコンポーネントは下のコンポーネントで置き換えられます。入力が行われた場合に状態が変化するシンプルなボタンを作成しましょう。
**1.)** 画面にシンプルなボタンを追加するには、左上の大きなプラスマーク
をクリックします
**2.)** その下に、同じようなボタンを追加しますが、ボタンの色をより明るい色に設定します
**3.)** 最初のボタンの下部の境界線と2番目のボタンの上部の境界線がわずかに触れ合うようにします。境界線が触れ合っていることを確認するには、**Cmd**と\*\*+**（Mac）または**Ctrl**と**+\*\*（PC）を使用してズームインします。
 
**4.)** 今度は、ボタンの上にテキスト入力フィールドを追加します。左上の大きなプラスマークをクリックし、**Forms and Fields**ドロップダウンセクションをクリックします。
**5.)** 各ボタンの表示を変更して、入力欄が入力されているかどうかに応じて表示されるボタンを異なるものにします。濃い緑のボタンをクリックし、**More**ボタン
をクリックして**Change Visibility**を選択します。
**6.)** **Visibility**ドロップダウンから**Sometimes Visible**を選択します。
**7.)** **"Will be visible if..."ドロップダウンでOther Components > Input**を選択します。
**8.)** **Is equal to**ドロップダウンを**Is not equal to**に変更し、可視性の3番目の入力を**Empty**に設定して**Done**をクリックします。
**9.)** 今度は、2番目の明るいボタンをクリックし、このボタンについてもステップ5から8を繰り返します。ただし、この時は可視性を**Is equal to**に設定し、3番目の入力を**Empty**に設定します。
このボタンは、入力欄が入力されているかどうかに基づいて色が変わります！これを機能させるためのポイントは、境界線が互いに接触しているため、可視性の条件に基づいて互いの位置を取ることができることです。
## 例
この解説で使用したアプリを確認してみたい場合は、[こちら](https://previewer.adalo.com/f7b4368c-cc58-4403-9749-d02d18d96b21)、例のアプリを使用したりクローンしてください。アプリをクローンする方法がわからない場合は、[こちら](/ja/settings/copying-vs-cloning-your-app/how-to-clone-an-app.md)で学ぶことができます。
## もっと詳しく知る
* ステートを作成する要素は、必ず縦横に揃えて、可視条件が変化したときに同じ場所に収まるようにしてください。
* Adaloでは、どのコンポーネントからでもコンポーネントの状態を作成できます。
* [Magic Text](/ja/component-basics/inserting-dynamic-text.md)を使用してデータベースからデータを利用する可視性条件でコンポーネントの状態を作成することもできます。
* トグルのような特定のコンポーネントには、独自の状態が組み込まれています。
## ヘルプ
この記事に関する追加のヘルプが必要な場合は、いつでも[コミュニティフォーラム](https://forum.adalo.com/)で質問できます！投稿する際は、この記事へのリンクを貼り付けることも忘れないでください！
チュートリアルやヘルプドキュメントのリクエストがありますか？[こちら](https://ideas.adalo.com/tutorial-requests)にお知らせください！
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://help.adalo.com/ja/design/create-component-states.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.