これを赤くしてみましょう。先ほど配置したボタンのプロパティのClassの既定の「Button」の後ろに、半角スペースを空けて「btn-danger」と追記します。記述した際に、「テーマクラスが見つかりません」とポップアップが出ますが、気にせず「はい」を選択します。Panelを保存後に、念のため使用されているテーマ(Carmine)を確認すると、先ほど作成したbtn-dangerが追加されています。classがTrueになっていますが、そのままで構いません。ビルド後、ボタンが赤色に変わっていることが確認できました。カーソルを合わせると色も変わります。このように、Bootstrapにはボタンの書式を設定するクラスが存在しており、GeneXusでもクラスを記述することによって簡単にデザインに変化をつけることができます。赤以外に設定することのできる色は下記の5色です。btn-primarybtn-successbtn-dangerbtn-warningbtn-infoまた「btn-link」を使用するとリンクの文字として表示することできます。規定で設定されているクラスのButtonをBtnに変更すると、立体感がなくなりフラットなボタンにすることも可能です。上の画像では緑色のsuccessボタンにはButton、赤色のdangerボタンにはBtnを使用しています。テキストブロックをボタンにする上記と同じクラスを使用して、テキストブロックをボタンにすることも可能です。ボタンのサイズを変更するBootstrapのクラスを使用することで、ボタンの大きさを変えることも可能です。大きなサイズにする時は「btn-lg」、小さなサイズにする時は「btn-sm」というクラスを使用します。サイズが変わりましたね。背景色のクラスと組み合わせることももちろん可能です。「btn-block」を使用するとボタンの横幅をブロック要素内で100%で表示することができます。レスポンシブなデザインで大活躍しそうです。activeとdisabled最後にボタンを押したときのactive状態と、ボタンを使用不可にするdisabledというクラスをご紹介します。activeではボタンが通常よりも濃くなり、disabledでは色が薄く、ボタンを押すことができなくなります。イベントと組み合わせることでうまく利用することができそうですね。まとめ今回はボタンの実装のお話をしましたが、Bootstrapのクラスを使うことでページングやナビゲーション、グリッドのリストもサクッとオシャレに実装することができそうです。そちらはまた別の機会でご紹介できたらと思います。GeneXus15U12ではBootstrap3が使用されているため、背景色を変える「btn-secondary」「btn-light」「btn-dark」、枠線の色を指定する「btn-outline-**」といったBootstrap4のクラスは通常は使用できません。Bootstrap3のボタンのサイズを変更する「btn-xs」というクラスは適用できますが、Bootstrap4で廃止されたため使用は控えましょう。日本でリリースされたばかりのGeneXus16ではきっとBootstrap4が使用されているはず......?期待ですね!この記事を読んだ人は、こちらの記事も読んでいます。Watsonで画像解析アプリを作ってみたGeneXus開発費用の求め方教えます。建設資材のコスト予測。