JavaFXアプリケーションの外観は、CSS(カスケード・スタイル・シート)を使用して変更することが可能です。CSSの使用は「CSSファイルを追加する方法」と「コード内でスタイルを設定する方法」の２つがあります。

CSSファイルを追加する

独自のCSSファイルを追加してJavaFXアプリケーションの外観を変更することが可能です。CSSファイルは「Secen」に対して追加します。追加したCSSファイルから各コントロールに対してスタイルを指定するには「各コントロールに「CSSクラス」を指定する」もしくは「CSSから各コントロールのIDを指定する」方法の２つがあります。

1 :
2 :
3 :
4 :
5 :
6 :
7 :
8 :
9 :
10 :
11 :
12 :
13 :
14 :
15 :
16 :
17 :
18 :
19 :
20 :
21 :
22 :
23 :
24 :
25 :
26 :
27 :
28 :
29 :
30 :
31 :
32 :
33 :
34 :
35 :
36 :
37 :
38 :
39 :
40 :
41 :
42 :
43 :
44 :
45 :
46 :
47 :


import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class JavaFX_CSS_Sample1 extends Application{

	public static void main(String... args){

		Application.launch(args);

	}

	public void start(Stage stage) throws Exception {

		// Lableを作成
		Label label1 = new Label( "Lable 1" );
		Label label2 = new Label( "Lable 2" );

		// LabelにStyleClassを設定
		label1 . getStyleClass() . add( "Label_CSS" );

		// LabelのIdを設定
		label2 . setId("Label_Id_CSS");

		// HBoxを作成してLabelを配置
		HBox hbox = new HBox();
		hbox.setAlignment( Pos . CENTER );
		hbox . getChildren() . addAll( label1 , label2 );

		// Sceneを作成
		Scene scene = new  Scene( hbox );

		// StyleSheetsの設定
		scene . getStylesheets() . add( getClass() . getResource( "css/css_sample01.css" ) . toExternalForm() );

		stage . setTitle( "CSS Sample 1" );
		stage . setWidth(  300 );
		stage . setHeight( 300 );
		stage . setScene( scene );
		stage . show();

	}

}

【 CSSの追加サンプルソース】

1 :
2 :
3 :
4 :
5 :
6 :
7 :
8 :
9 :
10 :
11 :
12 :
13 :
14 :
15 :
16 :
17 :
18 :
19 :
20 :
21 :
22 :
23 :
24 :
25 :
26 :
27 :
28 :
29 :
30 :
31 :
32 :
33 :
34 :
35 :


/* スタイルクラス */
.Label_CSS {
	-fx-pref-width        : 100;     /* 横幅   */
	-fx-pref-height       : 200;     /* 高さ   */
	-fx-background-color  : yellow;  /* 背景色 */
	-fx-alignment         : center;  /* 位置   */
	-fx-text-fill         : red;     /* 文字色 */
	-fx-underline         : true;    /* 下線   */
	-fx-border-width      : 2;       /* 枠線の太さ */
	-fx-border-style      : dotted phase 10 inside line-join bevel line-cap square; /* 枠線 */
	-fx-font-family       : sans-serif; /* フォント         */
	-fx-font-size         : 14pt  ;     /* フォントサイズ   */
	-fx-font-style        : italic;     /* フォントスタイル */
	-fx-font-weight       : bold;       /* フォントの太さ   */
	-fx-background-radius : 50;         /* 背景の角丸み     */
	-fx-border-radius     : 50;         /* 枠線の角丸み     */
}

/* CSSからIDを指定して対象のコントロールにスタイルを設定 */
#Label_Id_CSS {
	-fx-pref-width        : 100;     /* 横幅   */
	-fx-pref-height       : 200;     /* 高さ   */
	-fx-background-color  : green;   /* 背景色 */
	-fx-alignment         : center;  /* 位置   */
	-fx-text-fill         : white;   /* 文字色 */
	-fx-underline         : false;   /* 下線   */
	-fx-border-width      : 2;       /* 枠線の太さ */
	-fx-border-style      : solid;   /* 枠線 */
	-fx-font-family       : sans-serif; /* フォント         */
	-fx-font-size         : 14pt  ;     /* フォントサイズ   */
	-fx-font-style        : italic;     /* フォントスタイル */
	-fx-font-weight       : bold;       /* フォントの太さ   */
	-fx-background-radius : 30;         /* 背景の角丸み     */
	-fx-border-radius     : 30;         /* 枠線の角丸み     */
}

