# コンポーネントのグループ化

*スキルレベル: 中級*

## 開始前に

* [定義と用語](https://help.adalo.com/ja/design/designing-your-app/definitions-and-terms)を理解していることを確認してください。
* 特に、[レイアウト](https://help.adalo.com/ja/design/designing-your-app/using-the-layout-tab)タブへのアクセス方法、[共有レイアウト設定](https://help.adalo.com/ja/design/designing-your-app/using-the-layout-tab/shared-layout-settings)、および[カスタムレイアウト設定](https://help.adalo.com/ja/design/designing-your-app/using-the-layout-tab/custom-layout-settings)の前のガイドを読んでいることを確認してください。
* [コンポーネントツリー](https://help.adalo.com/ja/design/definitions-and-terms#component-tree)と[親コンポーネントと子コンポーネント](https://help.adalo.com/ja/design/definitions-and-terms#parent-and-child-components)を理解していることを確認してください。

## 動画

{% embed url="<https://www.youtube.com/watch?v=zMyp-NR_Zro>" %}

## 手順

#### 長方形、画像、楕円を使用する際に理解するべき原則がいくつかあります:

1. 画面に長方形、画像、または楕円を配置すると、他の要素のコンテナとして機能します。他のコンポーネントをその中にドラッグアンドドロップして**オートグループ**を作成できます。
2. "コンテナ"内のコンポーネントにアクセスするには、選択したいコンポーネントをダブルクリックします。長方形内にさらに長方形を配置することもできます。
3. 長方形内のコンポーネントは、コンポーネントのスケーリングが**固定されている**場合を除いて、長方形と自動的にスケーリングされます。
4. 長方形の黄色い境界ボックスは、長方形の端までしか伸びません。
5. コンポーネントが長方形の「内部」にあると見なすには、コンポーネントの黄色い境界線が完全に長方形の境界線の内側にある必要があります。
6. 長方形はグループとしてコンポーネントツリーに表示されませんが、グループのようにコンポーネントツリー内で開いてコンポーネントを追加または削除できます。
7. 長方形は技術的にはグループとは見なされないため、それら内部のコンポーネントには**グループとスケーリング**のオプションがありませんが、**親とスケーリング**は、コンポーネントが親の長方形と同じようにスケーリングされることを保証します。

{% hint style="info" %}
**注意**: 長方形をグループ解除することはできません。長方形からコンポーネントを削除する必要がある場合は、コンポーネントをクリックしてオートグループからドラッグアンドドロップしてください。
{% endhint %}

### グループ

#### 長方形を使用する際に理解するべき原則がいくつかあります:

1. 任意のものをグループ化できます。単一のコンポーネント、別のグループ、または内部にコンポーネントがある長方形でもグループ化できます。
2. グループの緑色の境界ボックスは、画面上の位置に関係なく、そのグループ内の任意のコンポーネントを含むように拡張されます。グループの境界ボックスは、グループ内のコンポーネントが離れて配置されている場合、かなり大きくなることがあります。
3. コンポーネントがグループに追加されると、グループの緑色の境界は新しく追加されたコンポーネントを含むように拡張されます。
4. コンポーネントをグループに追加または削除するには、緑色の境界ボックス内にドラッグアンドドロップします。
5. グループは、複数のコンポーネントやグループにレイアウト制約を適用するのに役立ちます。これらは、自身のスケーリング、アンカリング、および配置だけでなく、コンポーネント同士の設定に関連するものを維持する必要があります。下のアニメーションで、画面がスケーリングすると価格カードが近づいたり遠ざかったりすることに注目してください。ただし、価格カードの長方形をグループに配置すると、画面がスケーリングしてもそれらの間隔が変わらなくなります。

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-abae2e6af4854fafdb0af5be7a1e18960411cff7%2F2023-03-17_15-46-47_AdobeExpress.gif?alt=media" alt=""><figcaption><p>アニメーションをクリックして拡大してください。</p></figcaption></figure>

### グループと長方形、どちらを使用すべきですか？

これは優れた質問ですが、実際にはどちらか一方という答えではありません。なぜなら、グループと長方形の両方が似た目的を果たすからです。長方形を選択する主な理由は、背景に背景色や境界線などのスタイリングを追加するためです。

## もっと詳しく知る

* Adaloで画面をデザインする方法について詳しく知るには、[Design](https://help.adalo.com/ja/design)セクションをチェックしてください。

## ヘルプ

この記事に関する追加のヘルプが必要な場合は、いつでも[コミュニティフォーラム](https://forum.adalo.com/)で質問するか、[専門家を雇う](https://adalo.com/experts)ことができます！投稿にこの記事へのリンクを貼り付けることも忘れずに！

チュートリアルやヘルプドキュメントのリクエストがありますか？[お知らせください！](https://ideas.adalo.com/tutorial-requests)