0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【JavaFX】CSSの書き方【随時更新】

0
Last updated at Posted at 2020-04-18

JavaFXの情報が少なすぎるので必要だと思った事はどんどん書いていきます。

CSSの適用方法

sceneに対してgetStylesheets().add(String s)すればOK。コードのどの時点ででも適用可能(要検証)。
ここはいろんなところに書いてあるので参考にすべし。

Main.java
css = "application.css";
scene.getStylesheets().add(this.getClass().getResource(css).toExternalForm());

各NodeのCSSプロパティ

何も指定しないときのデフォルトのcssはmodena.css from JDK10.0.1が適用されている(2020年4月現在)。このファイルでページ内検索かけて装飾したいNodeのプロパティを見ながらいじればとりあえず何とかなるのではないだろうか。
原則として各プロパティはほとんど**-fx-**というprefixがついているが、自分でカスタムして使う際にこのprefixを入れなければならないという決まりはない。
JavaFX CSSリファレンス・ガイドも参照するとわかりやすい。

配色の固定

デザイン論になるのだが、1つのページ、アプリケーションのレイアウトに使う色数は特別な理由でもない限り多くても4色までに抑えておくのが吉。でも毎回

application.css
*{
    -fx-text-fill: rgb(231, 243, 234);
    -fx-background-color: linear-gradient(rgb(104, 132, 193), rgb(58, 61, 126));
}

.label{
    -fx-background-color: rgb(104, 132, 193);
}
:
:

などと同じ色をrgb指定するのは数字を覚えるのもコピペするのも面倒なので、最初に一括で指定してしまうと良い。

application.css
*{
    -color-primary: rgb(104, 132, 193);
    -color-secondary: rgb(58, 61, 126);
    -color-tertiary: rgb(231, 243, 234);
    -fx-text-fill: -color-tertiary;    /*ルートで設定しておけばこうやって書ける*/
    -fx-background-color: linear-gradient(-color-primary, -color-secondary);
}

.label{
    -fx-background-color: -color-primary;
}
:
:

CSSの使い方というよりはデザインをスマートにするための知恵みたいなものかもしれない。

-fx-font-family

JavaFXじゃなくてもよく出てくる、というかこれを検索するとHTML5の話ばっかり出てくるので意外とわからない話。
以下を実行することで指定できるフォントファミリーが一覧で出てくる。

Main.java
import javafx.scene.text.Font;

System.out.println(Font.getFamilies().toString());
0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?