---
title: "アコーディオンとタブの追加"
slug: "add-accordion-and-tabs"
abstract: "サイトにコンポジットを追加してください。"
---
# アコーディオンとタブの追加

AccordionやTabsは、Carousel、Flip、Snippetと同様に、合成レンダリングです。合成レンダリングは、他のレンダリングからより複雑なレンダリングを作成することを可能にします。

## アコーディオンのレンダリングを追加してください

アコーディオンレンダリングでは、折りたたみ可能なセクションのリストを縦または横に重ねることができます。アコーディオンを使ってFAQやサムネイルのセットを表示したり、長い文書をセクションに分割したりできます。各セクションを展開すると、そのアイテムに関連する内容を明らかにできます。

アコーディオンでページを折りたたむことでスクロールが最小限に抑えられ、コンテンツが豊富なページや、例えばモバイルデバイスのように非常に狭いスペースにコンテンツが制限されているページで非常に有用です。これにより、何を読むか無視するかを判断でき、ウェブページが圧倒されにくくなります。

アコーディオンのレンダリングを追加します:

1.  アコーディオンレンダリングをページにドラッグ&ドロップします。
2.  **「関連コンテンツ選択**」ダイアログボックスで:
    -   既存のコンテンツ項目を選択するには、「 **既存のコンテンツを選択する**」をクリックし、希望するコンテンツをクリックして「 **OK」**をクリックしてください。
        
        例えば、既存のFAQセクションを選択すると、FAQコンテンツ項目が自動的にアコーディオンに入力されます:
        
        ![Select the Associated Content dialog box.](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/CABD2F97309848BEABD198FAAD7E59EF.png)
        
        ![Accordion example.](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/519ECD63944347A5B575B0AA230342D6.png)
        
    -   新しいアコーディオンコンテンツを作成するには、「 **Create New Content** 」をクリックして「 **OK** 」をクリックし、「**アイテム挿入** 」ダイアログボックスで「 **Accordion**」をクリックしてください。名前を入力して **「Ok**」をクリックします。
        
3.  ツールバーのボタンを使ってアコーディオンアイテムを追加したり、順番を変えたりできます。

## アコーディオンの外観を変える

ページ上でアコーディオンの表示方法を変更できます。

アコーディオンの外観を変えるには:

1.  アコーディオンのフローティングツールバーで「 **コンポーネントプロパティを編集**」をクリックします。
    
2.  **アコーディオンコントロール**のセクションでは、以下のフィールドを編集してアコーディオンの外観を決定できます:
    
    -   **イーズ機能** – 展開/崩壊アニメーションの種類をクリックします。例えば、 **スイング**、 **バック**、 **バウンス**、 **クイント**などです。
    -   **アニメーション速度** – アニメーションの速度(ミリ秒単位)を指定します。例えば、遅い場合は600、通常は400、速い場合は200と入力します。
    -   **複数開ける** – 複数のセクションを同時に展開できるか選択。
    -   **「Can Toggle** 」– セクションの切り替えを許可する。
    -   **デフォルトで展開** – ページを開く際に最初のセクションを展開する設定を選択してください。
    -   **ホバーを展開** する – セクションタイトルにマウスを合わせるとセクションを展開できます。
3.  **コントロールプロパティ**ダイアログボックスの**スタイリング**セクションで、アコーディオン用の異なるスタイルを選択できます。例えば、水平表示のアコーディオンを選びたい場合は、「**水平アコーディオン**」を選択します。
    
    ![In the Styling section select Horizontal Accordion.](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/2658579D636F403F9D683FD36C6C2727.png)
    

## タブのレンダリングを追加

タブレンダリング機能では、タブ付きレイアウト内でコンテンツを表示でき、同時に1つのタブの内容だけが表示されます。タブは関連情報を構造化的に表示したい場合に非常に効果的です。例えば、タブレンダリングを使ってブログ記事を最近の投稿、人気投稿、最もコメントされた投稿などのカテゴリに整理できます。

タブのレンダリングを追加するには:

1.  ツールボックスから、タブのレンダリングをページにドラッグします。
    
2.  **「関連コンテンツ選択**」ダイアログボックスで、既存のコンテンツ項目を選択するか、「**作成**」をクリックして新しいコンテンツ項目を作成してください。「**OK」**をクリックすると、ページ上のタブコンポーネントが表示されます。
    
    ![The tab component.](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/SXA-tabs.PNG)
    
3.  スタイリングを変更するには、フローティングツールバーで **「コンポーネントプロパティを編集**」をクリックします。
    
4.  **コントロールプロパティ**のダイアログボックスの**スタイリング**セクションで、スタイルを選択してタブの見た目を決定できます。
    
    例えば、左側のタブのアウトラインを描くには、**左側のタブ** をクリックしてから**OK**をクリックします。
    
    > !注「タブのコントロール」セクションで「下のタブ」スタイルを選択すると、「下のタブ」チェックボックスも選択してください。
    
5.  ツールバーのボタンを使ってタブアイテムを追加したり、順番を変えたりできます。
    
    ![Use the Tab toolbar to change the order of the tabs.](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/SXA-tab-add.PNG)