--- title: "合成レンダリング" slug: "composite-renderings" abstract: "合成画像は他のレンダリングで構成されます。" --- # 合成レンダリング コンポジットレンダリングは複数の [レンダリング](https://doc.sitecore.com/xp/ja/users/sxa/93/sitecore-experience-accelerator/the-sxa-renderings-and-rendering-variants.html "The SXA renderings and rendering variants")で構成されます。各インスタンスは独自のレイアウトを持ち、Experience Editorで別々に設計することも可能です。コンポジットレンダリングがページ上でレンダリングされると、各アイテムをデータソースからクエリし、データとレイアウトを取得します。これにより非常に複雑なレイアウトの作成が容易になりますが、より高度なセットアップも必要です。 画像、テキスト、ビデオなどの単純なレンダリングはレイアウトで構成され、単一のデータソース項目を使ってコンテンツを提供します。コンテナやスプリッターのような複雑なレンダリングは、複数の単純または複雑なレンダリングを含みます。これらのレンダリングは一つのレイアウト定義を持ち、追加されたレンダリングはすべてレンダリングページのプロパティで定義されます。Accordion、Carousel、Toggleなどの複合レンダリングは、すべてのデータソースを独自のレイアウトで使用します。レンダリングフィールドにはデータソース項目への参照のみが格納されます。したがって、関連するレイアウトは箱から直接レンダリングされません。 ![Differences in layout and data source usage for simple, complex, and composite renderings](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/C355A04A5E9A43EDBF4E40C9A223D5E8.png) デフォルトでSXAには以下の合成レンダリングが含まれています: - **カルーセル**: [カルーセル](https://doc.sitecore.com/xp/ja/users/sxa/93/sitecore-experience-accelerator/add-carousel-and-flip.html "Add Carousel and Flip") レンダリングでは、通常は画像と説明やリンクを添えた回転スライドのセットを定義できます。カルーセルはホームページの上部に使われることが多いですが、どのページにも配置可能です。例えば、複数の注目ページを表示したり、ステップバイステップのプロセスを説明したり、商品画像を表示したりできます。カルーセル内のアイテムは、定められた順序で一つずつ表示されます。デフォルトでは、カルーセルレンダリングにはスライド画像とスライドテキストアイテムが含まれています。 ![Carousel example](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/75A04ED05DEA49E48382FC3FF2EC0CAA.png) - **アコーディオン**: [アコーディオン](https://doc.sitecore.com/xp/ja/users/sxa/93/sitecore-experience-accelerator/add-accordion-and-tabs.html "Add Accordion and Tabs") レンダリングでは、折りたたみ可能なセクションのリストを縦または横に重ねることができます。FAQやサムネイルのセットを表示したり、長い文書をセクションに分割したりできます。各セクションを展開すると、その項目に関連する内容が表示されます。アコーディオンでページを折りたたむことでスクロールが最小限に抑えられ、コンテンツが豊富なページや、例えばモバイルデバイスのように非常に狭いスペースに制限されているページで非常に有用です。これにより、何を読むか無視するかを判断でき、ウェブページが圧倒されにくくなります。 ![Accordion example](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/2047E103BBF44FDEAAFFF8DA3D939254.png) - **Flip**: [Flip](https://doc.sitecore.com/xp/ja/users/sxa/93/sitecore-experience-accelerator/add-carousel-and-flip.html "Add Carousel and Flip")では、前面(見える)と背面(隠れ)の2つのアイテムを操作できます。この2つのアイテムは、アイテムをクリックしたりカーソルを合わせたりすると交互に表示されます。例えば、スタッフの写真やプロフィール情報、クーポンやリディームコードの表示にはフリップレンダリングが使えます。 ![Flip example](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/FBB8CE1CF9B54AA3BF9FFE667725146E.png) - **タブ**: [タブ](https://doc.sitecore.com/xp/ja/users/sxa/93/sitecore-experience-accelerator/add-accordion-and-tabs.html "Add Accordion and Tabs") レンダリング機能では、タブレイアウト内でコンテンツを表示でき、一度に1つのタブの内容だけが表示されます。タブは関連情報を構造化して表示したい場合に非常に効果的です。例えば、タブレンダリングを使ってブログ記事を最近の投稿、人気投稿、最もコメントされた投稿などのカテゴリに整理できます。 ![Tabs example](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/9C3562579A1B403181F2D60D41BC15F5.png) - **スニペット**: [スニペット](https://doc.sitecore.com/xp/ja/users/sxa/93/sitecore-experience-accelerator/add,-reuse,-and-edit-a-snippet.html "Add, reuse, and edit a snippet") レンダリングでは、再利用可能なレンダリングのグループを作成できます。これは複数のレンダリングで構成された複合レンダリングで、エクスペリエンスエディターで別々にデザインできます。部分デザインと同様に、異なる種類のレンダリングをグループ化し、そのグループを異なる場所で再利用できます。スニペットと部分デザインの違いは、スニペットは拡張可能で、スタイリングを変更でき、ページ上で好きなだけ頻繁に使える点です。