コンテナー レイアウト

重要

このドキュメントはレガシと見なされます。 アダプティブ カードのコンテナー レイアウトに関連する包括的な情報とリソースについては、 アダプティブ カードのドキュメント ハブを参照してください。

Adaptive Cards ドキュメント ハブには、完全で最新のリファレンス ドキュメント、更新されたアダプティブ カード Designer、組み込みの JSON 例、設計のベスト プラクティス、アダプティブ カード機能の詳細なリリース履歴が用意されています。 詳細については、 アダプティブ カードのドキュメント ハブと新しいアダプティブ カード更新プログラムの概要に関するページを参照してください。

Container、Column、TableCell、アダプティブ カード自体などのコンテナーでは、次の 3 種類のレイアウトがサポートされています。

• Layout.Stack は要素を互いに積み重ね、既定のレイアウトです。
• Layout.Flow は要素を水平方向に分散し、必要に応じて複数の行にラップします。
• Layout.AreaGrid は、任意の要素に設定できる grid.area プロパティを通じて要素を配置できる名前付きareasにコンテナーを分割します。

Layout.Stack

要素を重ね合うレイアウト。 Layout.Stack は、アダプティブ カードとすべてのコンテナーで使用される既定のレイアウトです。

Layout.Stack レイアウトのプロパティを次に示します。

名前	必須	型	説明
type	✔️	String	Layout.Stack である必要があります。
targetWidth		String	レイアウトを使用する必要があるカード幅を制御します。 targetWidthが指定されていない場合、要素はすべてのカード幅でレンダリングされます。 targetWidthを使用すると、使用可能な水平方向のスペースにレイアウトを適応させる応答性の高いカードを作成できます。 詳細については、「 アダプティブ カードの応答性の高いレイアウト」を参照してください。 使用できる値: VeryNarrow、 Narrow、 Standard、 Wide、 atLeast:VeryNarrow、 atMost:VeryNarrow、 atLeast:Narrow、 atMost:Narrow、 atLeast:Standard、 atMost:Standard、 atLeast:Wide、 atMost:Wide

Layout.Flow

要素を水平方向に広げて、必要に応じて複数の行にラップするレイアウト。

Layout.Flowを使用して、使用可能な水平領域の量を気にすることなく、画像などの要素のリストをレイアウトします。 要素の幅と配置は、必要に応じて調整できます。 各行は自動的に適切な高さを取得し、列と行間の間隔は構成可能であり、自動的に適用されます。

例

左上の配置

カード

ペイロード

{
    "type": "AdaptiveCard",
    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.5",
    "layouts": [
        {
            "type": "Layout.Flow",
            "maxItemWidth": "130px",
            "horizontalItemsAlignment": "Left"
        }
    ],
    "body": [
        {
            "type": "Image",
            "url": "images/guitar1.jpeg",
            "style": "RoundedCorners"
        },
        {
            "type": "Image",
            "url": "images/adaptivecards1.jpeg",
            "style": "RoundedCorners"
        },
        {
            "type": "Image",
            "url": "images/cup1.jpeg",
            "style": "RoundedCorners"
        },
        {
            "type": "Image",
            "url": "images/developer1.jpeg",
            "style": "RoundedCorners"
        },
        {
            "type": "Image",
            "url": "images/painting1.jpeg",
            "style": "RoundedCorners"
        }
    ]
}

水平方向と垂直方向の中央揃え

カード

ペイロード

{
    "type": "AdaptiveCard",
    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.5",
    "layouts": [
        {
            "type": "Layout.Flow",
            "maxItemWidth": "80px",
            "horizontalItemsAlignment": "center",
            "verticalItemsAlignment": "center"
        }
    ],
    "body": [
        {
            "type": "Image",
            "url": "images/guitar1.jpeg",
            "style": "RoundedCorners"
        },
        {
            "type": "Image",
            "url": "images/adaptivecards1.jpeg",
            "style": "RoundedCorners"
        },
        {
            "type": "Image",
            "url": "images/painting1.jpeg",
            "style": "RoundedCorners"
        },
        {
            "type": "Image",
            "url": "images/cup1.jpeg",
            "style": "RoundedCorners"
        }
    ]
}

