CSS による表示の変更

スクリプトにCSSを埋めこむ

まず、スクリプト中に埋めこむ方法について解説しましょう。

ベースとなるスクリプトを以下に示します。

Stage {
    title: "CSS Sample"
    scene: Scene {
        width: 200 height: 150
        content: [
            Label {
                layoutX: 10 layoutY: 20
                text: "Label"
            },
            Button {
                layoutX: 100 layoutY: 18
                text: "Button"
            },
            Rectangle {
                x: 50 y: 70 width: 100 height: 60
            }
        ]
    }
}

ラベル、ボタン、四角を表示するスクリプトです。実行すると、以下の図のようになります。

ここに次のようなスタイルを追加します。

• ラベル: フォントサイズ、背景色、文字色、パディング
• ボタン: フォントサイズ、背景色、文字色
• 四角: 塗り色、線色

スクリプトにCSSを埋めこむには、Nodeクラスのstyleプロパティを使用します。

Stage {
    title: "CSS Sample"
    scene: Scene {
        width: 200 height: 150
        content: [
            Label {
                layoutX: 10 layoutY: 20
                text: "Label"
                // CSS の設定
                style: "-fx-font-size: 24; -fx-padding: 0 5 0 5; "
                       "-fx-background-color: lightblue; "
                       "-fx-text-fill: midnightblue;"
            },
            Button {
                layoutX: 100 layoutY: 18
                text: "Button"
                // CSS の設定
                style: "-fx-font-size: 24; "
                       "-fx-background-color: lightblue; "
                       "-fx-text-fill: midnightblue;"
            },
            Rectangle {
                x: 50 y: 70 width: 100 height: 60
                // CSS の設定
                style: "-fx-fill: lightsteelblue; -fx-stroke: black;"
            }
        ]
    }
}

styleプロパティにCSSを記述します。

JavaFXで使用できるCSSのプロパティはすべて-fx-で始まっています。HTMLで使用するCSSのプロパティとは異なるので、注意が必要です。

JavaFXで使用できるCSSのプロパティに関しては以下のドキュメントを参考にしてください。

JavaFX CSS Reference Guide

では、実際に実行してみましょう。

UIコントロールだけでなく、シェイプもCSSでスタイルを変更することができるのがうれしいところです。

外部ファイルでCSSを設定する

次に、外部のファイルに記述する方法です。

まずはNetBeansでスタイルシートを作成しましょう。プロジェクトペインで、スタイルシートを作成するパッケージを右クリックします。すると以下の図のようなポップアップメニューが表示されるので、[新規]-[JavaFX カスケードスタイルシート]を選択します。

すると、下図に示したダイアログが表示されるので、任意のファイル名を入力します。ここではstylesheetという名前にしました。右下の[完了]ボタンをクリックするとスタイルシートが生成されます。

生成したスタイルシートはデフォルトで以下の内容が記述されています。

.scene {
    /* The default font for all content, it in inherited by all nodes */
    -fx-font: 12pt "Amble Cn";
 
    /* Main color palette that the user should play with to change colors of controls */
    -fx-accent: #0093ff;
    -fx-base: #d0d0d0;
    -fx-background: #f4f4f4;
    -fx-control-inner-background: white;
    -fx-focus-color: #0093ff;
    -fx-dark-text-color: black;
    -fx-mid-text-color: #292929;
    -fx-light-text-color: white;
}

sceneクラスセレクタで記述すると、シーン全体に対するスタイルの指定となります。

ここでは、以下のようなスタイルに変更します。

#label {
    -fx-font-size: 36;
    -fx-padding: 0 10 0 10;
    -fx-background-color: lightpink;
    -fx-text-fill: crimson;
}
 
#button {
    -fx-font-size: 36;
    -fx-background-color: lightpink;
    -fx-text-fill: crimson;
}
 
.rect {
    -fx-fill: tomato;
    -fx-stroke: darkred;
}

#で指定しているのがIDセレクタ、.で指定しているのがクラスセレクタになるのは、HTMLの場合と同じです。

では、スクリプトを更新しましょう。

Stage {
    title: "CSS Sample"
    scene: Scene {
        width: 200 height: 150
        
        // スタイルシートの指定
        stylesheets: [ "{__DIR__}stylesheet.css" ]

        content: [
            Label {
                layoutX: 10 layoutY: 20
                text: "Label"
                id: "label"
            },
            Button {
                layoutX: 100 layoutY: 18
                text: "Button"
                id: "button"
            },
            Rectangle {
                x: 50 y: 70 width: 100 height: 60
                styleClass: "rect"
            }
        ]
    }
}

外部スタイルシートを読み込むには、Sceneクラスのstylesheetsプロパティを設定します。プロパティ名が複数になっていることからも分かるとおり、複数のスタイルシートを読み込むことができます。

IDセレクタを使用する場合、Nodeクラスのidプロパティを指定します。クラスプロパティを使用する場合、styleClassプロパティを使用します。

実行結果を下図に示します。外部にスタイルシートを配置することにより、コンパイルをしなくてもスタイルを変更することができます。

このようにJavaFXではCSSをサポートしていますが、制限もあります。

たとえば、":lang"のような疑似クラスはほとんどが使えません。使用できるのは、":presssed"、":focused"、またハイパーリンクに対する":visited"も使用できます。

これ以外にもエフェクトはドロップシャドウとインナーシャドウしか使用できないなどの制限があります。

詳しくはJavaFX CSS Reference Guideをご覧ください。