【PowerApps】ほぼコピペでOK！背景にグラデーションを設定する方法
Microsoft Power Apps（以下PowerApps）は複数色の設定ができません。（2022/12/17現在）
ですが、工夫すればグラデーションを設定可能。スタイリッシュなデザインにしちゃいましょう！
グラデーションを設定する方法
簡易版
設定方法はHTML Textコントロールを使用して、CSSスタイルを適用するだけ。以下の手順でグラデーションが適用できます。
手順
- HTML Text を挿入
- HTML Textの幅と高さを調整
- "HTML Text - HTMLText - background - linear-gradient"を設定
詳細版
1. HTML Text を挿入
HTML Textコントロールをアプリに挿入します。画面上部にあるコマンドバーの挿入をクリックして、検索ウィンドウに"HTML"と入力。ディスプレイの中にHTMLテキストがあるので、クリックして画面に挿入します。
2. HTML Textの幅と高さを調整
HTML Textのサイズを設定して、グラデーションの範囲を決定します。HTMLテキストのWidthプロパティとHeightプロパティでサイズを変更可能。スクリーン画面と同じサイズにしたい場合は、以下のコードを設定します。
● Width：幅の設定
Screen1.Width
● Height：高さの設定
Screen1.Height
※Screen1には、HTMLテキストを配置したいスクリーン画面の名前を入力してください。
3. "HTML Text - HTMLText - background - linear-gradient"を設定
HTMLテキストにCSSスタイルを適用します。HtmlTextプロパティに、以下のコードを設定することで、適用可能。
● HtmlText：HTMLタグの設定
"<div style=""width:1366px; height:780px;background: linear-gradient(#FAD7A1, #E96D71);""></div>"
(#FAD7A1, #E96D71)の部分がグラデーションに設定する2色です。この部分を変更することで、好みのカラーに変更可能。今回はCoolHue 2.0を使って、グラデーションカラーを設定しました。WidthとHeightはスクリーン画面と同じサイズにしてください。
（おまけ）HTMLコードの解説
HTMLとは？CSSとは？
HTMLとは、ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）の略称です。Webサイトに埋め込んでいる文章の構成・役割をタグ（<>）を記述することで、設定できます。
CSSとは、カスケーディング・スタイル・シート（Cascading Style Sheets）の略称です。HTMLで設定したWebサイトの見た目を（プロパティ:値）で設定できます。
コードを詳細に見る
上記のコードを、HTMLとCSSに分解してみます。""はPowerApps独自の仕様です。通常のHTMLやCSSでは少し仕様が異なります。
● HTML
"<div></div>"
● CSS
style=""width:1366px; height:780px;background: linear-gradient(#FAD7A1, #E96D71);
<div></div>は、CSSを設定するための箱を用意しているイメージです。この箱がCSSを認識するためには、<div>の内部に設定したstyle=""にCSSを記述しないといけません。CSSで記述したコードの意味は、以下です。
width:1366px; → 幅の設定
height:780px; → 高さの設定
background: linear-gradient(#FAD7A1, #E96D71) → グラデーション背景の設定
プロパティの値は自由に変更可能です。
