Power Apps 文字や画像を斜めに表示する【解説動画付き】
Power Apps では標準の機能で斜めに文字や画像を表示する機能は付いていませんが、HTMLテキストを使用すると斜め文字を表現することができます。
完成イメージ
こんな感じに斜め表示が出来ます。
上記サンプルは以下の手順で作成できます。
作成手順
HTMLテキストを挿入
・挿入 > テキスト > HTMLテキスト とクリックします。
フォントサイズを大きくする
HtmlText.Size
60
表示テキストを入力
表示したいテキストを<p>タグで囲んでHtmlTextプロパティに入力します。
HtmlText.HtmlText
"<p>おすすめ動画！</p>"
テキストをdiv で囲む
HtmlText.HtmlText
"<div>
<p>おすすめ動画！</p>
</div>"
style="" "" を追加してスタイル指定の準備
HtmlText.HtmlText
"<div style="" "">
<p>おすすめ動画！</p>
</div>"
transform: rotate() で文字を斜めにする
HtmlText.HtmlText
"<div style="" transform: rotate(20deg); "">
<p>おすすめ動画！</p>
</div>"
background-color: で表示領域を可視化
文字を斜めにすると、表示領域からはみ出してしまいます。
微調整が必要なので、わかりやすいように背景色を設定します。
HtmlText.HtmlText
"<div style="" transform: rotate(20deg); background-color: red; "">
<p>おすすめ動画！</p>
</div>"
はみ出た部分を調整
width や padding を使用してはみ出た部分が収まるように調整します。
HtmlText.HtmlText
"<div style=""
transform: rotate(20deg);
background-color: red;
width: 600px;
padding: 0px 0px 0px 0px ;
"">
<p>おすすめ動画！</p>
</div>"
背景色を削除
調整が完了したので、背景色を削除します。
HtmlText.HtmlText
"<div style=""
transform: rotate(20deg);
width: 600px;
padding: 0px 0px 0px 0px ;
"">
<p>おすすめ動画！</p>
</div>"
完成！
うまくいっていれば画像のようにできます。
[Advanced] 逆向きも可能
rotate(20deg) の数値をマイナスに設定すれば逆向きも可能です。
[Advanced] 画像も対応可能
画像も斜めにすることが出来ます。
[Advanced] スライダー連動で操作可能
rotate(20deg) の値をスライド値と連動させれば、スライダーで回転させることもできます。
[Advanced] タイマーでアニメーション可能
タイマーの値や変数を経由して連動させれば、アニメーションもさせることができます。
解説動画もあります
Youtubeに解説動画をアップロードしています。こちらも合わせて参考にしてみてください。
まとめ
横幅や余白の調整が少し面倒ですが、このように斜めに表示させることが可能です。
ただ、少々手間がかかるため乱用は避けたいですね。もっと他に優先するべき機能がないか思い返してもいいかもしれません。
PR
アプリ作成支援や導入支援サービスを提供しています。
Power Apps / Power Automate 技術支援サービス | ZEE CitizenDevSupport
