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

## 🎥 チュートリアル

| 名前                                                                                                                                             | 説明                                                                                  |
| ---------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
| [**グリッドレイアウトを作成する**](/experience-cloud/experience-cloud-ja/chtoriaru/use-cases/creating-a-grid-layout.md)                                      | Avonni Components を使って、製品や機能を紹介するダイナミックなグリッドレイアウトを作成する方法を学びましょう。                    |
| [**Avonni Layout をレスポンシブに設定する**](/experience-cloud/experience-cloud-ja/chtoriaru/components/layout/configuring-the-layout-to-be-responsive.md) | Experience Cloud で、さまざまなデバイス向けに Avonni Layout を使った、レスポンシブで使いやすいレイアウトを作成する方法を学びましょう。 |

## プロパティ

| 名前             | 説明                                  | 使用方法                                                             |
| -------------- | ----------------------------------- | ---------------------------------------------------------------- |
| **水平配置**       | レイアウト内のコンテンツの水平配置を調整します             | この設定を使用して、コンテンツの配置を一貫させ、レイアウト全体でバランスの取れた調和のある外観を維持します。           |
| **垂直配置**       | レイアウト内のコンテンツの垂直配置を調整します。            | コンテンツの垂直方向の位置を最適化し、全体的なデザイン目標に沿った見た目のよい形で表示されるようにします。            |
| **境界まで引き寄せる**  | コンテンツをレイアウトの境界まで広げられるようにします。        | このオプションを使用して、空間を最大限に活用するレイアウトを作成し、コンテンツ要素の視認性と表示を向上させます。         |
| **複数行**        | コンテンツを複数行に配置できるようにします。              | レイアウトでコンテンツを縦方向に並べる必要がある場合にこの機能を有効にし、構造化された整理された表示を実現します。        |
| **セクションとして表示** | レイアウトをページ内の個別のセクションとして表示するように設定します。 | レイアウトをページ内の個別のセクションとして表示するように設定します。                              |
| **カラムレイアウト**   | 列内でコンテンツをどのように表示するかを決定します。          | 列構成をカスタマイズしてグリッドのような構造を作成し、コンテンツを体系的かつ整然と配置して視覚的なナビゲーションを向上させます。 |

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

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

#### タイプ

列レイアウトの種類を決定します。

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

#### サイズ

グリッド内の列の幅を設定します。グリッドシステムは通常、12単位構成に基づいています。

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

#### 配置のずらし

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

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

#### パディング

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

* **オプション:**
  * **`水平`**: 列の左右のパディングを調整します。
  * **`周囲`**: 列のすべての側にパディングを追加します。
* **使用方法:** パディングを適用して列内に空間を作り、コンテンツが端に密着しないようにして、読みやすさと視覚的な美しさを向上させます。

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


---

# 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.