アダプティブ カード デザイナーについてご紹介するシリーズ記事です。
6回目は、アダプティブ カード デザイナーで利用できるパーツの1つである「ColumnSet」をご紹介します。
はじめに
過去のシリーズ記事については以下をご覧ください。
- アダプティブ カード デザイナーの使い方：その1 操作画面の説明 - JBS Tech Blog
- アダプティブ カード デザイナーの使い方：その2 操作ボタンの説明 - JBS Tech Blog
- アダプティブ カード デザイナーの使い方：その3 操作方法の説明 - JBS Tech Blog
- アダプティブ カード デザイナーの使い方：その4 アダプティブ カードを新規作成してみる - JBS Tech Blog
- アダプティブ カード デザイナーの使い方：その5 パーツの紹介（CodeBlock） - JBS Tech Blog
また、本記事を執筆している2026年5月時点で、2つのアダプティブ カード デザイナーが存在しています。
本記事で記載するアダプティブ カード デザイナーのリンクは、以下からご確認ください。
ColumnSetとは
ColumnSetは、アダプティブ カード内で複数のパーツを横に並べて表示するためのパーツです。
通常、アダプティブカード デザイナーでは、縦にパーツを並べることしかできません。
ColumnSetを利用することで、「TextBlock」と「Rating」を横並びに表示させることが出来ます。
ColumnSet 自体は表示内容を持たず、Column（列）を定義し、その中にパーツを配置することで、横並びの表示をさせることができます。
列の増やし方
既に記載したように、ColumnSetはアダプティブカード デザイナー上で、配置しただけでは機能しません。配置した後に、列を増やす必要があります。
ここでは、列を増やす方法を記載します。
アダプティブカード デザイナー上に、ColumnSetを配置
ColumnSetのパーツをアダプティブカード デザイナー上に配置します。
ColumnSetを選択して、右側に表示される「Add a columun」を選択
「Add a columun」を選択すると列が増えます。
デフォルトは0列のため、パーツを横に並べたい場合は最低2列にする必要があります。
以下画像は、「Add a columun」を2回選択したものです。「Empty Column」が2つになっていることが分かります。
※ 中央のスペースは列と列の間の空間で、利用者側で設定は出来ない部分です
「Empty Column」に、横並びにしたいパーツを配置
「Empty Column」に、横並びにしたいパーツを配置します。
以下画像は、左の「Empty Column」に「TextBlock」、右の「Empty Column」に「Rating」を配置したものです。
「CARD STRUCTURE」部分では、ColumnSet が「2 columns」と表示されており、この ColumnSet の中に 2 つの 列（Column） が表示されていることが分かります。
設定可能箇所（ColumnSet）
「ColumnSet」で設定できるものは、以下4つのカテゴリに分かれています。
なお「Responsive layout」、「Layout」はこちらの記事で記載している内容と同様のため、本記事では記載を割愛します。
- ColumnSet
- Responsive layout
- Layout
- Selection action
ColumnSet
「ColumnSet」は、ColumnSet自体に対する基本設定部分です。
今回は「Style」と「Bleed」をご紹介します。
Style
「Style」はColumnSetの背景色を設定できる箇所です。
例えば、「Good」を選択すると、背景色が緑色になります。
また、影響範囲は「ColumnSet」部分のみです。「ColumnSet」に入っていないパーツは、影響を受けません。
以下画像は、「ColumnSet」外に「TextBlock」を配置して表示させる内容を「ColumnSet範囲外」と記載したものです。
Bleed
「Bleed」は、ColumnSet に背景色を設定した際、その背景色をアダプティブカードの端まで広げて表示するかどうかを制御する設定箇所です。
選択してチェックを付けると、背景色がアダプティブカードの端まで広がります。
- 「Bleed」選択前
- 「Bleed」選択後*1
こちらも「Style」で記載した内容と同じように、影響範囲は「ColumnSet」部分のみです。
Selection action
「Selection action」は、「ColumnSet」自体が選択された際の動作を設定する箇所です。
「ColumnSet」内にあるどのパーツを選択しても、設定されたアクションが動作するようになります。
画像の場合、「ColumnSet」内にある「TextBlock」部分*2を選択しても、「Rating」部分を選択しても、設定されたアクションが動作するようになります。
設定可能箇所（Column）
「Column」は、「ColumnSet」列を作った際に表示されるものです。それぞれの「Column」にパーツを配置することで、アダプティブ カード内に横並びで表示させることができます。
「Column」で設定できるものは、以下6つのカテゴリに分かれています。
なお、「Responsive layout」と「Selection action」はColumnSetで記載した内容と同様のため、こちらでは記載を割愛します。
- Column
- Responsive layout
- Layout
- Style
- Background image
- Selection action
Column
「Column」は、Column自体に対する基本設定部分です。
ここでは「Initially visible」をご紹介します。
Initially visible
「Initially visible」は、カードを表示する際に、その列を最初から表示するかどうかを制御する設定箇所です。
チェックを外すと、アダプティブカードが初期表示される際、その列は非表示となります。
Layout
「Layout」は、アダプティブカード内で、他の要素との間隔や区切り線を入れるかどうかを設定できる箇所です。
ここでは「Height」と「Width」をご紹介します。
Height
「Height」は列の高さを指定する設定箇所です。
「Automatic」と「Strech」の2種類から設定出来ます。
「Automatic」を選択すると、列の中にあるパーツの高さによって、自動調整されます。
「Strech」を選択すると、「ColumnSet」で高さ設定がされている場合、その高さに合わせて列が伸びます。
そのため、「ColumnSet」で高さ設定されていない場合は、「Strech」を選択しても「Automatic」と変わらないのでご注意ください。
Width
「Width」は列の横幅がどう決まるかを設定する箇所です。
「Automatic」、「Stretch」、「Weighted」、「Pixels」の4種類から設定出来ます。
「Automatic」は、列の中にあるパーツの長さによって、自動的に幅が決まります。パーツに対して、必要最小限となるような幅になります。
「Stretch」は、複数列がある際、幅が列ごとに均等になります。均等にしたい場合は、すべての列で「Stretch」になっている必要があります。
「Weighted」は、列ごとの幅の比率を設定できます。
「Pixels」は、列の横幅をピクセル単位で設定できます。
Style
「Style」はColumnに対して視覚的な設定を出来る箇所です。
ここでは「Show border」をご紹介します。
「Show border」はColumnに対して外枠を表示するものです。
選択してチェックを付けると、Columnに対して外枠が表示されます。
- 「Show border」選択前
- 「Show border」選択後
Background image
「Background image」は、Columnの背景に画像を表示するための設定です。「URL」に画像URLを入力することで、画像を表示させることが出来ます。
※ URLが必要なため、ローカル上にある画像は設定できない点にご注意ください。
終わりに
アダプティブ カード デザイナーの使い方シリーズの6回目として、カード内で要素を横並びに配したい場合に便利なColumnSetについてご紹介しました。
ColumnSetを利用する際の参考になれば幸いです。
