読者です 読者をやめる 読者になる 読者になる

くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

JavaFXのCSSまとめ【気が向いたら更新】

JavaFXCSSがよくわからんからまとめてみた。

指定方法

ID指定

#<id>  {}

class指定

.<class-name> {}

JavaのClass名がCSSのclassとして使える

.label {}

Scene全体の設定も.rootでできる

色の定義とかもここでするとよいかも

.root {
  /* colors */
  gray: #424242;
  blue: #0288D1;

  /* default setting */
  -fx-background-color: gray;
  -fx-font-size: 14.0;
}

文字関連

.label {
  -fx-font-size: 24;      # フォントサイズ
  -fx-font-family: serif; # フォントファミリー: 個別もしくは [serif | sans-serif | cursive | fantasy | monospace]
  -fx-text-fill: red;     # 文字の色
  -fx-font-style: italic; # 文字のスタイル: [normal | italic | oblique]
  -fx-font-weight: bold;  # 文字の太さ: [normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900]
}

色関連

.label {
  -fx-background-color: white; # 背景色
  -fx-text-fill: red;          # 文字の色
}
ボタンの状態で色を変化させ

:pressedなどの擬似クラスで指定できるよう

デフォルトの場合

.button {
  -fx-text-fill: white;           # テキストの色
  -fx-background-color: #757575;  # ボタンの色
}

カーソルが上にある場合

.button:hover {
    -fx-text-fill: white;
    -fx-background-color: #BDBDBD;
}

押された場合

.button:pressed {
  -fx-text-fill: #424242;
  -fx-background-color: white;
}

配置関連

.label {
  -fx-padding: 5.0; # すべてのpadding5.0にする
}

サイズ関連

.label {
  -fx-min-width: 300.0;   # 最小サイズ
  -fx-min-height: 100.0;
  -fx-pref-width: 300.0;  # おすすめサイズ
  -fx-pref-height: 100.0;
  -fx-max-width: 300.0;   # 最大サイズ
  -fx-max-height: 100.0;
}

参考にしたサイト様