> For the complete documentation index, see [llms.txt](https://help.adalo.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.adalo.com/ja/design/legacy-builder/arranging-and-grouping-components.md).

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

*スキルレベル: 初心者*

## 開始前に

* [画面とコンポーネント](/ja/component-basics.md)について知っておくこと
* 画面上での[コンポーネントの配置](/ja/design/legacy-builder/positioning-components.md)について知っておくこと
* この機能を使用するには有料の Adalo プランは必要ありません

## 手順

{% tabs %}
{% tab title="詳細" %}

#### コンポーネントの配置

画面にコンポーネントを初めて配置すると、そのコンポーネントは他の既存のコンポーネントの上に配置されます。コンポーネントは、サンドイッチの層のように考えることができ、各コンポーネントは画面上のコンポーネントのスタック内で上下に移動できます。コンポーネントをいくつかの方法で配置できます。コンポーネントの配置は簡単です:

**1.)** コンポーネントを選択し、そのコンポーネントの設定の右上にある「その他」ボタン <img src="/files/0RIFlJv4ZB9384NKV9wX" alt="" data-size="line"> をクリックします

**2.)** **配置**オプションにカーソルを合わせると、メニューが表示され、4つの異なるオプションが表示されます:

* **最前面に持ってくる** - このオプションは、画面上にあるコンポーネントの数に関係なく、コンポーネントを最前面/最上部に持ってきます。
* **最背面に送る** - このオプションは、画面上にあるコンポーネントの数に関係なく、コンポーネントを最背面/最下部に送ります。
* **前に持ってくる** - このオプションは、コンポーネントを1つずつ前方/上方に移動させ、はしごの段のようにします。
* **後ろに送る** - このオプションは、コンポーネントを1つずつ後方/下方に移動させ、はしごの段のようにします。

![](/files/gZ1gkiU2BJVKQPFfokQv)

**3.)** コンポーネントを配置する別の方法は、画面全体を選択してそのラベルをクリックし、左側のメニュー階層でコンポーネントを上下にドラッグすることです。リストの上部に近いコンポーネントが画面上の最前面/最上部にあります。

![](/files/5l1iu7jpjzCmv3l4ePv9)

**4.)** コンポーネントを1つずつレイヤーごとに配置する別の方法は、Command キー（Mac）または Control キー（PC）を押しながら上下矢印キーを押して、コンポーネントを画面上で前後に移動させることです。

####

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

時には、コンポーネントをグループ化してレイアウトを維持したり、画面上での位置を固定したり、複数のコンポーネントに対して表示ルールやアクションを適用したりすることが合理的です。時には、コンポーネントをグループ化することで、特に[「コンテナ」としての長方形を使用](/ja/design/legacy-builder/create-component-containers.md)している場合に、コンポーネントが移動したり展開したりするのを防ぐこともできます。コンポーネントをグループ化するには:

**1.)** コンポーネントを複数選択するには、四角形を描いて囲むか、**Shift** キーを押しながらグループ化したいコンポーネントをクリックします。 **2.)** コンポーネントを選択したら、左側のグループ設定で**Make Group**ボタン<img src="/files/4m0jesmGAKrDLutHMjq6" alt="" data-size="line">をクリックします。Macの場合はCommandキーを押しながら（PCの場合はControlキーを押しながら）、**G**キーを押すことでも同じ操作ができます。

![](/files/uax3aM8lKY9yliIknLmT)

**3.)** コンポーネントのグループ解除は、単にグループを選択し、左側のグループ設定の上部にある**More**ボタン<img src="/files/0RIFlJv4ZB9384NKV9wX" alt="" data-size="line">をクリックして、**Ungroup**を選択します。Macの場合はCommandキーを押しながら（PCの場合はControlキーを押しながら）、**G**キーを押すことでも同じ操作ができます。

![](/files/jwjmzZYQuV18mZWX9mmB)
{% endtab %}
{% endtabs %}

## Learn More

* 単一のコンポーネントをグループ化することもできます。
* グループのコンポーネントを画面の上部または下部に固定することができます。これは、グループ設定の**Edit Styles**メニューで行います。
* コンポーネントのグループを前面に配置し、その後固定することは、独自のカスタムナビゲーションバーやメニューを作成する素晴らしい方法です。
* 画面全体が選択されているときに、コンポーネントの階層を使用してグループを配置したり、コンポーネントを追加したり削除したりすることもできます。

## Help

この記事に関する追加のヘルプが必要な場合は、いつでも[コミュニティフォーラム](https://forum.adalo.com/)で質問できます！投稿する際は、この記事へのリンクも貼り付けてください。

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://help.adalo.com/ja/design/legacy-builder/arranging-and-grouping-components.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.
