Power Apps：キャンバスアプリでレスポンシブ レイアウト対応のアプリを作成する際の設計方針(3)

フォームの場合

まずはコントロールがフォームの場合です。

フォームの場合、標準でレスポンシブ対応しています。
よって、コンテナーを使用する必要はありません。

実装方法としては、以下の流れです。

フォームの設定

1. サイズの幅・高さを設定

   コントロールの幅・高さを設定します。
   以下を設定する事が多いです。

   幅（Width）

   Parent.Width

   高さ（Height）

   Parent.Height

2. フォーム配下のカードの設定

   「幅で合わせる」をオン

   フォーム配下にあるすべてのカードについて、幅で合わせるをオンにします。

   

   上記の設定を行うことで、ブラウザの幅に応じて、縦の位置関係は可変となります。

   

フォーム以外の場合

続いて、コントロールがフォーム以外の場合です。
フォーム以外の場合、標準でレスポンシブ対応していませんので、水平コンテナーを使用します。

実装方法としては、以下の流れです。

水平コンテナーを追加

横の位置関係を設定する際には、「水平コンテナー」コントロールを用います。

水平コンテナーの設定

1. サイズの幅・高さを設定

   水平コンテナーの幅・高さを設定します。
   以下を設定する事が多いです。

   幅（Width）

   Parent.Width

   高さ（Height）

   Parent.Height

2. 「折り返す」をオンに設定

   折り返すプロパティをオンに設定します。

   この設定で、ブラウザの幅が水平コンテナー配下に配置した各コントロールの幅の合計値より小さくなった場合に、 コントロールが折り返し（=横に配置されたのが、縦に配置）されます。

コンテナー配下のコントロールの設定

コンテナー配下に追加したコントロールについては、幅を固定したい場合と、可変にした場合の2通りがあります。

それぞれについて、以下で説明します。

1. 幅を固定にしたい場合

   
   

   コントロールの「幅（伸縮可能）」をオフ

   コントロールの「幅」に値を記入

   幅を固定にしたい場合は、コンテナー配下にコントロールを追加し、幅（伸縮可能）プロパティをオフ、コントロールの幅に特定の値を記入します。

   

2. 幅を可変にしたい場合

   
   

   コントロールの「幅（伸縮可能）」をオン

   コントロールの「最小値」に値を設定

   幅を可変にしたい場合は、コンテナー配下にコントロールを追加し、幅（伸縮可能）プロパティをオンとし、最小幅に値を設定します。

   

上記の設定を行うことで、ブラウザの幅に応じて、縦の位置関係は可変となります。