> 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-container.md). # AX - コンテナ ## 概要 **AX - コンテナ** は、Experience Sites ページ上で、他のコンポーネントを枠線、背景、パディング付きのスタイル化されたコンテナにまとめる Experience Cloud コンポーネントです。 関連するコンテンツをまとめたり、視覚的なセクションを作成したり、背景色や画像を追加したり、コンポーネントの周囲に一貫した余白を適用したりするために使用します。Experience Builder では、コンテナ内に任意の Experience Cloud コンポーネントをドラッグ＆ドロップして、グループ化されたレイアウトを作成できます。 視覚的なセクションの作成、フォームフィールドのグループ化、ブランド背景の追加、ダッシュボードウィジェットの整理、あるいはポータルでコンテンツをスタイル化されたコンテナで囲みたいあらゆる場面に最適です。 {% hint style="danger" %} このコンポーネントは [スロットを活用し](/experience-cloud/experience-cloud-ja/hajimeni/learning-the-basics.md#understanding-slots) 高度なカスタマイズが可能で、LWR サイトに最適です。Aura サイトでは、このレベルのカスタマイズはサポートされていません。 {% endhint %} ## チュートリアル | 名前 | 説明 | | --------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | | [**グリッドレイアウトを作成する**](/experience-cloud/experience-cloud-ja/chtoriaru/use-cases/creating-a-grid-layout.md) | インタラクティブな「詳細を見る」ボタン付きで製品を紹介する、動的なグリッドレイアウトの作成方法を学びます。 | ## Avonni Container でサイトの可能性を最大化する ### あらゆるニーズに対応する多彩なデザインオプション Avonni Container コンポーネントは、Card、Box、Standard という多彩なスタイルバリアントを備えており、それぞれ異なるコンテンツ要件に対応するよう設計されています。 * この **`カード`** バリアントは、推薦文のような目を引くセクションに最適で、コンテンツに華やかさを加えます。
* この **`Box`** バリアントは、製品や主要機能を強調して目立たせるのに最適です。
* この **`Standard`** バリアントは、より一般的なコンテンツに対してすっきりと一貫した見た目を提供し、サイト全体の調和を保ちます。
### サイトを高めるダイナミックなビジュアル Avonni Container を使えば、独自の背景画像を通じてさまざまなセクションに命を吹き込めます。「会社概要」セクションに鮮やかなチーム写真を追加したり、サステナビリティのトピックに穏やかな風景を描いたりする場面を想像してみてください。こうしたダイナミックなビジュアルは、見た目の魅力を高めるだけでなく、ブランドのストーリーをより効果的に伝えるのにも役立ちます。 ### 読みやすさとスタイルの両立 コンテンツがにぎやかで色鮮やかな背景の上でも際立つようにすることは、Web デザインでは重要です。Avonni Container は、オーバーレイカラーを使うことでこの課題に対応します。たとえば、華やかな背景の上に暗いオーバーレイを重ねてイベント詳細を目立たせたり、読みやすさを保ちながらコンテンツに奥行きを加えるさりげない色味を使ったりできます。 ### 表示を完全に制御 Avonni Container では、各セクションのサイズ、背景、枠線を細かく制御できます。つまり、コンテンツが占めるスペースを微調整したり、テーマに合わせて背景色や画像を変更したり、枠線の設定を調整してより明確にしたりできます。これらの要素はそれぞれ、ページの視覚的な構造を強化するうえで重要な役割を果たします。 ### 多様なユーザー層への適応性 今日のデジタル環境では、さまざまな利用者のニーズに対応することが重要です。Avonni Container は、この適応性を念頭に設計されています。パートナーポータルのニュースセクションでは Card スタイルを使い、顧客ハブで特別オファーを強調するには Box スタイルを使うなど、このコンポーネントはコンテンツが確実に表示され、利用者の心に響くようにします。 ### まとめ Avonni Container コンポーネントは単なるツールではなく、創造性のためのキャンバスであり、Experience Cloud を使う際の多様な Web デザイン課題を解決するソリューションです。その汎用性、ダイナミックなビジュアル機能、読みやすさの向上、適応可能なコンテンツ表示オプションにより、あらゆる Salesforce Experience Cloud サイトで欠かせない存在になります。惹きつけたい、伝えたい、参加を促したい、どの目的でも、Avonni Container があれば、スタイルと効率を両立しながらすべてを実現できます。 ## 設定 {% tabs %} {% tab title="🎛️ プロパティ" %} | 名前 | 説明 | 使用方法 | | ------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------- | | **バリアント** |

