> 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/designing-your-app/alignment-tools.md).

# アライメントツール

Alignment Toolsでは、画面上や選択範囲内のコンポーネントを素早く整列させることができます。

{% embed url="<https://youtu.be/WMhmlu9ExSk>" %}

### 使用方法：

コンポーネントを選択し、\[︙] メニューをクリックしてアラインメントツールにアクセスします。

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-31057ef149d2f2d4816067710bd49ebfe876ce4a%2FScreenshot%202023-05-31%20at%209.51.20%20AM.png?alt=media" alt=""><figcaption></figcaption></figure>

{% tabs %}
{% tab title="画面に合わせる" %}
{% hint style="info" %}
1つ以上のコンポーネントが選択されている場合に表示されます。
{% endhint %}

\[Align to Screen]は、選択したコンポーネント全体をグループとして扱い、コンポーネントを画面に合わせます。

#### 水平に整列

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-0e879ae947ca2beafbb11deaca22bec8f8c9b892%2FScreenshot%202023-05-31%20at%2010.04.00%20AM%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

#### 垂直に整列

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-62377444ad4ce9f39defd89eacac743e2b431d4d%2FScreenshot%202023-05-31%20at%2010.05.11%20AM.png?alt=media" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="選択に合わせる" %}
{% hint style="info" %}
2つ以上のコンポーネントが選択されている場合に表示されます。
{% endhint %}

\[Align to Selection]は、選択したコンポーネント全体をグループとして扱い、コンポーネントを選択範囲に整列させます。

#### 選択を左に整列

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-4e4af89c0f32e0fa6d933dd5996045a523e9d896%2FScreenshot%202023-05-31%20at%2010.06.34%20AM.png?alt=media" alt=""><figcaption></figcaption></figure>

#### 水平中央に整列

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-375555d432cd77ed46223dcfe632df4048522857%2FScreenshot%202023-05-31%20at%2010.07.24%20AM.png?alt=media" alt=""><figcaption></figcaption></figure>

#### 右に整列

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-e3fb1e2bcb9e68ceed4173ab6b81266c855d5ea1%2FScreenshot%202023-05-31%20at%2010.10.39%20AM.png?alt=media" alt=""><figcaption></figcaption></figure>

#### 上に整列

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-d2af20c8bbbbfcbd1ff3dfb206f53d1f4f970cdf%2FScreenshot%202023-05-31%20at%2010.11.40%20AM.png?alt=media" alt=""><figcaption></figcaption></figure>

#### 垂直中央に整列

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-8ac84337c3410c14a3e05317f6eb6817d2d510a8%2FScreenshot%202023-05-31%20at%2010.13.36%20AM.png?alt=media" alt=""><figcaption></figcaption></figure>

#### 下に整列

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-d27df4523b2bb9717344bad82f07ad48e1b1f0b4%2FScreenshot%202023-05-31%20at%2010.14.53%20AM.png?alt=media" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="分布" %}
{% hint style="info" %}
3つ以上のコンポーネントが選択されている場合に表示されます。
{% endhint %}

\[Distribute]は選択したコンポーネント間のスペースを均等に分配します。

#### 垂直間隔を分布

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-bc907af1d0322f6d0d568579d996ce0acf9edbfc%2FScreenshot%202023-05-31%20at%2010.16.49%20AM.png?alt=media" alt=""><figcaption></figcaption></figure>

#### 水平間隔を分布

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-0c7d345f4640eb64e1b379ff2f7fe17a63dacddf%2FScreenshot%202023-05-31%20at%2010.17.57%20AM.png?alt=media" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

<details>

<summary><strong>キーボードショートカット</strong></summary>

**選択に合わせる:**\
上に整列: OPTION + W

左に整列: OPTION + A

下に整列: OPTION + S

右に整列: OPTION + D

垂直中央に整列: OPTION + V

水平中央に整列: OPTION + H\\

**画面に合わせる**\
垂直に整列: OPTION + SHIFT + V

水平に整列: OPTION + SHIFT + H

</details>

{% hint style="info" %}
異なる親を持つアイテムを選択する場合、整列/分散オプションは利用できません。
{% endhint %}


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://help.adalo.com/ja/design/designing-your-app/alignment-tools.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.