> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-layout.md).

# AX - レイアウト

## 概要

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

レイアウト セクションにコンポーネントをドラッグ＆ドロップすることで、複数列レイアウト、レスポンシブ グリッド、またはカスタム ページ構造を作成できます。Experience Builder で、列幅、間隔、配置、画面サイズごとのレスポンシブ動作を制御できます。

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

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

## 設定

### プロパティ

**横方向の配置** レイアウト内のコンテンツの水平方向の配置を調整し、バランスよく調和のとれた見た目にします。

**縦方向の配置** コンテンツの垂直方向の配置を制御し、デザイン目標に合う視覚的に魅力的な形で表示します。

**境界まで引き寄せる** コンテンツをレイアウトの境界方向へ拡張できるようにし、スペースを最大限に活用したレイアウトを作成します。

**複数行** レイアウトが複数行にわたるコンテンツを収容できるようにし、構造化された整理された順序で配置します。

**セクションとして表示** レイアウトをページ内の独立したセクションとして表示するように設定します。

**列レイアウト** コンテンツを列内でどのように表示するかを決定し、体系的で整然とした配置のためのグリッド状の構造を作ります。詳細は [列レイアウト設定](#column-layout-settings) 以下。

### 列レイアウト設定

列レイアウトの設定により、ページ コンテンツを柔軟に整理でき、さまざまな画面サイズやデバイスにレスポンシブに適応しながら、すっきりとした構造的な外観を維持できます。

#### タイプ

列レイアウトの性質を決定します。

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

#### サイズ

グリッド内の列の幅を設定します。グリッド システムは通常 12 単位構成です。

* **範囲:** 1 〜 12。各単位は、利用可能な総幅の割合を表します。
* **用途:** 各列が占めるスペース量を定義するサイズを割り当てます。たとえば、12 単位グリッドでサイズを 4 に設定すると、その列は利用可能な水平方向スペースの 3 分の 1 を占めることになります。

#### 配置オフセット

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

* **オプション:**
  * **`左`**：列をコンテナーの左端へ移動します。
  * **`右`**：列を右端へ移動します。
  * **`上`**：列をコンテナー上部に近づけて配置します。
  * **`下部`**：列をコンテナー下部付近に配置します。
* **用途:** この設定を使用して、周囲に対する列の位置を微調整し、レイアウトの視覚的な魅力と空間バランスを高めます。

#### パディング

列の内部余白を制御します。

* **オプション:**
  * **`水平`**：列の左右の余白を調整します。
  * **`周囲`**：列の四方すべてに余白を追加します。
* **用途:** 列内に余白を適用して、コンテンツが端にぴったり接しないようにし、読みやすさと見た目の美しさを向上させます。

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

## ユースケース

| 名称                                                                                                                                             | 説明                                                                                 |
| ---------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
| [**グリッドレイアウトを作成する**](/experience-cloud/experience-cloud-ja/chtoriaru/use-cases/creating-a-grid-layout.md)                                      | 製品や機能を紹介するための、Avonni コンポーネントを使った動的なグリッド レイアウトの作成方法を学びます。                           |
| [**Avonni Layout をレスポンシブに設定する**](/experience-cloud/experience-cloud-ja/chtoriaru/components/layout/configuring-the-layout-to-be-responsive.md) | Experience Cloud 全体で、さまざまなデバイスに対応した、使いやすいレスポンシブ レイアウトを Avonni Layout で作成する方法を学びます。 |


---

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

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-layout.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.