# AX - コンテナ

## 概要

**AX - コンテナ** Experience Cloud コンポーネントで、Experience Sites ページ上の他のコンポーネントを境界線、背景、パディング付きのスタイル付きコンテナでラップします。

関連するコンテンツをまとめたり、視覚的なセクションを作成したり、背景色や画像を追加したり、コンポーネントの周囲に一貫した間隔を適用するために使用します。Experience Builder でコンテナ内に任意の Experience Cloud コンポーネントをドラッグ＆ドロップして、グループ化されたレイアウトを構築してください。

視覚的なセクションの作成、フォームフィールドのグルーピング、ブランド背景の追加、ダッシュボードウィジェットの整理、またはポータルでスタイル付きコンテナにコンテンツを包む必要があるあらゆる場所に最適です。

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

## チュートリアル

| 名前                                                                                                                                 | 説明                                                |
| ---------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- |
| [**グリッドレイアウトを作成する**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/chtoriaru/ysuksu/guriddoreiautowosuru) | インタラクティブな「詳しく見る」ボタンで製品を紹介する動的なグリッドレイアウトの作り方を学びます。 |

## Avonni Container でサイトの可能性を最大化する

### あらゆるニーズに対応する多用途なデザインオプション

Avonni Container コンポーネントは、Card、Box、Standard のスタイルバリアントの多彩さで際立っており、それぞれが異なるコンテンツニーズに対応するよう設計されています。 

* その **`カード`** バリアントは、推薦文のような目を引くセクションやコンテンツに彩りを加える用途に最適です。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FNw5LCFVXAuOT9QIpJm7o%2FContainer%20Experience%20Cloud%20Nov%2014%20(1).jpg?alt=media&#x26;token=d717fe2c-97e7-4dec-b504-655af00ab04b" alt=""><figcaption></figcaption></figure>

* その **`ボックス`** バリアントは、製品や主要な機能を強調して目立たせる際に優れており、それらを際立たせます。&#x20;

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fzp8drwvM6hmwCHGJLIJS%2FContainer%20Experience%20Cloud%20Nov%2014.jpg?alt=media&#x26;token=7c34a9bf-caf8-40b4-91a2-2b85b4318294" alt=""><figcaption></figcaption></figure>

* その **`スタンダード`** バリアントは、より従来型のコンテンツに対してクリーンで統一感のある外観を提供し、サイト全体の調和を保ちます。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FGoPh8o8Skg4y744r9r8N%2FContainer%20Experience%20Cloud.jpg?alt=media&#x26;token=5e7f5272-b3ca-4575-bf87-92cca0b13c68" alt=""><figcaption></figcaption></figure>

### サイトを高める動的なビジュアル

Avonni Container を使えば、さまざまなセクションに独自の背景画像で命を吹き込むことができます。『私たちについて』のセクションに活気あるチーム写真を追加したり、サステナビリティに関するトピックに穏やかな風景を描いたりすることを想像してください。これらの動的なビジュアルは美的魅力を高め、ブランドのストーリーをより効果的に伝えます。

### 読みやすさとスタイルの両立

装飾の多いまたはカラフルな背景に対してコンテンツを目立たせることはウェブデザインで非常に重要です。Avonni Container はオーバーレイカラーの使用でこの課題に対応します。祭りのような背景にダークオーバーレイを重ねてイベントの詳細を際立たせたり、控えめな色合いでコンテンツに奥行きを与えながら読みやすさを保つことを想像してください。

### プレゼンテーションの完全なコントロール

Avonni Container は各セクションのサイズ、背景、境界線に関する幅広いコントロールを提供します。これにより、コンテンツが空間を占有する方法を細かく調整したり、テーマに合わせて背景色や画像を適用したり、追加の定義のために境界線設定を調整したりできます。これらの各要素はページの視覚構造を向上させる上で重要な役割を果たします。

### 多様なオーディエンスへの適応性

今日のデジタル環境では、さまざまなオーディエンスのニーズに応えることが重要です。Avonni Container はこの適応性を念頭に置いて設計されています。パートナーポータルのニュースセクションに Card スタイルを使用したり、カスタマーハブで特別オファーを強調するために Box スタイルを使用したりする場合でも、このコンポーネントはコンテンツが見られ、オーディエンスに響くことを保証します。

### まとめ

Avonni Container コンポーネントは単なるツール以上のもので、Experience Cloud を使用する際の創造性のキャンバスであり、多様なウェブデザイン課題へのソリューションです。その多用途性、動的なビジュアル機能、読みやすさの向上、適応可能なコンテンツ表示オプションにより、どんな Salesforce Experience Cloud サイトにも不可欠な存在となります。魅了する、情報を伝える、あるいはエンゲージさせることを目指すにせよ、Avonni Container はスタイルと効率性をもってそれを可能にします。

## 設定

{% tabs %}
{% tab title="🎛️ プロパティ" %}

