コンテナーモジュール

[アーティクル]
07/31/2024

この記事では、コンテナーモジュールと、Microsoft Dynamics 365 Commerce のサイトページへの追加方法について説明します。

コンテナーモジュールは、その中の他のモジュールをホストするモジュールです。コンテナーモジュールの主な目的は、それに対して設定されているプロパティを通じて、内部に含まれるモジュールのレイアウトを定義することです。たとえば、それらのモジュールは 2 列、3 列、4 列、または 6 列のレイアウトで左右に並んで表示できます。また、コンテナーの幅に限定することも、画面全体に表示することもできます。ヘッダーは、各コンテナーモジュールに追加することもできます。

コンテナー、2 スロットのコンテナー、3 スロットのコンテナーの 3 つのコンテナーモジュールがサポートされています。任意のタイプのモジュールを、これらのコンテナー内に配置できます。

メモ

コンテナーの幅に限定できるよう、モジュールを常にコンテナーモジュール内に配置することをお勧めします。

E コマースのコンテナーモジュールの例

サイト作成者は 3 つのモジュールが並んで表示される、3 列のレイアウトを必要とします。したがって、サイト作成者は 3 スロットのコンテナータイプのコンテナーモジュールを使用します。
サイト作成者は 6 つのモジュールが並んで表示される、6 列のレイアウトを必要とします。したがって、サイト作成者はその中に 6 つの列がある包含タイプのコンテナーを使用します。
サイト作成者は、ページにモジュールを配置しますが、画面全体に表示する必要はありません。したがって、サイト作成者はコンテナーモジュールにモジュールを追加し、コンテナーの幅プロパティをコンテナーに適合に設定します。

次の図は、Commerce サイトビルダーのカルーセルモジュールを含むコンテナーモジュールの例を示しています。この例では、コンテナーモジュールの幅プロパティを全画面表示に設定しています。

コンテナーモジュールの例。

コンテナーモジュールプロパティ

プロパティ名	値	説明
ヘッダー	ヘッダーテキストとヘッダータグ (H1、H2、H3、H4、H5、または H6)	オプションのヘッダーをコンテナーに提供できます。既定では、H2 ヘッダータグがヘッダーに使用されます。ただし、アクセシビリティ要件を満たすようにタグを変更できます。
幅	コンテナーに適合または全画面	値がコンテナーに適合 (規定値) に設定されている場合、コンテナ―内のモジュールは、コンテナ―の幅に限定されます。値が全画面に設定されている場合、モジュールはコンテナ―幅に限定されませんが、全画面モードになります。
列数	1、2、3、4、6、または 12	このプロパティは、コンテナーの列の数を定義します。コンテナーには最大 12 列を含めることができます。

2 スロットのコンテナー

2 スロットのコンテナ― タイプは、2 列のレイアウト用に最適化されています。このタイプのコンテナーには 2 つのスロットがあり、中にあるモジュールを並べて表示できます。

追加のプロパティを使用して、異なる表示ポート (モバイルデバイス、タブレット、コンピューターなど) のレイアウトを最適化できます。表示ポートごとに、各列の幅を定義できます。次の列幅の設定が使用可能です。

75%/25% – 最初のモジュールの列幅は 75%、2 番目のモジュールの列幅は 25% です。 25%/75% のオプションも使用可能です。
50%/50% – 両方のモジュールの列幅が等しくなります。
67%/33% – 最初のモジュールの列幅は 67%、2 番目のモジュールの列幅は 33% です。 33%/67% のオプションも使用可能です。
100% – 両方のモジュールともフル列幅となります。したがって、モジュールは単一の列に垂直に積み上げられます。この単一列のレイアウトは 2 スロットのコンテナ― タイプの目的に反しますが、一部の表示ポート (たとえば、モバイルデバイスなどの超小型表示ポート) に適している場合があります。

2 スロットのコンテナープロパティ

プロパティ名	値	説明
ヘッダー	ヘッダーテキストとヘッダータグ	オプションをコンテナーに提供できます。
超小型表示ポートコンフィギュレーション	25%/75%、75%/25%、50%/50%、67%/33%、33%/67%、または 100%	このプロパティは、超小型表示ポートのレイアウトを定義します。
小さな表示ポートコンフィギュレーション	25%/75%、75%/25%、50%/50%、67%/33%、33%/67%、または 100%	このプロパティは、モバイルデバイスなどの小さな表示ポートのレイアウトを定義します。
中規模な表示ポートコンフィギュレーション	25%/75%、75%/25%、50%/50%、67%/33%、33%/67%、または 100%	このプロパティは、タブレットなどの中規模な表示ポートのレイアウトを定義します。
大きな表示ポートコンフィギュレーション	25%/75%、75%/25%、50%/50%、67%/33%、33%/67%、または 100%	このプロパティは、コンピューターなどの大きな表示ポートのレイアウトを定義します。

3 スロットのコンテナー

3 スロットのコンテナ― モジュールタイプは、3 列のレイアウト用に最適化されています。

追加のプロパティを使用して、異なる表示ポートのレイアウトを最適化できます。表示ポートごとに、各列の幅を定義できます。次の列幅の設定が使用可能です。

33%/33%/33% – 3 つのモジュールすべての列幅が等しくなります。
50%/25%/25% – 最初のモジュールの列幅は 50%、残りの 2 つのモジュールの各列幅は 25% です。 25%/50%/25% および 25%/25%/50% のオプションも使用可能です。
16%/16%/67% – 最初の 2 つのモジュールの各列幅は 16%、3 番目のモジュールの列幅は 67% です。 16%/67%/16% および 67%/16%/16% のオプションも使用可能です。

3 スロットのコンテナープロパティ

プロパティ名	値	説明
ヘッダー	ヘッダーテキストとヘッダータグ	オプションのヘッダーをコンテナーに追加できます。
超小型表示ポートコンフィギュレーション	33%/33%/33%、50%/25%/25%、25%/50%/25%、25%/25%/50%、16%/16%/67%、16%/67%/16%、または 67%/16%/16%	このプロパティは、超小型表示ポートのレイアウトを定義します。
小さな表示ポートコンフィギュレーション	33%/33%/33%、50%/25%/25%、25%/50%/25%、25%/25%/50%、16%/16%/67%、16%/67%/16%、または 67%/16%/16%	このプロパティは、モバイルデバイスなどの小さな表示ポートのレイアウトを定義します。
中規模な表示ポートコンフィギュレーション	33%/33%/33%、50%/25%/25%、25%/50%/25%、25%/25%/50%、16%/16%/67%、16%/67%/16%、または 67%/16%/16%	このプロパティは、タブレットなどの中規模な表示ポートのレイアウトを定義します。
大きな表示ポートコンフィギュレーション	33%/33%/33%、50%/25%/25%、25%/50%/25%、25%/25%/50%、16%/16%/67%、16%/67%/16%、または 67%/16%/16%	このプロパティは、コンピューターなどの大きな表示ポートのレイアウトを定義します。