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

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

## 開始前に

* [画面とコンポーネント](/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: 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/arranging-and-grouping-components.md?ask=<question>
```

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.