各行の使用可能な領域を常に埋める

カード

ペイロード

{
    "type": "AdaptiveCard",
    "version": "1.5",
    "layouts": [
        {
            "type": "Layout.Flow",
            "itemWidth": "150px",
            "itemFit": "Fill",
            "horizontalItemsAlignment": "Left"
        }
    ],
    "body": [
        {
            "type": "Image",
            "url": "images/guitar1.jpeg",
            "style": "RoundedCorners"
        },
        {
            "type": "Image",
            "url": "images/adaptivecards1.jpeg",
            "style": "RoundedCorners"
        },
        {
            "type": "Image",
            "url": "images/painting1.jpeg",
            "style": "RoundedCorners"
        },
        {
            "type": "Image",
            "url": "images/guitar2.jpeg",
            "style": "RoundedCorners"
        }
    ]
}

ヒント

itemFit: fillで maxItemWidth プロパティを使用しないでください。 定義上、 maxItemWidth では、項目が一定の幅を超えないようにします。これは、その行の各要素をわずかに拡大することで、行の残りの使用可能な領域を埋めるのと互換性がありません。 代わりに itemWidth プロパティを使用します。

Layout.Stack レイアウトのプロパティを次に示します。

名前	型	既定値	説明
type	String		Layout.Stack である必要があります。
columnSpacing	String	"Default"	項目間のスペース。 使用できる値: None、 ExtraSmall、 Small、 Default、 Medium、 Large、 ExtraLarge、 Padding
horizontalItemsAlignment	String	"Center"	コンテナーのコンテンツを水平方向に配置する方法を制御します。 使用できる値: Left、 Center、 Right
itemFit	String	"Fit"	項目をコンテナー内に収める方法を制御します。 使用できる値: Fit、 Fill
itemWidth	String		<number>px形式の各項目の幅 (ピクセル単位)。 maxItemWidthまたはminItemWidth、またはその両方が設定されている場合は使用しないでください。 許可される値: <number>px
maxItemWidth	String		<number>px形式の各項目の最大幅 (ピクセル単位)。 itemWidthが設定されている場合は使用しないでください。 許可される値: <number>px
minItemWidth	String	0	<number>px形式の各項目の最小幅 (ピクセル単位)。 itemWidthが設定されている場合は使用しないでください。 許可される値: <number>px
rowSpacing	String	Default	項目の行間のスペース。 使用できる値: None、 ExtraSmall、 Small、 Default、 Medium、 Large、 ExtraLarge、 Padding
targetWidth	String		レイアウトの幅カード使用する必要があるコントロール。 targetWidthが指定されていない場合、要素はすべてのカード幅でレンダリングされます。 targetWidthを使用すると、使用可能な水平方向のスペースにレイアウトを適応させる応答性の高いカードを作成できます。 詳細については、「 アダプティブ カードの応答性の高いレイアウト」を参照してください。 使用できる値: VeryNarrow、 Narrow、 Standard、 Wide、 atLeast:VeryNarrow、 atMost:VeryNarrow、 atLeast:Narrow、 atMost:Narrow、 atLeast:Standard、 atMost:Standard、 atLeast:Wide、 atMost:Wide
verticalItemsAlignment	String	Top	コンテナーのコンテンツを垂直方向に配置する方法を制御します。 使用できる値: Top、 Center、 Bottom

Layout.AreaGrid

要素を配置できる名前付き領域にコンテナーを分割するレイアウト。

アダプティブ カード、Container、Column、またはTableCellの要素をグリッドに整理するには、Layout.AreaGridを使用します。 Layout.AreaGrid応答性の高いカードを設計する場合に役立ちます。1 つのコンテナーに複数のLayout.AreaGrid レイアウトを定義し、異なるカード幅でターゲットにして、使用可能な幅に応じて実行時にレイアウト間を自動的に切り替えることができます。 コンテナー内の要素をグリッド内の特定の領域に割り当てるには、その grid.area プロパティを設定する必要があります。

例

カード

ペイロード

