DXブログ

TOP > DXソリューション > DXブログ

GeneXusで項目のディスクリプションを左詰めにする方法

はじめに

こんにちは、GeneXus開発者の永野と大串です！

今回のブログでは、項目のディスクリプションを左詰めにする方法について解説します。このブログは対話形式で進めるので、読みやすく、楽しく学べるように工夫しました。
環境：GeneXus18、WorkWithPlus（WWP）使用

ディスクリプションを左詰めにするための基本設定

👤

大串
永野さん、GeneXusで項目のディスクリプションを左詰めにしたいんですけど、どうすればいいか教えてください。
👤

永野
お！それなら簡単だよ。今から順番に教えるね。
👤

大串
お願いします。
👤

永野
まず、ディスクリプションに適用されているクラスを変更しよう。
👤

大串
クラスを変更するんですね。具体的にはどうすればいいですか？
👤

永野
うん、GeneXusではディスクリプションにデフォルトでcontrol-labelというクラスが適用されてるんだ。このクラスに対して、CSSを使ってtext-align: left;を追加すればOKだよ。

ステップ①：control-labelクラスに「text-align: left;」のCSSを追加しよう

WorkWithPlusDS

👤

大串
なるほど、それでディスクリプションが左詰めになるんですね。
👤

永野
そう！画面を見て確認してみよう！

参考画面

👤

大串
性別だけ右詰めのままになっちゃいました！どうすればいいでしょうか。。

ステップ②：項目ごとに適用されてるクラスに、「text-align: left;」のCSSを追加しよう

👤

永野
原因としては、プロンプト等を使用しているとデフォルトで適用されてるクラスが異なるからなんだ。プロンプトを使用している場合には、【MergeLabelCell】が当たっているよ
👤

大串
当たっているクラスは、どこから確認できるんですか？
👤

永野
項目に適用されてるクラスは、Web Layoutタブのプロパティから確認ができるよ

参考画面

👤

大串
ここから確認できるんですね！
👤

永野
うん、そうしたらステップ①同様にMergeLabelCellクラスに「text-align: left;」のCSSを追加してみよう！

以下、実装例

👤

大串
なるほど。これで左詰めに設定できるんですね。設定してみます！

参考画面

👤

大串
全て左詰めになりました。ありがとうございます！
👤

永野
いえいえ、どういたしまして！ぜひやってみてくださいね。

おわりに

初投稿となりましたが、これから開発中に出た開発ノウハウを、ブログを通して皆様にもお伝えしていきます！
皆様にとって有益な情報発信を目指してまいりますので、今後ともどうぞよろしくお願いいたします。

まとめ要点
・ディスクリプションの左詰め:
  CSSを利用し、control-labelクラスに「text-align: left;」を追加
・CSSクラスの確認方法:
  特定の項目で、適用されているクラスをWeb Layoutから確認する

注意!!
今回の内容ですが、デフォルトで適用されている共通のクラスに追加する方法を説明させていただきました。
注意点として、対象のクラスが適応されている項目すべてが左詰めされてしまいます。