この記事の3行要約
- レスポンシブ レイアウト対応の設計方針のうち、「縦の位置関係を固定したい」場合の実装方法を解説（シリーズ2本目）
- ヘッダー・メインコンテンツ・フッターを固定したい場合は、垂直コンテナーを追加し幅・高さをParent.Width／Parent.Heightに設定する
- コンテナー配下のコントロールは、高さを固定するか可変にするかでプロパティの設定方法が異なる
Power Appsのレイアウト設計や内製化の進め方でお悩みの際は、以下のサービスもご参考ください。
こんにちは。アーティサン株式会社の小刀稱（ことね）です。
小刀稱 知哉ことね ともや
得意領域
Power PlatformやSharePointを中心に設計・開発・アドバイス・教育まで幅広く担当しています。内製化をご希望の場合はお気軽にお問い合わせください！
保有資格
Power Appsはブラウザで動作するアプリのため、PC・スマホで操作することが可能です。
しかし、１つのアプリでPC・スマホの両方に対応するには「レスポンシブ レイアウト」という考え方で、アプリを設計する必要があります。
Power Appsのいくつかの種類では、標準でレスポンシブ レイアウトに対応しておりますが、キャンバスアプリでは非対応です。
※詳細は以下URLを参照してください。
そこで今回は、Power Apps キャンバスアプリでレスポンシブ レイアウト対応のアプリを作成する際の設計方針についてまとめてみました。
Power Appsでアプリを作成している方に向けた内容となっています。
また、難易度としては中級者向けとなっています。
※本記事を読む前に、先程紹介した記事（Power AppsアプリをPCとスマホで操作したい時の対応方針）を一読していただければ幸いです。
前回は、アプリの事前準備の箇所まで説明させていただきました。
今回は、実際にPower Apps キャンバスアプリでレスポンシブ レイアウトに対応するための設計方針について、具体的に説明していきます。
Power Apps キャンバスアプリでレスポンシブ レイアウト対応のアプリを作成する際の設計方針
Power Apps キャンバスアプリでレスポンシブ レイアウトに対応するためには、以下3つの場合があると思います。
縦の位置関係を変えたくない時 ← 今回はこちら
横の位置関係を変えたい時
横の位置関係を変えたくない時
以下では、それぞれの場合おける設定方針を説明します。
縦の位置関係を変えたくない時
はじめに、縦の位置関係を変えたくない（=固定にしたい）場合です。
例としては、ヘッダーメインコンテンツフッターなどの位置関係が挙げられます。
この3つをPC・スマホにかかわらず、同じ位置に配置したい場合は、こちらを参考にしてください。
実装方法としては、以下の流れです。
垂直コンテナーを追加
縦の位置関係を設定する際には、垂直コンテナーコントロールを用います。
垂直コンテナーの設定
サイズの幅・高さを設定
垂直コンテナーの各プロパティを設定します。
以下プロパティを設定する事が多いです。
幅（Width）
Parent.Width
高さ（Height）
Parent.Height
「折り返す」をオフに設定
折り返すプロパティをオフに設定します。
折り返す
コンテナー配下のコントロールの設定
コンテナー配下に追加したコントロールについては、
ヘッダー・フッターのような高さを固定したい場合と、メインコンテンツのように高さを可変にした場合の2通りがあります。
それぞれについて、以下で説明します。
高さを固定にしたい場合
サイズの幅を設定
Parent.Width
コントロールの高さ（伸縮可能）をオフ
コントロールの「高さ」に値を記入
高さを固定にしたい場合は、コンテナー配下にコントロールを追加し、高さ（伸縮可能）プロパティをオフ、コントロールの高さに特定の値を記入します。
高さを固定にしたい場合
高さを可変にしたい場合
サイズの幅を設定
コントロールの幅を設定します。
以下を設定する事が多いです。幅（Width）
Parent.Width
コントロールの「高さ（伸縮可能）」をオン
高さを可変にしたい場合は、コンテナー配下にコントロールを追加し、高さ（伸縮可能）プロパティをオンにします。
高さを可変にしたい場合
上記の設定を行うことで、ブラウザの幅に関わらず、縦の位置関係は変わらない状態となります。
おわりに
少し長くなってしまいましたので、本日はここまで！
今回は、実際にPower Apps キャンバスアプリでレスポンシブ レイアウトに対応するための設計方針について、「縦の位置関係を変えたくない時」の説明を行いました。
次回は、引き続き「横の位置関係」について説明していきます。
ここまで読んでくださり、ありがとうございます。
【このシリーズの過去回一覧】
-
Power Apps：キャンバスアプリでレスポンシブ レイアウト対応のアプリを作成する際の設計方針 第1回｜事前準備と設定変更・Width数式の基本
-
Power Apps：キャンバスアプリでレスポンシブ レイアウト対応のアプリを作成する際の設計方針 第2回｜垂直コンテナーで縦の位置関係を固定する方法
-
Power Apps：キャンバスアプリでレスポンシブ レイアウト対応のアプリを作成する際の設計方針 第3回｜横の位置関係を画面幅で可変させる方法（水平コンテナーの折り返し設定）
-
Power Apps：キャンバスアプリでレスポンシブ レイアウト対応のアプリを作成する際の設計方針 第4回｜水平コンテナーで横の位置関係を固定する方法【完結編】
Power Apps・Power Automateを含む内製化の推進や教育支援をご検討の際は、以下より各サービスをご確認ください。