ウィジェットの外観をスタイルエディタで変更する
スタイルエディタは、基本ビジュアルプロパティを編集するためのパネルです。たとえば、フォントの色やマージン、または枠線の太さを変更する際に使用します。［Interface］タブで、画面やブロックを開き要素を選択して、プロパティペインの［Styles］タブをクリックします。スタイルエディタパネルは、スタイルシートエディタでも使用可能で、エディタを使用して保存したスタイルを変更できます。
ウィジェットのスタイルを設定するには、Font、LayoutおよびBordersのオプションを使用します。以下は、スタイルエディタを使用して変更できる項目の概要です。
- Font
- スタイル（太字、イタリック、下線）、サイズ、色。
- レイアウト
- 幅、高さ、配置（左、中央、右）、背景色。マージン、間隔。選択した要素が該当する場合、WidthプロパティとMargin Leftプロパティの値はグリッドの列数になります。
- Borders
- 枠線の太さと色。角の丸み。
MarginsとBordersには、編集がどのようにウィジェットに適用されるかを示すアイコンがあります。
| アイコン | 意味 |
|---|---|
 |
値は、関連する他のすべてのプロパティに適用されます。 |
 |
値は、現在のプロパティのみに適用されます。 |
すべての変更は現在のウィジェットのみに適用されます。
他のウィジェットで同じスタイルを使用する場合は、スタイルを一連のプロパティ（クラス）として保存します。次に、スタイルを設定するウィジェットのスタイルエディタの［Style Classes］セクションにクラスを追加します。スタイルをクラスに昇格するには、モジュールにローカルテーマがある必要があります。
拡張可能な［Styles Properties Applied］セクションには、ウィジェットのすべてのスタイルが一覧表示されます。スタイルをクリックして、スタイル定義のスタイルシートエディタを開きます。
モジュールのThemeで直接CSSを編集することで、ビジュアル要素をうまく制御できます。
なお、CSSの詳細度のルールに従って、スタイルエディタでの編集がExtended Propertiesのstyleの値で上書きされる場合があります。ご注意ください。また、class拡張プロパティで追加されたクラスはエディタに表示されません。
使用例
ウィジェットの外観を変更してスタイルを保存し、アプリケーションの他のウィジェットに適用するためのスタイルエディタの使用例を以下に示します。
ウィジェットのスタイルを変更する
ウィジェットのスタイルを変更する方法を以下に示します。
- ウィジェットを（Web）画面にドラッグします。
- プロパティペインで［Styles］タブをクリックします。
- テキストを含む要素について、［Font］セクションでテキストプロパティを編集します。
- ［Color］フィールドを使用してカラーピッカーを開き、プロパティの色を設定します。
- ［Layout］で、幅、高さ、配置を変更します。
- ［Layout/Margin］と［Layout/Padding］で、外側と内側のスペースを調整します。
- ［Borders］セクションに枠線を追加し、角の丸みを調整します。
スタイルを保存する
スタイルをCSSクラスとして保存する方法を以下に示します。
- スタイルエディタでウィジェットを編集します。
- ［Style Classes］セクション（または［Styles Properties Applied］セクション）で［Save changes to reusable class］をクリックします。
- 開いているダイアログで、クラス名を入力します（
myStyleなど）。クラスによってすべてのスタイル要素がグループ化されます。 - 開いている［Style Sheet Editor］ウィンドウで［OK］を押します。
保存したスタイルを適用する
保存したスタイルをウィジェットに適用する方法を以下に示します。
- スタイルを適用するウィジェットをクリックします。
- ［Style Classes］セクションで、鉛筆アイコンをクリックします。
- スタイルリストをスペースで区切ってスタイルクラスに追加します。例:
BaseStyle1 BaseStyle2 myStyle
保存したスタイルを編集する
既存のCSSスタイルを編集する方法を以下に示します。
- 編集するスタイルを持つウィジェットをクリックします。
- ［Style Classes］セクション（または［Style Properties Applied］セクション）で、
myStyleなどのスタイル名をクリックします。 - 開いている画面で、埋め込まれているスタイルエディタのプロパティを編集します。
- 編集が終了したら、［OK］をクリックします。
スタイルをデフォルトにリセットする
ウィジェットのスタイルをデフォルト値にリセットする方法を以下に示します。
- ウィジェットを選択します。
- スタイルエディタで［Styles］に移動します。
- ［Style Properties Applied］の下にあるテキストボックスでCSSスタイルを削除します。
カスタムスタイルを保存した場合、スタイルエディタの［Styles > Style Classes］でカスタムスタイルを削除する必要があります。作成したスタイルとデフォルトのスタイルが不明な場合は、新しいウィジェットを作成し、［Style Classes］の下にあるスタイルを比較してください。