{
    "type": "AdaptiveCard",
    "version": "1.5",
    "layouts": [
                {
            "type": "Layout.AreaGrid",
            "targetWidth": "atLeast:Standard",
            "columns": [ 20, 40 ],
            "areas": [
                {
                    "name": "area1",
                    "columnSpan": 2
                },
                {
                    "name": "area2",
                    "column": 3
                },
                {
                    "name": "area3",
                    "row": 2
                },
                {
                    "name": "area4",
                    "column": 2,
                    "row": 2
                },
                {
                    "name": "area5",
                    "column": 3,
                    "row": 2
                }
            ]
        },
        {
            "type": "Layout.AreaGrid",
            "targetWidth": "atLeast:narrow",
            "columns": [
                50
            ],
            "areas": [
                {
                    "name": "area1",
                    "columnSpan": 2
                },
                {
                    "name": "area2",
                    "row": 2
                },
                {
                    "name": "area3",
                    "row": 2,
                    "column": 2
                },
                {
                    "name": "area4",
                    "row": 3
                },
                {
                    "name": "area5",
                    "row": 3,
                    "column": 2
                }
            ]
        }
    ],
    "body": [
        {
            "type": "Container",
            "grid.area": "area1",
            "style": "emphasis",
            "showBorder": true,
            "roundedCorners": true,
            "items": [
                {
                    "type": "TextBlock",
                    "text": "Area 1",
                    "wrap": true
                },
                {
                    "type": "TextBlock",
                    "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
                    "wrap": true
                }
            ]
        },
        {
            "type": "Container",
            "grid.area": "area2",
            "style": "good",
            "showBorder": true,
            "roundedCorners": true,
            "items": [
                {
                    "type": "TextBlock",
                    "text": "Area 2",
                    "wrap": true
                }
            ],
            "height": "stretch"
        },
        {
            "type": "Container",
            "grid.area": "area3",
            "style": "accent",
            "showBorder": true,
            "roundedCorners": true,
            "items": [
                {
                    "type": "TextBlock",
                    "text": "Area 3",
                    "wrap": true
                }
            ]
        },
        {
            "type": "Container",
            "grid.area": "area4",
            "style": "attention",
            "showBorder": true,
            "roundedCorners": true,
            "items": [
                {
                    "type": "TextBlock",
                    "text": "Area 4",
                    "wrap": true
                }
            ]
        },
        {
            "type": "Container",
            "grid.area": "area5",
            "style": "warning",
            "showBorder": true,
            "roundedCorners": true,
            "items": [
                {
                    "type": "TextBlock",
                    "text": "Area 5",
                    "wrap": true
                }
            ]
        }
    ]
}

Layout.AreaGrid レイアウトのプロパティを次に示します。

名前	型	既定値	説明
type	String		Layout.AreaGrid である必要があります。
areas	オブジェクトの配列		グリッド レイアウト内の領域。 許可される値: GridArea
columns	数値または文字列の配列		グリッド レイアウト内の列。 <number>px 形式を使用して、使用可能な幅のパーセンテージまたはピクセル単位で定義されます。
columnSpacing	String	Default	列間のスペース。 使用できる値: None、 ExtraSmall、 Small、 Default、 Medium、 Large、 ExtraLarge、 Padding。
rowSpacing	String	Default	行間のスペース。 使用できる値: None、 ExtraSmall、 Small、 Default、 Medium、 Large、 ExtraLarge、 Padding。
targetWidth	String		レイアウトの幅カード使用する必要があるコントロール。 itemWidthが設定されている場合は使用しないでください。 targetWidthが指定されていない場合、要素はすべてのカード幅でレンダリングされます。 targetWidthを使用すると、使用可能な水平方向のスペースにレイアウトを適応させる応答性の高いカードを作成できます。 詳細については、「 アダプティブ カードの応答性の高いレイアウト」を参照してください。 使用できる値: VeryNarrow、 Narrow、 Standard、 Wide、 atLeast:VeryNarrow、 atMost:VeryNarrow、 atLeast:Narrow、 atMost:Narrow、 atLeast:Standard、 atMost:Standard、 atLeast:Wide、 atMost:Wide

GridArea

Layout.AreaGrid レイアウト内の領域を定義します。

GridArea配列のプロパティを次に示します。