コンテナ全体の外観を定義するスタイルバリアントを選択します。
詳細を見る

| シンプルな表示、ボックス型の表示、カード型の表示のいずれを好む場合でも、デザインのビジョンに合うバリアントを選択してください。 | | **背景画像** | コンテナの背景画像を設定します。 | コンテナの視覚的な魅力を高め、伝えたい雰囲気やテーマ性に貢献する画像をアップロードするか、URL を指定します。 | | **オーバーレイカラー** | 背景画像の上に色のオーバーレイを適用します。 | 背景画像の上にさりげなく重なる色を選択し、コンテナ内のコンテンツの視認性と読みやすさを保つのに役立てます。 | | {% endtab %} | | | {% tab title="バリアントの定義" %} この **`バリアント`** Avonni Container コンポーネントのプロパティは、コンテナの基本的なスタイルと構造を定義する重要な機能であり、その中のコンテンツがどのように表示され、操作されるかの土台を設定します。各バリアントについて詳しく説明します。 **Standard** * **説明:** この **`standard`** バリアントは、基本的でミニマルなスタイルを提供します。デフォルト設定では、追加の装飾要素のない、すっきりとしたシンプルなコンテナになります。このバリアントは、余分な視覚的強調を必要としない、シンプルなレイアウトを求めるコンテンツに最適です。

Standard の使用例

* **使用方法:** 次の **`standard`** バリアントは、わかりやすくすっきりとした表示が必要な場合に使用します。コンテナによる追加のスタイル付けなしでコンテンツを際立たせたい場合に最適です。このバリアントは、情報ブロック、文章量の多いセクション、またはコンテナよりもコンテンツそのものに焦点を当てたい場合に適しています。 **Box** * **説明:** この **`box`** バリアントは、通常は枠線やわずかな影によってコンテナにさらに明確さを加え、コンテンツが「ボックスに収められている」ような印象を与えます。このバリアントは奥行きと強調感を生み出し、ページ上でより目立たせます。

Box の使用例

* **使用方法:** 次の **`box`** バリアントは、特集コンテンツや重要なお知らせなど、コンテナにより注目を集めたい場合、または異なるページセクションを視覚的に分けたい場合に選択します。ボックス型のスタイルは、複数のコンテナ要素を明確に区別する必要があるレイアウトや、ダッシュボードのようなインターフェースを作成する場合に有効です。 **カード** * **説明:** この **`card`** バリアントは、コンテナをカードスタイルのレイアウトに変え、通常は影（浮いているような効果）、角の丸み、場合によってはよりはっきりした枠線が特徴となります。

Card の使用例

* **使用方法:** この **`card`** バリアントは、プロフィール、製品説明、インタラクティブ要素など、個別に注目させたい独立したコンテンツブロックに最適です。視覚的に魅力的なオプションや情報ブロックのグリッドを作成するのに非常に適しており、各カードがより大きなコレクションの一部となるコンテンツを保持します。このバリアントは、カードをさまざまな画面サイズに応じて自然に並べ替えられるため、レスポンシブデザインで特に効果的です。 #### 概要 適切な **`バリアント`** Avonni Container にとっては、コンテナのスタイルをコンテンツの目的やページ全体の美的感覚に合わせることです。 **`standard`**、装飾のないシンプルさの **`box`**、明確に区切られた境界の **`card`**、あるいはモダンな魅力の {% 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-container.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.