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

## チュートリアル

近日公開

## 設定

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

| 名前                                 | 説明                                                              | 使用方法                                                              |
| ---------------------------------- | --------------------------------------------------------------- | ----------------------------------------------------------------- |
| **向き**                             | タブの向きを設定します。横向きレイアウトか縦向きレイアウトかを選択できます。                          | デザイン要件に最も適した向きを選択し、ユーザーのナビゲーションとコンテンツの見やすさを最適化します。                |
| **スコープあり**                         | より限定的で特定のスタイルをタブに適用できるよう、スコープ付きスタイル設定を有効にします。                   | この機能を使用して、コンポーネント内に限定されたスタイルを適用し、他のページ要素との意図しないスタイル競合を防ぎます。       |
| **スクロール可能 & スクロールボタン**             | タブをスクロール可能にし、スクロールボタンの表示を管理することで、タブ数が多い場合でも簡単にナビゲーションできるようにします。 | タブの数とレイアウトに基づいてスクロール機能を設定し、ユーザーが利用可能なすべてのタブに簡単にアクセスして移動できるようにします。 |
| **CMS コンテンツの背景画像またはコンテンツ背景画像 URL** | CMS から画像を選択するか URL を指定して、タブコンテンツ領域の背景をカスタマイズします。                | 全体のデザインやコンテンツ表示に調和する背景画像を適用して、タブの視覚的な魅力を高めます。                     |
| **データソース**                         | タブラベルとコンテンツのソースを定義し、ラベル、アイコン、ツールチップなどのタブプロパティを手動で設定できるようにします。   | この機能を活用してタブデータをカスタマイズし、各タブに正確なラベルを付け、必要に応じてアイコンやツールチップを追加します。     |
| {% 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-tabs.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.