> 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 Cloud のコンポーネントで、Experience Sites ページ上のコンテンツをラベル付きタブに整理し、ポータル ユーザーがページを離れずにさまざまなセクションを切り替えられるようにします。

まとめて表示する必要のない関連コンテンツを整理するのに使います。たとえば、複数のタブにまたがる製品詳細、マルチセクションのフォーム、カテゴリ分けされたリソース、グループ化された情報などです。水平または垂直のタブ レイアウトを選択し、Experience Builder でスタイルを設定できます。

製品情報ページ、複数ステップのフォーム、リソースカテゴリ、アカウント セクションなど、ポータルでコンテンツを切り替え可能なビューに整理する必要があるあらゆる場所に最適です。

{% hint style="danger" %}
このコンポーネント [スロットを活用し](/experience-cloud/experience-cloud-ja/hajimeni/learning-the-basics.md#understanding-slots) 高度なカスタマイズを実現するため、LWR サイトに最適です。Aura サイトではこのレベルのカスタマイズはサポートされていません。
{% endhint %}

## 設定

### プロパティ

**向き** タブのレイアウト（水平または垂直）を設定し、ユーザーのナビゲーションとコンテンツの可視性に最適化します。

**スコープ付き** スコープ付きのスタイリングを有効にし、スタイルをコンポーネント内に限定して、他のページ要素との意図しない競合を防ぎます。

**スクロール可能** タブをスクロール可能にし、 **スクロール ボタンを表示** （モバイル版を含む）スクロール ボタンの表示を管理し、タブの数が多い場合でも簡単にナビゲーションできるようにします。

**CMS コンテンツの背景画像** と **コンテンツ背景画像 URL** CMS から画像を選択するか URL を指定して、タブコンテンツ領域の背景をカスタマイズします。 **コンテンツ オーバーレイ カラー** 可読性のために上に色のオーバーレイを適用します。

**データソース** タブラベルとコンテンツのソースを定義し、ラベル、アイコン、ツールチップなどのタブ プロパティを手動で設定できるようにします。

## スタイリング

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