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

こんにちは。アーティサン株式会社の小刀稱（ことね）です。

Power Appsはブラウザで動作するアプリのため、PC・スマホで操作することが可能です。

しかし、１つのアプリでPC・スマホの両方に対応するには「レスポンシブ レイアウト」という考え方で、アプリを設計する必要があります。

Power Appsのいくつかの種類では、標準でレスポンシブ レイアウトに対応しておりますが、キャンバスアプリでは非対応です。
※詳細は以下URLを参照してください。

Power AppsアプリをPCとスマホで操作したい時の対応方針

Power Appsでアプリを作成する際、PCとスマホの両方での操作を考慮してレスポンシブデザインに対応する必要があります。標準機能では対応していないキャンバス アプリの場合の解決方法とメリットデメリットを解説します。

そこで今回は、Power Apps キャンバスアプリでレスポンシブ レイアウト対応のアプリを作成する際の設計方針についてまとめてみました。

Power Appsでアプリを作成している方に向けた内容となっています。
また、難易度としては中級者向けとなっています。

※本記事を読む前に、先程紹介した記事（Power AppsアプリをPCとスマホで操作したい時の対応方針）を一読していただければ幸いです。

前回は、アプリの事前準備の箇所まで説明させていただきました。

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

Power Appsでレスポンシブを作る！：キャンバスアプリ標準機能ではできない、PC、スマホ版に対応した「レスポンシブ」に対応したアプリの作成をハンズオンで作ってみましょう！

今回は、実際にPower Apps キャンバスアプリでレスポンシブ レイアウトに対応するための設計方針について、具体的に説明していきます。

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

Power Apps キャンバスアプリでレスポンシブ レイアウトに対応するためには、以下3つの場合があると思います。

以下では、それぞれの場合おける設定方針を説明します。

縦の位置関係を変えたくない時

はじめに、縦の位置関係を変えたくない（=固定にしたい）場合です。

例としては、ヘッダーメインコンテンツフッターなどの位置関係が挙げられます。
この3つをPC・スマホにかかわらず、同じ位置に配置したい場合は、こちらを参考にしてください。

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

垂直コンテナーを追加

縦の位置関係を設定する際には、垂直コンテナーコントロールを用います。

上記の設定を行うことで、ブラウザの幅に関わらず、縦の位置関係は変わらない状態となります。

おわりに

少し長くなってしまいましたので、本日はここまで！

今回は、実際にPower Apps キャンバスアプリでレスポンシブ レイアウトに対応するための設計方針について、「縦の位置関係を変えたくない時」の説明を行いました。

次回は、引き続き「横の位置関係」について説明していきます。
ここまで読んでくださり、ありがとうございます。

小刀稱知哉

🖊小刀稱知哉さんのブログ一覧はこちら

大分県出身（温泉大好き）、現在は茨城県在住

1990年生まれ

30才でメーカーの技術営業からIT業界にジョブチェンジ!!!

趣味は読書（最近書道を始めました）

主にMicrosoftのローコード（SharePoint・Power Platform）に関するに関する営業活動や設計、開発などを担当しております！

（最近はCopilot Studioについても勉強中）

Microsoft MVPを受賞させていただきました！

持ってる資格はPL-200/PL-300/PL-400/PL-600/MS-700/AZ-104/AZ-305/SC-200/SC-100