| 名前            | 説明                                                                                 | 使用法                                                           |
| ------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------- |
| **バリアント**     | <p>コンテナの全体的な外観を定義するスタイルバリアントを選択します。<br><a href="#variant-definition">詳細を読む</a></p> | コンテンツの提示が簡潔なボックス型かカード風かどれがデザインのビジョンに合うか、該当するバリアントを選択してください。   |
| **背景画像**      | コンテナの背景画像を設定します。                                                                   | コンテナの視覚的魅力を高め、伝えたいムードやテーマのトーンに寄与する画像をアップロードするか URL を指定してください。 |
| **オーバーレイカラー** | 背景画像の上にカラーオーバーレイを適用します。                                                            | 背景画像の上に微妙に重ねる色を選択し、コンテナ内のコンテンツの視認性と読みやすさを保ちます。                |
| {% endtab %}  |                                                                                    |                                                               |

{% tab title="バリアントの定義" %}
その **`バリアント`** Avonni Container コンポーネントのプロパティは、コンテナの基本的なスタイルと構造を定義する重要な機能であり、その中のコンテンツがどのように表示され、操作されるかの基盤を設定します。以下に各バリアントの詳細な説明を示します：

**スタンダード**

* **説明：** その **`標準`** バリアントは基本的でミニマルなスタイルを提供します。デフォルト設定は追加の装飾要素を持たないクリーンでストレートなコンテナを提供します。このバリアントは、余分な視覚的強調を必要としないシンプルなレイアウトを要求するコンテンツに理想的です。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FsS0mSr4vOh59hFBFU4PI%2F2023-11-14_21-24-00.jpg?alt=media&#x26;token=0e529d58-de01-4e4b-ae14-ebcffe04d9fd" alt=""><figcaption><p>スタンダードの例</p></figcaption></figure>

* **使用法：** 次のバリアントを使用してください **`標準`** バリアントは、複雑でなくクリーンな表示が必要な場合に使用します。コンテンツ自体を際立たせたい場合に最適で、コンテナによる追加のスタイリングを避けたい情報ブロックやテキスト中心のセクション、またはコンテナよりもコンテンツに焦点を当てたい場合に適しています。

**ボックス**

* **説明：** その **`ボックス`** バリアントは通常、境界線やわずかなシャドウによってコンテナにより明確な定義を加え、コンテンツが「ボックス化」されているような外観を与えます。このバリアントは奥行きと強調感を生み、ページ上でより目立つようにします。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FXKWZBA4TNxEu7wuZrKba%2F2023-11-14_21-23-01.jpg?alt=media&#x26;token=f87034fa-4701-4fc3-906b-c0ae25cd9126" alt=""><figcaption><p>ボックスの例</p></figcaption></figure>

* **使用法：** 次のバリアントを選択してください **`ボックス`** 目立たせたいコンテンツや重要なお知らせ、またはページの異なるセクションを視覚的に区切りたい場合にこのバリアントを選んでください。ボックススタイルは複数のコンテナ要素が明確に分離されるレイアウトや、ダッシュボード風のインターフェースを作成する場合に有益です。

**カード**

* **説明：** その **`カード`** バリアントは通常、シャドウ（浮いているように見せる効果）、角の丸み、場合によってはより明確な境界線を特徴とするカード風レイアウトにコンテナを変換します。&#x20;

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FIGi0zPKOAtXUULrwoOlV%2F2023-11-14_21-21-42.jpg?alt=media&#x26;token=14567ca7-c9a9-4417-b64b-09b62b58822a" alt=""><figcaption><p>カードの例</p></figcaption></figure>

* **使用法：** その **`カード`** バリアントはプロフィール、製品説明、インタラクティブ要素など、個別に注目を集める必要のあるコンテンツブロックに理想的です。視覚的に魅力的なオプションや情報ブロックのグリッドを作成する際に優れた選択肢で、各カードがより大きなコレクションの一部としてコンテンツを保持します。このバリアントはレスポンシブデザインで特に効果的で、異なる画面サイズでもカードがうまく並び替えられます。

#### 要約

適切なものを選ぶことは **`バリアント`** Avonni Container のバリアント選択は、コンテナのスタイルをコンテンツの目的やページ全体の美観に合わせることに関するものです。装飾のないシンプルさである **`標準`**&#x306E;定義された境界線である **`ボックス`**&#x307E;たは現代的な魅力を持つ **`カード`**&#x306E;いずれを選んでも、それぞれが Salesforce Experience Cloud 環境内でコンテンツをフレーム化し強調する独自の方法を提供します。
{% endtab %}

{% tab title="🎨 スタイリング" %}

| 名前        | 説明                                  | 使用法                                                        |
| --------- | ----------------------------------- | ---------------------------------------------------------- |
| **パディング** | コンテナの内部スペースを調整します。                  | コンテナのコンテンツが端から適切な間隔を持つようにパディング値を定義し、可読性と美観を向上させます。         |
| **サイズ**   | コンテナの寸法とコンテンツのオーバーフロー動作を設定します。      | 特定の幅と高さの値を設定し、コンテンツが寸法を超えた場合にコンテナがどのように扱うか（オーバーフロー）を決定します。 |
| **背景**    | 色を設定し、背景画像のサイズと配置を調整して背景をカスタマイズします。 | これらの設定を構成して、背景がコンテナのコンテンツに対して望ましい視覚的インパクトと配置を達成するようにします。   |
| **ボーダー**  | コンテナの境界線の外観を定義します。                  | 境界線のサイズ、スタイル、色、および角の半径を選択してカスタマイズし、コンテナの全体的なデザインに合うようにします。 |

{% endtab %}
{% endtabs %}