1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【Power Apps】コンテナを利用して画面レイアウトを柔軟に対応しよう

Posted at

概要

Power Appsでは要素を自由に配置できますが
大量のコントロールを追加するとレイアウトが崩れやすくなります。
そこで便利なのが 「コンテナー(Container)」 です。
この記事では、コンテナーの基本的な使い方から実践的なレイアウト設計のコツまでを解説します。

コンテナーとは??

コンテナーは複数のコントロールをまとめて管理できるレイアウト用のコンポーネントです。
主な特徴は以下のとおりです。

  • グループ化:関連するコントロールを一つのブロックにまとめられる
  • 自動配置:子要素の配置を自動で調整できる(横並びや縦並び)
  • レスポンシブデザイン対応:画面サイズに応じて自動調整できる

:bulb: ポイント
「コンテナー」は従来の「グループ」とは異なり、動的にサイズや配置を調整できます!

コンテナーの種類

Power Apps には 3種類のコンテナーが用意されています。

  • コンテナー
  • 水平コンテナー
  • 垂直コンテナー

image.png

各コンテナーについて簡単に解説を行っていきます!

コンテナー

コンテナーは グループ化 に近い役割を果たします。
コンテナー内でコントロールを自由に配置することが可能です。

コンテナー上の 「+」 を押すとコントロールが選択できます。

image.png

↓コンテナー内にボタンを配置↓ (背景は色付けしています)
image.png

コンテナーを選択した状態でコントロールを追加することで
コンテナー内に配置を行えます。

image.png

↓コンテナー内にテキストラベルを追加配置↓
image.png

コンテナーの X,Y の設定を変更するだけでコンテナー内にあるコントロールも
配置を変更することが可能です。

コンテナーのプロパティ X=0、Y=0 の状態
image.png

コンテナーのプロパティ X=300、Y=300 の状態
image.png

このようにコンテナーの配置設定を変更するだけでコンテナー内にある
ボタンとテキストラベルも一緒に動かすことができます。

水平コンテナー

水平コンテナーは、子要素(ボタン、ラベル、テキスト入力など)を
自動的に横並びに配置できるコンテナーです。

image.png

コンテナー内にアイコンを追加していきました。
最新で追加したものは自動的に一番右に配置されるようになっています。

プロパティで 幅(伸縮可能) の設定を オン にすると
設定を変更することなく親プロパティのサイズに合わせて自動的に幅を変更してくれます。
メニューコントロール等を配置したい時などにとても便利な機能となっています!

image.png

高さパディング などはその他のコントロールと同様に設定を行ってください。

垂直コンテナー

垂直コンテナーは、子要素(ボタン、ラベル、テキスト入力など)を
自動的に縦並びに配置できるコンテナーです。

こちらは上から下に向けて配置されるようになっています。

image.png

水平コンテナーの時の同様に親プロパティのサイズに合わせた高さ変更を行いたい場合は
プロパティの 高さ(伸縮可能) の設定を オン にすることで可能です。

image.png

まとめ

コンテナーを上手に活用することでレイアウトの設計が行いやすくなり
レスポンシブな対応も可能になります!

  • コンテナーは自由なレイアウト向け
  • 水平コンテナーは横並び配置のナビゲーションバーなど向け
  • 垂直コンテナーは縦並び配置の入力フォームなど向け

コンテナを適切に使い分けることで
より柔軟で使いやすいアプリを作成することができます!
ぜひ試してみてください:relaxed:

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?