> 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 を占めることになります。
* **デバイス別サイズ:** エディターには、Experience Builder で現在プレビューしているデバイスのサイズが表示されます。デバイスのプレビューを切り替え、サイズを再設定して、小・中・大画面で列の幅を変えられます。未設定のデバイスはベースサイズにフォールバックします。

#### 柔軟性

置き換え **サイズ** 列が **種類** である **`柔軟`** — 列が余分なスペースをどのように吸収するか、またはスペースが不足したときにどのように縮むかを制御します。

* **オプション:** **`自動`**, **`縮小`**, **`拡張`**, **`縮小なし`**, **`拡張なし`** と **`フレックスなし`**.
* **使用方法:** 次を使用: **`拡張`** 列が行内の残りのスペースを吸収できるようにするには、 **`縮小なし`** 狭い画面で列が折りたたまれるのを防ぐには、そして **`自動`** サイズ設定をブラウザーに任せるには。

#### 配置のずらし

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

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

#### パディング

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

* **オプション:** **`水平 小`**, **`水平 中`** と **`水平 大`** 列の左右のパディングを調整します； **`全周 小`**, **`全周 中`** と **`全周 大`** すべての側にパディングを追加します。
* **使用方法:** 列内にスペースを作るためにパディングを適用し、コンテンツが端にぴったり付かないようにして、可読性と見た目の美しさを向上させます。

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

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

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-layout.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.