# コンポーネントコンテナの作成
*スキルレベル: 中級*
## 開始前に
* [画面とコンポーネント](/ja/component-basics.md)について知っていること
* コンポーネントを[配置してグループ化する方法](/ja/design/legacy-builder/arranging-and-grouping-components.md)について知っていること
* この機能を使用するには有料の Adalo プランは必要ありません。
## 手順
{% tabs %}
{% tab title="詳細" %}
#### Adalo が画面をレンダリングする方法
コンテナが何であり、なぜ必要な場合があるのかを理解するためには、Adalo がアプリ内の画面をどのようにレンダリングしているかを理解することが役立ちます。
Adalo は、画面上のコンポーネントを自動的に整理しようとする Flexbox というメソッドをバックグラウンドで使用しており、これらのコンテナを異なる画面サイズに対応できるようにしています。Flexbox がどのように機能するかについて詳しく知りたい場合は、[こちら](https://reactnative.dev/docs/flexbox)を参照してください。
個々のコンポーネントやコンポーネントグループを扱う際、Adalo から自動生成されたコンテナが、アプリの外観をどのようにしたいのか理解するのに苦労することがあります。複雑な画面レイアウトを持つ場合、画面サイズが変更されたり、ユーザーが大きなフォントサイズを使用した場合など、コンポーネントが奇妙な動作をすることがあります。これらの奇妙な動作を減らすために、Adalo に少しガイドをするために、矩形コンポーネントを使用して自分でコンテナを作成することができます。
#### コンテナの作成
ほとんどの場合、コンテナは必要ありませんが、コンポーネント用のコンテナを作成することは、アプリが望むように見えたり機能したりするために使用できる最良の方法の1つです。Web デザインのあらゆる種類で画面を配置するためのステープルとして、コンテナを使用したレイアウトは重要です。コンテナを作成するには以下の手順に従います：
**1.)** ビルダーの左上隅にある大きなプラス記号
をクリックします。
**2.)** **Simple** セクションのドロップダウンメニューから、**Rectangle** コンポーネントを画面にドラッグして配置し、好みに合わせてサイズを変更します。
**3.)** 同様に、新しい矩形の上にテキストを追加し、テキストの黄色い境界線が矩形の内側に完全に収まるようにします。これにより、矩形がテキストのコンテナとして機能することが保証されます。画像のように境界線が接触している場合でも、矩形の境界線を超えない限り問題ありません。
**4.)** 必要に応じて、これらを[グループ化](/ja/design/legacy-builder/arranging-and-grouping-components.md)してコンテナを管理しやすくすることができますが、コンテナの機能を維持するためにはグループ化は必須ではありません。
**5.)** 他のコンポーネントに対しても同様に行うことができます。コンテナ内に完全なレイアウトを構築したり、コンテナ内にコンテナを配置したりすることができます。これらを使用する際のいくつかのヒントを以下に示します：
* コンテナ内の動的長アイテム（複数行のテキストなど）は、コンテナの内容に合わせて自動的にコンテナを下方向に拡張します。
* 最初はコンテナをグレーにしておくと、見やすく操作しやすくなります。その後、背景色や透明に変更して非表示にすることもできます。
* コンテナは、[コンポーネントの状態を作成](/ja/design/create-component-states.md)する際に非常に便利です。コンテナ内に表示される内容に基づいてサイズを調整します。
* コンテナとコンポーネントをグループ化する場合、グループ全体にクリック[アクション](/ja/action-basics.md)を追加することもできます。これにより、独自のボタン、ナビゲーションバー、メニューを作成できます。
{% endtab %}
{% endtabs %}
## 例
この解説を作成する際に使用したアプリを見たいですか？[こちらをクリックして](https://previewer.adalo.com/799b32c0-e1e0-4a57-8356-f41ba1cffb54)、例のアプリを使用するかクローンしてください。アプリをクローンする方法がわからない場合は、[こちら](/ja/settings/copying-vs-cloning-your-app/how-to-clone-an-app.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/legacy-builder/create-component-containers.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.