> 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-accordion-section.md).
# AX - アコーディオンセクション
## 概要
**AX - アコーディオンセクション** は、Experience Cloud コンポーネントで、〜内に個別の折りたたみ可能なセクションを作成します。 [AX - アコーディオン](/experience-cloud/experience-cloud-ja/experience-components/ax-accordion.md) Experience Sites ページ上のコンポーネントです。
アコーディオン内で使用して、コンテンツを個別の展開可能な領域に整理します。各セクションはコンテナーとして機能し、テキスト、画像、フォーム、リスト、カスタムコンポーネントなど、任意の Experience Cloud コンポーネントをドラッグ＆ドロップして、セクションのコンテンツを作成できます。
FAQ、手順説明、機能比較、または複数の異なるレイアウトを必要とするアコーディオンコンテンツの構成に最適です。
{% hint style="danger" %}
このコンポーネント [スロットを活用し](/experience-cloud/experience-cloud-ja/hajimeni/learning-the-basics.md#understanding-slots) 高度なカスタマイズを実現するため、LWR サイトに最適です。Aura サイトではこのレベルのカスタマイズはサポートされていません。
{% endhint %}
## 設定
### プロパティ
**タイトル** ここでセクション名を入力します。タイトルの後には、任意の他のコンポーネントを配置できるコンテンツ領域があります。
**バリアント** セクションのスタイルを設定します： `ベース` または `シェーディング`.
**開くアイコン名** と **閉じるアイコン名** セクションが展開されたときと折りたたまれたときに、それぞれ表示されるアイコンを設定します。
**アイコンの位置** 展開/折りたたみアイコンを `左` または `右`. **アイコンサイズ** サイズを設定します： `極小`, `極小`, `小`, `中`、または `大`.
**アイコンを非表示** 展開/折りたたみアイコンを非表示にします。
コンテンツ領域以外では、ヘッダーはスロットを通じてカスタムのタイトル内容とヘッダーアクションをサポートします。
## スタイリング
〜からセクションの外観をカスタマイズします。 **［スタイル］** プロパティエディタのセクションからカスタマイズします。
{% tabs %}
{% tab title="コンテナ" %}
セクションコンテナーのスタイルを設定します。
* **余白 / パディング：** 外側と内側の間隔を設定します。
* **背景色：** コンテナーの背景を設定します。
* **境界線の色 / サイズ / スタイル / 半径：** コンテナーの境界線を制御します。
{% endtab %}
{% tab title="ヘッダー" %}
セクションヘッダーのスタイルを設定します。
* **余白 / パディング：** 外側と内側の間隔を設定します。
* **背景色：** ヘッダーの背景を設定します。
* **境界線の色 / サイズ / スタイル / 半径：** ヘッダーの境界線を制御します。
{% endtab %}
{% tab title="コンテンツ" %}
折りたたみ可能な本文のスタイルを設定します。
* **余白 / パディング：** 外側と内側の間隔を設定します。
* **背景色：** コンテンツの背景を設定します。
* **境界線の色 / サイズ / スタイル / 半径：** コンテンツの境界線を制御します。
{% endtab %}
{% tab title="タイトル" %}
ヘッダーのタイトルテキストのスタイルを設定します。
* **色：** タイトルの色を設定します。
* **フォントサイズ / フォントスタイル / フォントウェイト：** タイトルのタイポグラフィを制御します。
{% endtab %}
{% tab title="アイコン" %}
展開/折りたたみアイコンのスタイルを設定します。
* **背景色：** アイコンの背後の色を設定します。
* **前景色 / ホバー時の前景色：** デフォルト状態とホバー状態のアイコン色を設定します。
{% 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-accordion-section.md?ask=&goal=
```
`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.