【 css_sample01.css 】

重要ポイント

LabelにCSSのクラス「Label_CSS」を設定

22 :
23 :


// LabelにStyleClassを設定
label . getStyleClass() . add( "Label_CSS" );

Labelに「ID」を設定

25 :
26 :


// LabelのIdを設定
label2 . setId("Label_Id_CSS");

SceneにCSS「css_sample01.css」を追加

36 :
37 :


// StyleSheetsの設定
scene . getStylesheets() . add( getClass() . getResource( "css/css_sample01.css" ) . toExternalForm() );

実行結果

【 CSSの追加サンプルソース実行結果】

プログラムコード内でスタイルを設定する

CSSをロードしてスタイルを指定する方法以外にも、プログラムコード内で直接ノードにスタイルを設定することが可能です

1 :
2 :
3 :
4 :
5 :
6 :
7 :
8 :
9 :
10 :
11 :
12 :
13 :
14 :
15 :
16 :
17 :
18 :
19 :
20 :
21 :
22 :
23 :
24 :
25 :
26 :
27 :
28 :
29 :
30 :
31 :
32 :
33 :
34 :
35 :
36 :
37 :
38 :
39 :
40 :
41 :
42 :
43 :
44 :
45 :
46 :
47 :
48 :
49 :
50 :
51 :
52 :
53 :
54 :
55 :
56 :
57 :
58 :


import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class JavaFX_CSS_Sample2 extends Application{

	public static void main(String... args){

		Application.launch(args);

	}

	public void start(Stage stage) throws Exception {

		// Lableを作成
		Label label = new Label( "CSS Sample 2" );

		// Labelに設定するスタイル
		String css_str = new String();
		css_str  = "-fx-pref-width        : 200;";        // 横幅
		css_str += "-fx-pref-height       : 200;";        // 高さ
		css_str += "-fx-background-color  : green;";      // 背景色
		css_str += "-fx-alignment         : center;";     // 位置
		css_str += "-fx-text-fill         : red;";        // 文字色
		css_str += "-fx-underline         : true;";       // 下線
		css_str += "-fx-border-width      : 2;";          // 枠線の太さ
		css_str += "-fx-border-style      : dotted phase 10 inside line-join bevel line-cap square;"; // 枠線
		css_str += "-fx-font-family       : sans-serif;"; // フォント
		css_str += "-fx-font-size         : 14pt  ;";     // フォントサイズ
		css_str += "-fx-font-style        : italic;";     // フォントスタイル
		css_str += "-fx-font-weight       : bold;";       // フォントの太さ
		css_str += "-fx-background-radius : 50;";         // 背景の角丸み
		css_str += "-fx-border-radius     : 50;";         // 枠線の角丸み

		// Labelにプログラムコード内でスタイルを設定する
		label . setStyle( css_str );

		// StackPaneの作成
		StackPane stack = new StackPane(  );
		stack . setAlignment( Pos . CENTER );
		stack . getChildren(  ) . addAll( label );

		// Sceneを作成
		Scene scene = new  Scene( stack );


		stage . setTitle( "CSS Sample 2" );
		stage . setWidth(  300 );
		stage . setHeight( 300 );
		stage . setScene( scene );
		stage . show();

	}

}

【コード内スタイル設定サンプルソース】

重要ポイント

プログラムコード内でスタイルを設定

38 :
39 :


// Labelにプログラムコード内でスタイルを設定する
label . setStyle( css_str );

実行結果

【コード内スタイル設定サンプルソース実行結果】

Back JavaFX Menu