* **用途:** この **`カード`** バリアントは、プロフィール、製品説明、インタラクティブ要素など、個別に注目させたいコンテンツの独立したブロックに最適です。各カードが大きなコレクションの一部としてコンテンツを保持する、見た目にも魅力的なオプションや情報ブロックのグリッドを作成するのに優れた選択肢です。このバリアントはレスポンシブデザインで特に効果的で、画面サイズに応じてカードを自然に並べ替えられます。
#### 概要
適切な **`バリアント`** Avonni Container を選ぶことは、コンテナのスタイルをコンテンツの目的やページ全体の美観に合わせることです。飾りのない **`標準`**のシンプルさ、 **`ボックス`**の明確な境界、または **`カード`**のモダンな魅力のいずれを選んでも、各 विकल्पは Salesforce Experience Cloud 環境内でコンテンツをフレーム化し、強調する独自の方法を提供します
## ユースケース
| 名称 | 説明 |
| --------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- |
| [**グリッドレイアウトを作成する**](/experience-cloud/experience-cloud-ja/chtoriaru/use-cases/creating-a-grid-layout.md) | インタラクティブな「詳細を見る」ボタンを使って製品を紹介する動的なグリッドレイアウトの作り方を学びます。 |
### あらゆるニーズに応える多彩なデザインオプション
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="パディング" %}
コンテナ内部の余白を調整します。パディング値を定義して、コンテナのコンテンツが端から適切な فاص間を保つようにし、可読性と見た目の美しさを高めます。
{% 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-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.
