Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 9008

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

$
0
0

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());

Viewing all articles
Browse latest Browse all 9008

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>