名前	型	既定値	説明
columns	番号	1	領域の開始列インデックス。 列インデックスは 1 から始まります。
columnSpan	番号	1	領域がスパンする必要がある列の数を定義します。
name	String		エリアの名前。 この領域に要素を配置するには、その grid.area プロパティを領域の名前と一致するように設定します。
row	番号	1	領域の開始行インデックス。 行インデックスは 1 から始まります。
rowSpan	番号	1	領域がスパンする必要がある行の数を定義します。

コンテナー レイアウトを使用して応答性の高いレイアウトを実装する

コンテナー レイアウトを使用して応答性の高いレイアウトを実装できます。複数のレイアウトを 1 つのコンテナーに関連付けることができ、それぞれが特定のカード幅専用です。 実行時に、適切なレイアウトが自動的に使用され、使用可能な幅の要素が配置されます。

たとえば、一般的なレイアウトでカードを定義する場合は、次のようになります。

• 左側に画像がある
• 画像の右側のテキスト

ただし、十分な水平領域がない場合は、画像の下にテキストを表示する必要があります。

これは、次の Layout.AreaGridを使用して行うことができます。

カード

ペイロード

{
    "type": "AdaptiveCard",
    "version": "1.5",
    "layouts": [
        {
            "type": "Layout.AreaGrid",
            "targetWidth": "atLeast:standard",
            "columns": [
                60
            ],
            "areas": [
                {
                    "name": "imageArea"
                },
                {
                    "name": "textArea",
                    "column": 2
                }
            ]
        }
    ],
    "body": [
        {
            "type": "Image",
            "url": "images/adaptivecards1.jpeg",
            "grid.area": "imageArea",
            "style": "RoundedCorners",
            "targetWidth": "atLeast:narrow"
        },
        {
            "type": "Container",
            "grid.area": "textArea",
            "items": [
                {
                    "type": "TextBlock",
                    "text": "Adaptive Cards",
                    "wrap": true,
                    "size": "ExtraLarge",
                    "weight": "Bolder"
                },
                {
                    "type": "TextBlock",
                    "text": "The simple, lightweight card format to power your ideas.",
                    "wrap": true
                }
            ]
        }
    ]
}

メカニズム

ここでは、layouts プロパティは、カード全体で定義されます。

{
    "type": "Layout.AreaGrid",
    "targetWidth": "atLeast:standard",
    "columns": [
        60
    ],
    "areas": [
        {
            "name": "image"
        },
        {
            "name": "text",
            "column": 2
        }
    ]
}

これは、次のことを意味します。

• カードの幅が少なくともstandard (Teams チャット内のカードの一般的な幅に対応する) である場合にのみ、グリッド レイアウトでカード内の要素を整理します。
  • カードの幅がstandard未満の場合は、既定のレイアウトである Layout.Stack を使用します。
• グリッド レイアウトには、使用可能な領域の 60% を使用する必要がある列が少なくとも 1 つ含まれます。 グリッドには ( areas の定義方法に応じて) 他の列が含まれる場合がありますが、定義されていないため、それぞれが残りの領域の等しい部分を共有します。
• 次の 2 つの領域が定義されています。
  • 画像の 1 つ。グリッドの最初の列と最初の行にマップされます。
  • 1 つはテキスト用で、2 番目の列と最初の行をカバーします。

ヒント

layouts プロパティを指定する必要はありません。 明示的なレイアウトが指定されていない場合、コンテナーは Layout.Stack レイアウトを使用します。

カードの本文の要素には、grid.area プロパティを通じてグリッド領域が割り当てられます。

{
    "type": "Container",
    "grid.area": "textArea", // The text container is assigned to the textArea
    "items": [
      ...
    ]
}

{
    "type": "Image",
    "url": "...",
    "grid.area": "imageArea", // The Image is assigned to the imageArea
    "style": "RoundedCorners",
    "targetWidth": "atLeast:narrow" // Also notice the image is set to not display at all at the "very narrow" width
}

コード サンプル

名前	説明	.Node.js	.NET
カードの書式設定	ボットを使用してカードでサポートされるさまざまな書式設定を示すサンプル。	表示	表示

関連項目

• アダプティブ カードの応答性の高いレイアウト
• スキーマ エクスプローラー