37 CSSによるUIコントロールのスタイル設定

セレクタ

複数のタイプのスタイルを定義できます。スタイルのタイプごとにセレクタに対する独自の表記法があります。

スタイル・クラスはクラス名に対応しています。慣例により、複数の単語で構成されたスタイル・クラス名の場合、単語間にハイフン(-)が使用されます。スタイル・クラス・セレクタの先頭にはドット(.)が付きます。

クラス・セレクタの例:

.button
.check-box
.scroll-bar

また、ノードのIDを介してノードに関連付けられたスタイルを定義することもできます。IDは、ノードのsetId()メソッドを使用して設定します。スタイル名は、先頭にハッシュ記号(#)が付いたIDです。たとえば、ID my-buttonを持つノードは、スタイル#my-buttonを使用してスキニングされます。

IDスタイル・セレクタの例:

#my-button
#shaded-hbox

複合セレクタを使用することもできます。一部のクラスには、下位クラスと呼ばれる独自のスタイル定義を設定できる要素が含まれます。たとえば、多くのUIコントロールには、ラベル用の下位クラスがあります。これらの定義は、スペースによって区切られた、クラスのセレクタと下位クラスのセレクタによって識別されます。

下位クラスのセレクタの例は、次のとおりです。

.check-box .label
.check-box .box
.radio-button .dot

擬似クラスを使用すると、ノードの状態(ノードにフォーカスが当たるタイミングなど)をカスタマイズできます。これらの定義は、コロン(:)によって区切られた、クラスのセレクタと状態の名前によって識別されます。

疑似クラスのセレクタの例は、次のとおりです。

.radio-button:focused
.radio-button:hover
.scroll-bar:vertical

ルールとプロパティ

スタイル定義のルールにより、クラスに関連付けられたプロパティに値を割り当てます。ルールのプロパティ名は、クラスのプロパティの名前に対応しています。複数の単語が含まれるプロパティ名は表記法により、ハイフン(-)を使用して単語が区切られます。JavaFXスタイル・シート内のスタイルのプロパティ名の先頭には-fx-が付けられます。プロパティの名前と値はコロン(:)によって区切られます。ルールはセミコロン(;)で終わります。

ルールの例は、次のとおりです。

-fx-background-color: #333333;
-fx-text-fill: white;
-fx-alignment: CENTER;

.rootスタイル・クラスは、Sceneインスタンスのルート・ノードに適用されます。シーン・グラフのすべてのノードはルート・ノードの下位ノードであるため、.rootスタイル・クラス内のスタイルは任意のノードに適用できます。

.rootスタイル・クラスには、UI内での一貫性を保持するために他のスタイルで使用できるプロパティが含まれます。たとえば、プロパティ-fx-focused-baseは.rootスタイル内に定義されています。このプロパティは、他のUIコントロールのスタイルにより、そのコントロールにフォーカスが当てられたときの色として使用されます。次の定義は、クラスCheckBoxのスタイルでこのプロパティを使用する方法を示しています。

.check-box:focused {
    -fx-color: -fx-focused-base;
}

デフォルトのスタイルのオーバーライド

スタイル・シートにスタイルを組み込み、これに異なるプロパティを割り当てることにより、デフォルトのスタイル・シート内のスタイルをオーバーライドできます。例37-4に、controlStyle2.cssのButtonクラスのスタイルを示します。

.button{
    -fx-text-fill: rgb(49, 89, 23);
    -fx-border-color: rgb(49, 89, 23);
    -fx-border-radius: 5;
    -fx-padding: 3 6 6 6;
}

この定義から、フォントの色、枠線の色、枠線の半径およびパディングが選択されます。ボタンの色とラベルのフォント・スタイルは、例37-3の.root定義から選択されます。このスタイルが設定されたボタンは、次のイメージのようになります。

クラス・スタイルの作成

クラス・スタイルの定義をスタイル・シートに追加することにより、クラス・スタイルを作成できます。例37-5では、controlStyle1.cssで.button1と呼ばれる新しいスタイルを定義しています。

.button1{
    -fx-text-fill: #006464;
    -fx-background-color: #DFB951;
    -fx-border-radius: 20;
    -fx-background-radius: 20;
    -fx-padding: 5;
}

このスタイルが追加されたボタンは、次のイメージのようになります。ラベルのフォントはcontrolStyle1.css内の.root定義から選択されることに注意してください。

このクラス・スタイルをノードに割り当てるには、メソッドのgetStyleClass().add()シーケンスを使用します。例37-6に、「Accept」ボタンに割り当てられた.button1スタイルを示します。

Button buttonAccept = new Button("Accept");
buttonAccept.getStyleClass().add("button1");

ノードに追加したスタイルは累積することに注意してください。.button1クラス・スタイルをbuttonAcceptノードに追加すると、このノードは.buttonスタイルと.button1スタイルの両方のルールを使用してレンダリングされます。

IDスタイルの作成

スタイルを作成し、このスタイルをノードに割り当てることにより、個別ノードのスタイルを定義できます。スタイル名は、先頭にハッシュ記号(#)が付いたIDです。例37-7では、#font-buttonという名前のスタイルの定義を作成しています。

#font-button {
    -fx-font: bold italic 20pt "Arial";
    -fx-effect: dropshadow( one-pass-box , black , 8 , 0.0 , 2 , 0 );
}

ID font-buttonが割り当てられたボタンは、次のイメージのようになります。

例37-8に、このIDスタイルをノードに割り当てる方法を示します。

Button buttonFont = new Button("Font");
buttonFont.setId("font-button");

コード内のスタイルの設定

また、アプリケーションのコード内でノードのスタイル・プロパティを設定することもできます。コード内で設定されたルールの方が、スタイル・シートのスタイルより優先されます。例37-9に、ボタンの背景色とフォント色を変更する方法を示します。

Button buttonColor = new Button("Color");
buttonColor.setStyle("-fx-background-color: slateblue; -fx-text-fill: white;");

次のイメージは、ボタンがどのように表示されるかを示しています。