Power Apps のコンテナでレイアウトを組むとき、子要素の整列とサイズ配分を制御するプロパティを理解しているかどうかで、完成度が大きく変わります。この記事ではオートレイアウトで使う主要プロパティを一通り整理します。
整列を制御する2つのプロパティ
LayoutAlignItems：交差軸方向の整列
LayoutAlignItems は、コンテナの主軸（方向）と垂直に交差する軸上での子要素の並び方を制御します。縦方向（Vertical）のコンテナなら左右方向、横方向（Horizontal）のコンテナなら上下方向の整列が対象です。設定できる値は Start・Center・End・Stretch の4択です。
Start にすると子要素がコンテナの左端（縦コンテナの場合）に寄ります。Center にすると中央揃え、End にすると右端寄せになります。Stretch はコンテナの幅いっぱいに子要素を引き伸ばします。個人的に一番使うのは Stretch で、子要素の幅を親コンテナに合わせて自動的に広げてくれるので、画面幅が変わっても崩れにくいレイアウトが作れます。
LayoutJustifyContent：主軸方向の配置
LayoutJustifyContent は、主軸方向（縦コンテナなら上下、横コンテナなら左右）での子要素全体の配置方法を制御します。設定できる値は Start・Center・End・SpaceBetween・SpaceAround の5択です。
SpaceBetween が特に便利で、最初の子要素をコンテナの先頭に、最後の子要素をコンテナの末尾に配置し、残りを等間隔に並べます。たとえばヘッダーバーの左端にタイトル、右端に更新ボタンを置きたいとき、横コンテナに2つの要素を入れて LayoutJustifyContent を SpaceBetween にするだけで実現できます。私のアプリでも cntBI_1stL（KPIカードの上段コンテナ）でこのパターンをよく使っています。Gap で間隔を細かく調整するより、SpaceBetween のほうがスッキリ書けます。
サイズ配分を制御するプロパティ
FillPortions：比率でスペースを分割する
FillPortions は子要素に設定するプロパティで、コンテナ内の余白を比率で分け合う仕組みです。たとえば左カラムに FillPortions: 3、右カラムに FillPortions: 2 と設定すると、利用可能なスペースを3:2で分割します。全体幅が変わっても比率は保たれるので、レスポンシブ対応に非常に便利です。
よくある使い方は「左側にサイドメニュー、右側にメインコンテンツ」の2カラムレイアウトです。サイドメニューに FillPortions: 1、メインコンテンツに FillPortions: 3 と設定すれば、画面幅に関わらず常に1:3の比率が維持されます。Width に直接数値を書くよりはるかに管理が楽で、画面サイズが変わるたびに計算し直す手間がなくなります。
固定サイズとFillPortionsの組み合わせ
FillPortions は固定サイズと組み合わせて使うとさらに強力になります。たとえばヘッダーの高さを Height: 60 で固定し、残りのボディ部分に FillPortions: 1 を設定すると、ヘッダーは常に60pxを確保しつつ、ボディが残りの高さをすべて占有します。画面の高さが変わってもヘッダーは60pxのまま、ボディだけが伸び縮みします。
この組み合わせは、固定ヘッダー＋スクロール可能なボディというよくある画面レイアウトの基本パターンになっています。FlexibleHeight プロパティでも同様のことが実現できますが、FillPortions のほうが直感的に比率をコントロールできるので私はこちらをよく使います。
間隔・余白を制御するプロパティ
GapとPaddingの違いを押さえる
Gap はコンテナ内の子要素同士の間隔をピクセルで指定します。一方 Padding はコンテナ自身の内縁と子要素の間の余白です。Gap は子要素間の隙間、Padding はコンテナの壁と中身の間の余白です。
たとえばカード一覧で各カードの間に16pxの隙間を空けたい場合は Gap: 16 を設定します。一覧全体の外側にも余白が欲しいときは PaddingLeft・PaddingRight などを追加します。Gap だけで全部やろうとすると、最初と最後の要素の外側に余白が出せないので、役割を分けて使うのが正解です。
MinimumWidthとMinimumHeight：崩れを防ぐ最小サイズ
FillPortions や Flexible Width・Height を使うと、画面が極端に小さくなったときにコントロールが潰れて表示が崩れることがあります。これを防ぐのが MinimumWidth と MinimumHeight です。たとえば MinimumWidth: 200 と設定しておくと、どんなに親コンテナが縮んでも子要素の幅は200px未満にはなりません。
ボタンやラベルなど、一定以下のサイズになるとテキストが読めなくなるコントロールには積極的に設定することをおすすめします。設定しておかないと、タブレットや小さいウィンドウで開いたときに想定外の崩れが起きることがあります。体感的に、最小幅80〜120px程度を目安にしていることが多いです。
スクロールと折り返し
Overflow（Scroll）：コンテナをスクロール可能にする
子要素の合計サイズがコンテナの表示領域を超えた場合の挙動を制御するのが Overflow プロパティです。Overflow: Scroll に設定すると、コンテナの範囲を超えた分はスクロールで表示できるようになります。縦方向と横方向でそれぞれ独立して設定できます。
よくある使い方は、画面下部に固定フッターを置きつつ、メインコンテンツ部分だけをスクロールさせたい場合です。ボディ部分のコンテナに Overflow: Scroll を設定し、FillPortions で残りの高さを占有させれば、フッターが画面外に消えることなくボディだけがスクロールする構造が作れます。Power Apps はギャラリーのスクロールが標準ですが、コンテナ単位でスクロールを制御できると設計の幅が大きく広がります。
Wrap：横コンテナでの折り返し
横方向（Horizontal）のオートレイアウトコンテナで Wrap を有効にすると、子要素が横幅に収まらない場合に次の行に折り返します。タイル状のカードレイアウトや、ボタンが増えたときに自動で折り返すツールバーを作るときに便利です。
注意点として、Wrap を使うと子要素の高さが行ごとに変わる場合があります。各行の高さを揃えたい場合は LayoutAlignItems: Stretch と組み合わせて使うと整いやすいです。
重なりを使うテクニック
Manual Layout内でのZ順活用
オートレイアウトは子要素を一列に並べる仕組みなので、コントロールを重ねるデザインには向いていません。重なりが必要な場合は Manual Layout のコンテナを使い、ツリービューでのコントロールの順序（Z順）を利用します。ツリービューで下にあるコントロールほど画面手前に表示されます。
よくある使い方は、画像の上にテキストを重ねるヒーローバナーや、グラフの上にアイコンや数値ラベルを重ねるKPIカードです。Manual Layout コンテナの中で X・Y・Z 順を使い分けると、オートレイアウトだけでは実現できないリッチなデザインが作れます。
コンテナの使い方全般についてはPower Apps コンテナ完全ガイドでまとめて解説しているので、あわせて参照してください。
プロパティの全体像をまとめる
ここまで解説したプロパティを表で整理します。
| プロパティ | 設定場所 | 主な使い道 |
|---|---|---|
| LayoutAlignItems | コンテナ | 交差軸方向の整列（Start/Center/End/Stretch） |
| LayoutJustifyContent | コンテナ | 主軸方向の配置（SpaceBetween等） |
| FillPortions | 子要素 | 余白を比率で分割 |
| Gap | コンテナ | 子要素間の間隔（ピクセル） |
| Padding（各辺） | コンテナ | コンテナ内縁の余白 |
| MinimumWidth/Height | 子要素 | 最小サイズの保証 |
| Overflow | コンテナ | スクロール有無の制御 |
| Wrap | コンテナ | 横コンテナでの折り返し |
これらのプロパティは単体で使うより、組み合わせて使うことで真価を発揮します。たとえば「LayoutAlignItems: Stretch ＋ FillPortions ＋ MinimumWidth」の組み合わせは、レスポンシブなカラムレイアウトの定番セットです。最初から全部覚えようとせず、まず LayoutAlignItems と Gap だけ試してみて、物足りなくなったら他のプロパティを加えていくと身につきやすいです。
コンテナの基本概念から学びたい場合は座標配置とコンテナの違いを解説した記事が入口になります。また、手動レイアウトとオートレイアウトのどちらを選ぶかの判断基準は手動レイアウトとオートレイアウトの使い分けの記事で詳しく扱っています。
まとめ
整列と配置を制御するプロパティは数が多いように見えますが、役割ごとに整理すると覚えやすくなります。LayoutAlignItems と LayoutJustifyContent が並び方、FillPortions と Gap・Padding が間隔とサイズ、Overflow と Wrap がはみ出し時の挙動です。この分類で頭に入れておくと、実際にレイアウトを組むときにどのプロパティを触ればいいかがすぐ判断できます。市民開発とはこういう地道な知識の積み重ねだと思っています。一つひとつ実際のアプリで試しながら身につけていきましょう。
