> 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-separator.md).

# AX - セパレーター

## 概要

**AX - セパレーター** Experience Sites ページ上のコンテンツセクション間に視覚的な区切りを作成する Experience Cloud コンポーネントです。

コンポーネント間に水平線、余白、または視覚的な区切りを追加して、ページの構成と可読性を向上させるために使用します。Experience Builder でセパレーターのスタイル、色、太さ、間隔を設定できます。

フォームのセクションを分けたり、コンテンツブロックを区切ったり、長いページを整理したり、ポータル内で異なるコンテンツ領域を明確に視覚的に分離する必要があるあらゆる場面に最適です。

## 設定

{% tabs %}
{% tab title="🎛️ プロパティ" %}

| 名前                     | 説明                                                                                    | 使用方法                                                            |
| ---------------------- | ------------------------------------------------------------------------------------- | --------------------------------------------------------------- |
| **タイトル**               | テキストは、文脈や追加情報を提供するためにセパレーターの横に表示されます。                                                 | このプロパティを設定して、セパレーターで区切られるセクションにラベルを付け、ユーザーの理解を深めます。             |
| <h4>アイコン名とアイコンサイズ</h4> | セパレーターにアイコンを組み合わせて、視覚的な文脈を追加します。アイコンのサイズもデザインの美観に合わせて調整できます。                          | アイコンを、タイトルを補完したり続くコンテンツを示したりする視覚的な手がかりとして使用し、セパレーターの伝達機能に役立てます。 |
| **コンテンツの配置**           | タイトルとアイコンをセパレーター線に対してどこに配置するかを指定します。オプションには次が含まれます **`開始`**, **`末尾`**、または **`中央`**`.` | レイアウトやデザインで求められる強調に基づいてコンテンツを配置し、セパレーターがページの流れに自然に組み込まれるようにします。 |
| **向き**                 | セパレーターの向きを次に設定 **`水平`** または **`垂直`**&#x3068;することで、コンテンツの分け方に柔軟性を持たせます。                | コンテンツのレイアウトに最も適した向きを選択します。左右比較でも上下の区分けでも対応できます。                 |
| {% endtab %}           |                                                                                       |                                                                 |

{% tab title="🎨 スタイリング" %}

| 名前            | 説明                                                     | 使用方法                                                       |
| ------------- | ------------------------------------------------------ | ---------------------------------------------------------- |
| **タイトル**      | 色、フォントサイズ、スタイル、太さのオプションでタイトルの外観をカスタマイズします。             | タイトルを適切に目立たせつつ、サイト全体のデザイン方針との一貫性を保つようにスタイル設定します。           |
| **アイコン**      | 背景色、前景色、前景色のデフォルト状態、角を丸くするアイコンの半径を指定して、アイコンをスタイル設定します。 | アイコンの見た目を微調整して、より目立たせたり控えめにしたりし、デザインの目的に合わせます。             |
| **枠線**        | サイズ、色、スタイル（実線、破線、点線など）を設定して、セパレーターの枠線を定義します。           | 枠線の設定を調整して、はっきりした線からよりさりげない区切りまで、コンテンツセクション間に望ましい差異を作成します。 |
| {% endtab %}  |                                                        |                                                            |
| {% endtabs %} |                                                        |                                                            |


---

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