# コンポーネントの配置とグループ化 *スキルレベル: 初心者* ## 開始前に * [画面とコンポーネント](https://help.adalo.com/ja/component-basics)について知っておくこと * 画面上での[コンポーネントの配置](https://help.adalo.com/ja/design/legacy-builder/positioning-components)について知っておくこと * この機能を使用するには有料の Adalo プランは必要ありません ## 手順 {% tabs %} {% tab title="詳細" %} #### コンポーネントの配置 画面にコンポーネントを初めて配置すると、そのコンポーネントは他の既存のコンポーネントの上に配置されます。コンポーネントは、サンドイッチの層のように考えることができ、各コンポーネントは画面上のコンポーネントのスタック内で上下に移動できます。コンポーネントをいくつかの方法で配置できます。コンポーネントの配置は簡単です: **1.)** コンポーネントを選択し、そのコンポーネントの設定の右上にある「その他」ボタン をクリックします **2.)** **配置**オプションにカーソルを合わせると、メニューが表示され、4つの異なるオプションが表示されます: * **最前面に持ってくる** - このオプションは、画面上にあるコンポーネントの数に関係なく、コンポーネントを最前面/最上部に持ってきます。 * **最背面に送る** - このオプションは、画面上にあるコンポーネントの数に関係なく、コンポーネントを最背面/最下部に送ります。 * **前に持ってくる** - このオプションは、コンポーネントを1つずつ前方/上方に移動させ、はしごの段のようにします。 * **後ろに送る** - このオプションは、コンポーネントを1つずつ後方/下方に移動させ、はしごの段のようにします。 ![](https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-5bc157a08ddc9b8c8af68066c2fa37e01d6c436d%2FScreen%20Shot%202021-10-19%20at%2010.08.59%20AM.png?alt=media) **3.)** コンポーネントを配置する別の方法は、画面全体を選択してそのラベルをクリックし、左側のメニュー階層でコンポーネントを上下にドラッグすることです。リストの上部に近いコンポーネントが画面上の最前面/最上部にあります。 ![](https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-3f98437e63b3aeaa78b71023c0cb8fb99b01f531%2Farranging%20objects%20in%20hierarchy.gif?alt=media) **4.)** コンポーネントを1つずつレイヤーごとに配置する別の方法は、Command キー（Mac）または Control キー（PC）を押しながら上下矢印キーを押して、コンポーネントを画面上で前後に移動させることです。 #### #### コンポーネントのグループ化 時には、コンポーネントをグループ化してレイアウトを維持したり、画面上での位置を固定したり、複数のコンポーネントに対して表示ルールやアクションを適用したりすることが合理的です。時には、コンポーネントをグループ化することで、特に[「コンテナ」としての長方形を使用](https://help.adalo.com/ja/design/legacy-builder/create-component-containers)している場合に、コンポーネントが移動したり展開したりするのを防ぐこともできます。コンポーネントをグループ化するには: **1.)** コンポーネントを複数選択するには、四角形を描いて囲むか、**Shift** キーを押しながらグループ化したいコンポーネントをクリックします。 **2.)** コンポーネントを選択したら、左側のグループ設定で**Make Group**ボタンをクリックします。Macの場合はCommandキーを押しながら（PCの場合はControlキーを押しながら）、**G**キーを押すことでも同じ操作ができます。 ![](https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-556149dc1d98b7cb78fafa75d0a59a54ee1093d5%2FScreen%20Shot%202021-10-19%20at%2012.31.28%20PM.png?alt=media) **3.)** コンポーネントのグループ解除は、単にグループを選択し、左側のグループ設定の上部にある**More**ボタンをクリックして、**Ungroup**を選択します。Macの場合はCommandキーを押しながら（PCの場合はControlキーを押しながら）、**G**キーを押すことでも同じ操作ができます。 ![](https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-55f9883fe2712f27fb28b6211875456a10d794c7%2FScreen%20Shot%202021-10-19%20at%2012.29.14%20PM.png?alt=media) {% endtab %} {% endtabs %} ## Learn More * 単一のコンポーネントをグループ化することもできます。 * グループのコンポーネントを画面の上部または下部に固定することができます。これは、グループ設定の**Edit Styles**メニューで行います。 * コンポーネントのグループを前面に配置し、その後固定することは、独自のカスタムナビゲーションバーやメニューを作成する素晴らしい方法です。 * 画面全体が選択されているときに、コンポーネントの階層を使用してグループを配置したり、コンポーネントを追加したり削除したりすることもできます。 ## Help この記事に関する追加のヘルプが必要な場合は、いつでも[コミュニティフォーラム](https://forum.adalo.com/)で質問できます！投稿する際は、この記事へのリンクも貼り付けてください。 チュートリアルやヘルプドキュメントのリクエストがありますか？[お知らせください！](https://ideas.adalo.com/tutorial-requests)