#レスポンシブレイアウトを作成していきましょう。
今回は各コンテナーの画面サイズに合わせた制御方法を具体的にしていきます。
前回ブログのアプリ設定を行わないとレスポンシブレイアウトに出来ませんので、Power Appsのレスポンシブレイアウトをやってみた ～準備編～を確認してから、下記設定をおこなってください
完成した動画はこちらです。
https://youtu.be/jrLtI4fYW-o
##全体像を把握
レスポンシブレイアウトに対応した画面を作成する場合には、コンテナーを入れ子にして組み合わせていきます。
私のやりたかったレスポンシブレイアウトは、
上部にHeaderContainer（青）
中央にBodyContainer（水色）
BodyContainer内部にContainerを4つ配置して、SizeBreakpoints（※１）により明示的に幅を可変させます。
下部にFooterContainer（赤）
これらをアプリの表示幅に合わせて伸縮させることでした。
（※１）SizeBreakpointsとは、「App」が持っているアプリ幅の規定値のプロパティで、
タブレットサイズで作成した場合、0-600pixがSmall、600-900pixがMeidum、900-1200pixがLarge、それ以上がExtraLareと設定されています。
##SizeBreakpointsを表示するテキストラベルを作成する
このSizeBreakpointsに応じて、明示的にサイズや表示・非表示を制御するので、BreakpointsTextという名前のラベルを作成し、アプリ幅を取得して今がどのサイズに該当するのか（Small、Mediumなど）文字表示させます。
まず画面のどこでも構いませんので、ラベルを配置してTextプロパティに下記スクリプトを記述します。
App.Width<=First(App.SizeBreakpoints).Value,"Small",
App.Width<=Last(FirstN(App.SizeBreakpoints,2)).Value,"Medium",
App.Width<=Last(FirstN(App.SizeBreakpoints,3)).Value,"Large",
"Extra Large"
)```
この状態でアプリのプレビュー（F5）を行い、ブラウザのウィンドウ幅を可変させると表示される文字が変わると思います。
##Screen1を可変するように設定
**Screen1**の下記プロパティを設定します。
Height：`Max(App.Height, If(App.Width < App.Height, App.DesignHeight, App.DesignWidth))`
Width：`Max(App.Width, If(App.Width < App.Height, App.DesignWidth, App.DesignHeight))`
##外部コンテナーを配置
コンテナーは置いただけでは伸縮しませんので、設定をしていきます。
**Screen1**に、
- - -
・**HeaderContainer**という名前で**「水平コンテナー」**を配置して、下記プロパティに値をセット
X：`0`
Y：`0`
Height：`100`
Width：`App.Width`
Fill：`RGBA(56, 96, 178, 1)`
※App.Widthはアプリの幅を取得しますので、Widthに設定することによりアプリの幅に合わせてコンテナー幅が伸縮するようになります。
レスポンシブを確認しやすくするためにFillで背景を青にしています。
- - -
・**BodyContainer**という名前で**「水平コンテナー」**を配置して、下記プロパティに値をセット
X：`0`
Y（※１）：`HeaderContainer.Height`
Height（※２）：`(App.Height-HeaderContainer.Height)-FooterContainer.Height`
Width：`App.Width`
Fill：`RGBA(204, 231, 246, 1)`
（※１）HeaderContainerのY座標をBodyContainerのY座標に指定することで、高さが可変してもすぐ下に配置されます。
（※２）BodyContainerは高さも伸縮しますので、アプリの高さからヘッダーの高さとフッタの高さを引いた値が指定されるようにしています。<font color="Red">FooterContainerを画面に配置しないとエラー表示になりますが、この時点では無視してください。</font>
レスポンシブを確認しやすくするためにFillで背景を水色にしています。
- - -
・**FooterContainer**という名前で**「水平コンテナー」**を配置して、下記プロパティに値をセット
X：`0`
Y（※3）：`App.Height-FooterContainer.Height`
Height：`100`
Width：`App.Width`
Fill：`RGBA(172, 62, 11, 1)`
（※３）アプリの高さからFooterContainerの高さを引いた値を指定することで、高さが可変しても画面下部の固定された位置に配置されます。レスポンシブを確認しやすくするためにFillで背景を赤色にしています。
##BodyContainer内部にコンテナーを配置
4つのコンテナーをSizeBreakTextの値で、Large以上であれば4列、Mediumなら2列、Smallなら1列に制御します。ここでのSmallはスマホサイズ、Mediumはタブレット、LargeやExtraLargeはブラウザを想定しています。
- - -
・1つ目**InputContainerName**という名前で**「水平コンテナー」**を配置して、下記プロパティに値をセット
FillPortions（※１）：`1`
LayoutMinWidth（※２）：`Switch(BrakePointText.Text,"Small",App.Width,"Medium",App.Width/2,App.Width/4)`
Fill：`RGBA(187, 221, 140, 1)`
（※１）１を指定することで幅が伸縮可能になります。
（※２）コンテナーの最小幅の指定です。
Switch文を使い、
先ほど作成したBrakePointTextの文字が、
Small（スマホサイズ）だったらアプリの幅を指定して、画面幅いっぱいになるので1列、
Medium（タブレット）だったらアプリの幅を２で割ることにより、2行2列に指定
それ以外の場合には、アプリの幅を4で割ることにより、1行4列に指定し、コントロールしています。
☆さらにコンテナー内にラベルを挿入して、わかりやすく幅サイズを表示させます
Text：`"InputContainerName" & InputContainerName.Width`
FillPortions：`1`
- - -
,<font color="red">**以下は、１つ目同様に残り3つのコンテナーを作成していきます。**</font>
- - -
・2つ目**InputContainerAddress**という名前で**「水平コンテナー」**を配置して、下記プロパティに値をセット
FillPortions（※１）：`1`
LayoutMinWidth（※２）：`Switch(BrakePointText.Text,"Small",App.Width,"Medium",App.Width/2,App.Width/4)`
Fill：`RGBA(250, 155, 112, 1)`
（※１）１を指定することで幅が伸縮可能になります。
（※２）コンテナーの最小幅の指定です。
Switch文を使い、
先ほど作成したBrakePointTextの文字が、
Small（スマホサイズ）だったらアプリの幅を指定して、画面幅いっぱいになるので1列、
Medium（タブレット）だったらアプリの幅を２で割ることにより、2行2列に指定
それ以外の場合には、アプリの幅を4で割ることにより、1行4列に指定
コンテナー内にラベルを挿入して、わかりやすく幅サイズを表示させます
Text：`"InputContainerAddress" & InputContainerAddress.Width`
FillPortions：`1`
- - -
・3つ目**InputContainerTel**という名前で**「水平コンテナー」**を配置して、下記プロパティに値をセット
FillPortions（※１）：`1`
LayoutMinWidth（※２）：`Switch(BrakePointText.Text,"Small",App.Width,"Medium",App.Width/2,App.Width/4)`
Fill：`RGBA(203, 102, 102, 1)`
（※１）１を指定することで幅が伸縮可能になります。
（※２）コンテナーの最小幅の指定です。
Switch文を使い、
先ほど作成したBrakePointTextの文字が、
Small（スマホサイズ）だったらアプリの幅を指定して、画面幅いっぱいになるので1列、
Medium（タブレット）だったらアプリの幅を２で割ることにより、2行2列に指定
それ以外の場合には、アプリの幅を4で割ることにより、1行4列に指定
コンテナー内にラベルを挿入して、わかりやすく幅サイズを表示させます
Text：`"InputContainerTel" & InputContainerTel.Width`
FillPortions：`1`
- - -
・4つ目**InputContainerFax**という名前で**「水平コンテナー」**を配置して、下記プロパティに値をセット
FillPortions（※１）：`1`
LayoutMinWidth（※２）：`Switch(BrakePointText.Text,"Small",App.Width,"Medium",App.Width/2,App.Width/4)`
Fill：`RGBA(136, 160, 209, 1)`
（※１）１を指定することで幅が伸縮可能になります。
（※２）コンテナーの最小幅の指定です。
Switch文を使い、
先ほど作成したBrakePointTextの文字が、
Small（スマホサイズ）だったらアプリの幅を指定して、画面幅いっぱいになるので1列、
Medium（タブレット）だったらアプリの幅を２で割ることにより、2行2列に指定
それ以外の場合には、アプリの幅を4で割ることにより、1行4列に指定
コンテナー内にラベルを挿入して、わかりやすく幅サイズを表示させます
Text：`"InputContainerFax" & InputContainerFax.Width`
FillPortions：`1`
- - -
以上で、すべてのコンテナー設定が完了しました。
アプリのプレビューで横幅を変えてみて、実際に幅に応じてレイアウトが可変するか試してみてください。
次回以降は、コンテナ内に各コントロールを設置して、具体的なアプリの形にしていきたいと思います。
長文ですが、読んでいただいて、ありがとうございました。