Label の装飾について

LabelのCSSを用いた装飾方法を解説します。

Label

外部ファイルのCSSをロードしてLabelを装飾するサンプルプログラムです。

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 :


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_LabelExample extends Application{

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

		Application.launch(args);

	}

	public void start(Stage stage) throws Exception {

		// Lableを作成
		Label label = new Label("Label Style Example");

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

		StackPane stack = new StackPane(  );
		stack . setAlignment( Pos . CENTER );
		stack . getChildren(  ) . addAll( label );


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

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

		stage . setTitle("Label Style Example");
		stage . setWidth(  300 );
		stage . setHeight( 300 );
		stage . setScene( scene );
		stage . show();

	}

}

【サンプルソース No.1　JavaFX_LabelExample 】

ポイント

Labelに設定するStyleのクラスを設定しているコード

20 :
21 :


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

Sceneに対してスタイルシートを読み込む

30 :
31 :


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

javaFX.css

javaFX.cssの内容です。

1 :
2 :
3 :
4 :
5 :
6 :
7 :
8 :
9 :
10 :
11 :
12 :
13 :
14 :


.Label_CSS {
	-fx-pref-width       : 200;     /* 横幅   */
	-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;       /* フォントの太さ   */
}

各スタイルの詳細はこちらをご覧ください。(※追加途中)

01.背景色

[ -fx-background-color ]