# AX - 区切り線

## 概要

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

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

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

## 設定

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

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

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

| 名前       | 説明                                                   | 使用法                                                        |
| -------- | ---------------------------------------------------- | ---------------------------------------------------------- |
| **タイトル** | 色、フォントサイズ、スタイル、ウェイトのオプションでタイトルの外観をカスタマイズします。         | タイトルを適切に目立たせ、サイト全体のデザインスキームと一貫性を保つようにスタイルを調整します。           |
| **アイコン** | 背景色、前景色、前景色のデフォルト状態、および角丸のためのアイコン半径でアイコンのスタイルを設定します。 | アイコンの外観を微調整して、デザイン目標に合わせて目立たせたり控えめにしたりします。                 |
| **ボーダー** | サイズ、色、スタイル（実線、破線、点線など）を設定してセパレーターのボーダーを定義します。        | ボーダー設定を調整して、目立つ線からより微妙な区切りまで、コンテンツセクション間に望ましい区別レベルを作り出します。 |

{% endtab %}
{% endtabs %}