# アライメントツール

{% 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 %}