FXMLでGUIをデザインしよう (6/6)

では、スタイルシートを用意しましょう。FXMLファイルと同じ場所に「app.css」というファイル名で用意しておきましょう。

そしてこの中に、FXMLに用意した<Label fx:id="label1" />のコントロールのスタイルを、ここに記述しておきます。下に簡単なサンプルを掲載しておきます。

・文字コードの指定
冒頭に、@CHARSET "utf-8";が記述されていますね。基本的にスタイルシートはUTF-8でエンコードします。これは必須ではありませんが、書くのが基本と考えておきましょう。

・コントロールのスタイル
ここでは、label1というIDのLabelについてスタイルを用意しています。ここでは以下のように書いてありますね。

Label#label1 {……}

このように、スタイルの指定は、「クラス名#ID名」というような形でスタイルを記述します。HTMLのスタイルが「タグ名#ID名」と書くのと同じような感じですね。

もちろん、クラス名だけを指定すれば、そのクラスのコントロール全てにスタイルを適用させることができます。例えば、「Label {……}」とすれば、すべてのLabelのスタイルまとめて設定できます。

・フォント属性について
ここでは、２つのスタイルを用意しておきました。「-fx-font-family」と「-fx-font-size」ですね。これらは、フォントファミリー名とフォントサイズを指定するものです。

JavaFXのスタイルは、すべてこのように「-fx-○○」といった名前になっています。多くは、HTMLで使われているスタイル名の前に「-fx-」をつけるだけで使えますが、必ずしも同じわけではありません。

例えば、バックグラウンドカラーは「-fx-background-color」ですが、テキストの色は「-fx-text-fill」となっています。JavaFX独自の値もあるので注意しましょう。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

@CHARSET "utf-8";

Label#label1 {
    -fx-font-family:Serif;
    -fx-font-size:24pt;
}