# AX - レイアウト

## 概要

**AX - レイアウト** Experience Cloud コンポーネントで、Experience Sites のページ上で他のコンポーネントを構造化された行と列に整理し、柔軟なサイズと配置を提供します。

レイアウトセクションにコンポーネントをドラッグアンドドロップして、マルチカラムレイアウト、レスポンシブグリッド、またはカスタムページ構造を作成するために使用します。Experience Builder で列幅、間隔、配置、および異なる画面サイズに対するレスポンシブ動作を制御できます。

ダッシュボードレイアウト、フォームセクション、コンテンツグリッド、比較表、またはモバイルとデスクトップに適応する構造化されたマルチカラムコンテンツの整理が必要なポータルのあらゆる場所に最適です。 

{% hint style="danger" %}
このコンポーネントは [スロットを活用します](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/hajimeni/wobu#understanding-slots) 高度なカスタマイズのため、LWR サイトに最適です。Aura サイトはこのレベルのカスタマイズをサポートしていません。
{% endhint %}

## 🎥 チュートリアル

| 名前                                                                                                                                                                      | 説明                                                                                         |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
| [**グリッドレイアウトを作成する**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/chtoriaru/ysuksu/guriddoreiautowosuru)                                      | 製品や機能を紹介するための動的なグリッドレイアウトを Avonni コンポーネントで作成する方法を学びます。                                     |
| [**Avonni レイアウトをレスポンシブに設定する**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/chtoriaru/konpnento/reiauto/reiautogaresuponshibuninaruyounisuru) | Experience Cloud 内で Avonni Layout を使用して、さまざまなデバイスに対応したレスポンシブでユーザーフレンドリーなレイアウトを作成する方法を学びます。 |

## プロパティ

| 名前             | 説明                                 | 使用法                                                               |
| -------------- | ---------------------------------- | ----------------------------------------------------------------- |
| **水平方向の配置**    | レイアウト内のコンテンツの水平方向の配置を調整します         | この設定を利用して、コンテンツが一貫して整列され、レイアウト全体でバランスの取れた調和のある外観を維持するようにします。      |
| **垂直揃え**       | レイアウト内のコンテンツの垂直方向の配置を操作します。        | コンテンツの垂直位置を最適化し、全体のデザイン目標に合致する視覚的に魅力的な形で表示されるようにします。              |
| **境界への引き寄せ**   | コンテンツがレイアウトの境界に向かって拡張することを許可します。   | このオプションを使用して、スペースを最大限に活用するレイアウトを作成し、コンテンツ要素の視認性と表示を向上させます。        |
| **複数行**        | 複数の行にわたってコンテンツを収容できるようにします。        | レイアウトが縦方向の順序でコンテンツを配置する必要がある場合にこの機能を有効にし、構造化され整理された表示を可能にします。     |
| **セクションとして表示** | ページ内でレイアウトを明確なセクションとして表示するよう設定します。 | ページ内でレイアウトを明確なセクションとして表示するよう設定します。                                |
| **カラムレイアウト**   | コンテンツが列内でどのように表示されるかを決定します。        | 列構成をカスタマイズしてグリッド状の構造を確立し、視覚的なナビゲーションを向上させるためにコンテンツを体系的かつ整然と配置します。 |

## カラムレイアウト設定

カラムレイアウト設定は、ページコンテンツの整理に柔軟性を提供し、クリーンで構造化された外観を保ちながら、異なる画面サイズやデバイスに応じてレスポンシブに適応するようにします。

#### 種類

カラムレイアウトの性質を決定します。

* **オプション：**
  * **`フレキシブル`**: このレイアウトタイプでは、列はコンテンツと利用可能な画面スペースに基づいて動的にサイズを調整します。さまざまなデバイスサイズに適応する必要があるレスポンシブデザインに最適です。
  * **`固定`**: このオプションは、画面サイズやコンテンツ量に関係なく列のサイズを一定に保ちます。均一で一貫したレイアウトが必要な場合に便利です。
* **使用法：** 選択 **`フレキシブル`** さまざまな画面サイズに合わせて調整するフルイドレイアウトの場合に、そして **`固定`** 列幅の一貫性が必要なレイアウトの場合に選択します。

#### サイズ

グリッド内の列の幅を設定します。グリッドシステムは通常12ユニット構造に基づいています。

* **範囲:** 1から12までで、各ユニットは利用可能な全幅に対する割合を表します。
* **使用法：** 各列が占めるスペース量を定義するためにサイズを割り当てます。例えば、12ユニットグリッドでサイズを4に設定すると、その列は利用可能な水平スペースの3分の1を占めることになります。

#### 配置のずらし

列のコンテナ内での位置を調整します。

* **オプション：**
  * **`左`**: 列をコンテナの左端に寄せます。
  * **`右`**: 列をコンテナの右端に寄せます。
  * **`上`**: 列をコンテナの上部に近づけて揃えます。
  * **`下`**: 列をコンテナの下部付近に配置します。
* **使用法：** この設定を使用して、列の周囲との相対的な位置を微調整し、レイアウトの視覚的魅力と空間バランスを向上させます。

#### パディング

列の内側の間隔を制御します。

* **オプション：**
  * **`水平`**: 列の左右のパディング（内側余白）を調整します。
  * **`全周`**: 列の全側にパディングを追加します。
* **使用法：** パディングを適用して列内にスペースを作り、コンテンツが端にぴったり付かないようにして可読性と視覚的美観を向上させます。

Avonni Layout コンポーネントのカラムレイアウト設定は、Salesforce Experience Cloud サイトで洗練され機能的なレイアウトを作成するために不可欠です。