Java UIのスタイルを設定するには、JavaFXおよびカスケード・スタイルシート(CSS)を使用するのが最も簡単です。 テーマ間の移動や1つのコントロールの外観のカスタマイズは、すべてCSSから行うことができます。 初心者にとって、これは未知の領域かもしれませんが、習得するのはそれほど困難ではありません。 CSSスタイルを試してみれば、その利点がすぐにわかります。 また、設計と開発のワークフローを分けたり、設計をプロジェクトの後半に先送りすることもできます。 UIの外観の土壇場での変更やデプロイ後の変更も、JavaFX CSSから行うことができます。
このドキュメントの構成は次のとおりです。 まず、JavaFX CSSプロパティのすべての値タイプについて説明します。その中で随時、特定の値タイプの構文の文法も取り上げます。 次に、CSSスタイルをサポートするシーングラフ・ノードごとに、サポートされるプロパティをタイプおよびセマンティクス情報とともに表に示します。 各クラスの擬似クラスも示します。 コントロールのCSSプロパティの説明を続けます。 コントロールごとに、そのコントロールのスキンのサブストラクチャを、そのサブストラクチャを実装するRegionオブジェクトのスタイル・クラス名とともに示します。
JavaFXカスケード・スタイルシート(CSS)は、W3C CSSバージョン2.1 [1]に基づいており、バージョン3 [2]に対する現在の作業の一部が追加されています。 また、JavaFX CSSでは、特定のJavaFX機能をサポートするためにCSSを拡張しています。 JavaFX CSSの目標は、HTML向けCSSをすでに習得しているWeb開発者がCSSを使用して、JavaFXコントロールおよびシーングラフ・オブジェクトのテーマを無理のない方法でカスタマイズおよび開発できるようにすることです。
JavaFXにはCSSの豊富な拡張機能があり、色派生、プロパティ参照、単一ノードに対する複数の背景色とボーダーなどの機能をサポートしています。 これらの機能は、開発者および設計者に新しい大きな力をもたらすものであり、このドキュメントで詳しく説明します。
可能なかぎり、JavaFX CSSはW3C標準に従いますが、ほとんど例外なく、JavaFXプロパティ名には接頭辞として-fx-というベンダー拡張子が付けられています。 これらのプロパティが標準のHTML CSSと互換性があるように見えても、JavaFX CSS処理ではプロパティ値がJavaFX CSS拡張機能を利用することを前提としています。
CSSスタイルは、HTML DOMの要素に適用される場合と同じような方法で、JavaFXシーングラフのノードに適用されます。 スタイルは、まず親に適用され、次にその子に適用されます。 コードは、CSSの再適用が必要になる可能性があるシーングラフの分岐のみがアクセスされるように記述されます。 ノードは、シーングラフに追加された後でスタイル設定されます。 ノードの擬似クラス状態、スタイル・クラス、ID、インライン・スタイルまたは親が変更されたり、スタイルシートがシーンに対して追加または削除されると、スタイルが再適用されます。 CSSが適用されるようにするには、ノードがシーングラフに存在する必要があることに注意してください。 ノードを表示する必要はありませんが、そのscenePropertyはnull以外の値である必要があります。 詳細は、applyCssを参照してください。
通常のシーングラフ・パルス中に、シーングラフがレイアウトされて描画される前に、CSSスタイルが適用されます。 擬似クラス状態変更をトリガーするイベント("ホバー"状態をトリガーするMouseEvent.MOUSE_ENTEREDなど)のスタイルは、そのイベントに続く次のパルスに適用されます。
CSSセレクタは、スタイルをシーングラフ・ノードに適合させるために使用されます。 ノードとCSSセレクタとの関係は次のとおりです。
JavaFX CSSでは、擬似クラスもサポートしていますが、擬似クラスの指定どおりに擬似クラスの全範囲を実装しているわけではありません。 各ノード・タイプでサポートされている擬似クラスは、このリファレンス内の表に示します。 JavaFXは、現時点では構造擬似クラスをサポートしていないことに注意してください。
各ノードは、ノードのJavaFXクラス(styleClassとは異なります)に応じて一連のプロパティを適用します。 各ノード・クラスによって適用されるプロパティは、このドキュメントの後の表に詳しく示します。 実際に適用されるプロパティ値は、前述したルールの起源と、CSS 2 [1]で説明しているルールのセレクタの特異性の優先順位によって異なります。 最終的に、プロパティ値文字列は、適切なタイプのJavaFX値に変換され、その後JavaFXオブジェクトのインスタンス変数に割り当てられます。
CSSスタイルは、スタイルシートまたはインライン・スタイルから生成できます。 スタイルシートは、SceneオブジェクトのgetStylesheetsプロパティに指定されているURLからロードされます。 シーングラフにコントロールが含まれている場合は、デフォルトのユーザー・エージェント・スタイルシートがロードされます。 インライン・スタイルは、ノードのsetStyle APIで指定されます。 インライン・スタイルは、HTML要素のstyle="..."属性に似ています。 Sceneのスタイルシートからロードされたスタイルは、ユーザー・エージェント・スタイルシートのセレクタよりも優先されます。 インライン・スタイルは、別の場所で発生したスタイルよりも優先されます。 スタイル・セレクタの優先順位は、スタイル宣言の!importantを使用して変更できます。
JavaFX 2.1から、ParentクラスにはgetStylesheetsプロパティが保持され、スタイルシートをコンテナで設定できるようになりました。 これにより、シーングラフの1つの分岐で個別にスタイルを設定できます。 Parentのインスタンスはいずれもスタイル・シートを持つことができます。 子は、自身のスタイルをそれぞれのインライン・スタイル、そのすべての祖先のスタイルシートおよびSceneのすべてのスタイルシートから取得します。
JavaFX 8u20から、SceneクラスにはgetUserAgentStylesheetプロパティが保持され、ユーザー・スタイルシートをSceneで設定できるようになりました。 これにより、シーンではプラットフォームのデフォルトとは異なる一連のユーザー・エージェント・スタイルを保持できます。 ユーザー・エージェント・スタイルシートがシーンに設定されているときは、そのユーザー・エージェント・スタイルがプラットフォームのデフォルトのユーザー・エージェント・スタイルシートのスタイルのかわりに使用されます。
JavaFX 8u20から、SubSceneクラスにはgetUserAgentStylesheetプロパティが保持され、ユーザー・スタイルシートをSubSceneで設定できるようになりました。 これにより、シーングラフのSubSceneではプラットフォームのデフォルトまたはSubSceneが含まれているSceneとは異なる一連のユーザー・エージェント・スタイルを保持できます。 ユーザー・エージェント・スタイルシートがSubSceneに設定されているときは、そのユーザー・エージェント・スタイルがプラットフォームのデフォルトのユーザー・エージェント・スタイルシートまたはSceneに設定されたユーザー・エージェント・スタイルシートのスタイルのかわりに使用されます。
SceneまたはParentに追加されているスタイルシートのスタイルは、そのSceneまたはParentの子または子孫であるSubSceneに影響を与えないことに注意することが重要です。 ユーザー・エージェントがSubSceneに設定されている場合を除き、SubSceneはSceneのユーザー・エージェント・スタイルシートまたはプラットフォームのユーザー・エージェント・スタイルシートからスタイルを取得します。
この実装により、設計者はスタイルシートを使用してコードから設定されたプロパティ値をオーバーライドすることでアプリケーションのスタイルを設定できます。 たとえば、rectangle.setFill(Color.YELLOW)
への呼出しは、インライン・スタイルまたは著者スタイルシートのスタイルでオーバーライドできます。 これは、カスケードに影響を与えます。特に、コードから設定された値がスタイルシートのスタイルでオーバーライドされるときは顕著です。 JavaFX CSS実装では、次のように優先順位が適用されます。ユーザー・エージェント・スタイルシートのスタイルはコードから設定された値よりも優先順位が低く、コードから設定された値はSceneまたはParentのスタイルシートよりも優先順位が低くなっています。 インライン・スタイルの優先順位が最も高くなっています。 Parentインスタンスのスタイルシートは、Sceneスタイルシートのスタイルよりも具体的であるとみなされます。
JavaFXクラス名からCSSスタイル・クラス名を導出し、JavaFX変数名からCSSプロパティ名を導出するために、ネーミング規則が確立されています。 これはネーミング規則にすぎず、自動名前変換は存在しないことに注意してください。 ほとんどのJavaFX名では、キャメル・ケースが使用されます。つまり、複合語から形成される大文字と小文字が混在する名前で、複合語の各単語の先頭文字は大文字になります。 HTMLの世界のほとんどのCSS名はすべて小文字で、複合語はハイフンで区切られます。 このため、規則では、JavaFXクラス名を取得し、複合語をハイフンで区切って文字をすべて小文字に変換することで対応するCSSスタイル・クラス名を形成することになっています。 たとえば、JavaFX ToggleButtonクラスには、toggle-buttonというスタイル・クラスがあります。 JavaFX変数名をCSSプロパティ名にマップする規則も同様で、接頭辞-fx-が追加されます。 たとえば、blendMode変数には、-fx-blend-modeというCSSプロパティ名が対応しています。
CSSには、デフォルトで継承されるプロパティや、プロパティ値がinheritの場合に継承されるプロパティもあります。 値が継承される場合、その値はドキュメント・ツリーの要素の親の計算された値から継承されます。 JavaFXの継承も、ドキュメント・ツリーの要素ではなくシーングラフの親ノードから行われることを除き同じです。
次のプロパティは、デフォルトで継承されます。 どのプロパティも、値をinheritに指定することで継承可能にできます。
クラス | プロパティ | CSSプロパティ | 初期値 |
---|---|---|---|
javafx.scene.Node | cursor | -fx-cursor | javafx.scene.Cursor.DEFAULT |
javafx.scene.text.Text | textAlignment | -fx-text-alignment | javafx.scene.text.TextAlignment.LEFT |
javafx.scene.text.Font | font | -fx-font、-fx-font-family、-fx-font-size、-fx-font-weight、-fx-font-style | Font.DEFAULT (12px system) |
JavaFXクラスの階層(たとえば、RectangleはShapeのサブクラスで、ShapeはNodeのサブクラスです)内では、祖先のCSSプロパティは子孫のCSSプロパティでもあります。 つまり、サブクラスはその祖先クラスと同じプロパティ・セットおよびサブクラス自体に定義されている追加のプロパティに対応します。 そのため、ShapeはNodeのすべてのプロパティに加えてさらにいくつかのプロパティをサポートし、RectangleはShapeのすべてのプロパティに加えてさらにいくつかのプロパティをサポートしています。 ただし、JavaFXクラス名をタイプ・セレクタとして使用するのは完全一致であるため、Shapeのスタイル宣言を指定しても、Rectangleではそれらの値が使用されません(Rectangleのプロパティの.css値がinheritである場合を除きます)。
フォント継承の場合、CSSエンジンは前述の表のスタイルのみを探します。 継承するフォントを探すとき、検索はユーザーによって設定されたFontプロパティがあるノードで終了します。 ユーザー設定フォントは、そのノードに特に適用される著者スタイルまたはインライン・スタイルがない場合に継承されます。 この場合、継承されるフォントはユーザー設定フォントおよび適用可能な著者スタイルまたはインライン・スタイルの一部から作成されます。
JavaFX 8u20から、CSS @importも一部サポートされるようになりました。 無条件インポートのみがサポートされています。 つまり、media-type修飾子はサポートされていません。 また、JavaFX CSSパーサーは、@importがスタイルシート内で表示される場所に関して非コンプライアンスです(「At‑rules」を参照)。 これが将来のリリースで修正される予定であることがユーザーに警告されます。 W3C標準に準拠することをお薦めします。
JavaFX 8から、実装でCSS3構文が一部サポートされ、@font‑faceルールを使用してURLからフォントをロードできるようになりました。
これにより、フォントのパブリック・リソースをJavaFXアプリケーションで使用できます。 たとえば、http://font.samples/web-family=samplesというURLが前述の@font-faceルールを返すとします。 その場合、次のコードはサンプルのフォントをJavaFXアプリケーションでどのように使用できるかを示しています。
あるいは、URLは@importルールとともにスタイルシートにインポートできます。
パーサーは構文を解析しますが、src
記述子を除き、すべての@font-face記述子が無視されます。 src
記述子は、<url>である必要があります。 format
ヒントは無視されます。
次の簡単なJavaFXアプリケーションについて考えてみます。
Scene scene = new Scene(new Group());
scene.getStylesheets().add(“test.css”);
Rectangle rect = new Rectangle(100,100);
rect.setLayoutX(50);
rect.setLayoutY(50);
rect.getStyleClass().add("my-rect");
((Group)scene.getRoot()).getChildren().add(rect);
何もスタイルがないと、これには無地の黒い矩形が表示されます。 test.cssに次のものが含まれている場合、
.my-rect { -fx-fill: red; }
矩形は黒ではなく赤になります。
test.cssに次のものが含まれている場合、
.my-rect {
-fx-fill: yellow;
-fx-stroke: green;
-fx-stroke-width: 5;
-fx-stroke-dash-array: 12 2 4 2;
-fx-stroke-dash-offset: 6;
-fx-stroke-line-cap: butt;
}
結果は、ボーダーが緑の点線で見事に描かれた黄色の矩形になります。
JavaFX CSSパーサーで構文エラーが発生すると、警告メッセージが送出され、エラーの解決に役立つ入手できるかぎりの情報が伝送されます。 次に例を示します。
WARNING: javafx.css.CssParser宣言'-fx-background-color'を解析中に'<percent>'が必要ですか?[1, 49]
暗号のような?[1,49]は、エラーの場所に関連しています。 場所を示す文字列の形式は次のとおりです。
<url>[line, position]
ファイルの解析中にエラーが見つかった場合、ファイルURLが指定されます。 エラーが(前述の例のように)インライン・スタイルからのものである場合は、URLが疑問符として指定されます。 行と位置により、トークンが始まるファイルまたは文字列内でのオフセットが指定されます。 行と位置は、JavaFX 2.2よりも前のリリースでは正確でない場合があることに注意してください。
パーサーからのエラーを検出する必要のあるアプリケーションは、javafx.css.CssParserのerrorsプロパティにリスナーを追加できます。
各プロパティにはタイプがあり、これによって値の種類とその値を指定するための構文が決まります。 また、各プロパティにはinheritの値が指定されている場合があります。つまり、あるノードのプロパティがその親のプロパティと同じ計算された値を取得することがあります。 inheritの値は、通常は継承されないプロパティで使用できます。
inherit値がルート要素に設定されている場合、プロパティには初期値が割り当てられます。
ブール値は、trueまたはfalseの文字列値を保持できます。すべてのCSSで大文字と小文字が区別されないため、これらの値も大文字と小文字が区別されません。
文字列は、二重引用符または一重引用符とともに記述できます。 '\'や'\\22'というようにエスケープする場合を除き、二重引用符を二重引用符内に記述することはできません。 一重引用符の場合も同じです(たとえば、"\\'"や"\\27")。
"this is a 'string'"
"this is a "string""
'this is a "string"'
'this is a \'string\''
文字列に改行を直接含めることはできません。 文字列に改行を含めるには、ISO-10646 (U+000A)で行送り文字を表すエスケープ("\\A"や"\\00000a"など)を使用します。 この文字は、CSSで改行の総称的概念を表します。 例については、contentプロパティを参照してください。
値タイプの中には、整数値(<integer>で示される)や実数値(<number>で示される)を保持するものがあります。 実数および整数は、10進表記でのみ指定します。 <integer>は、0から9までの1つ以上の数字で構成されています。 <number>は、<integer>になるか、またはゼロ個以上の数字にドット(.)を付け、さらにその後に1つ以上の数字を続けたものになります。 整数と実数の両方とも、前に-または+を指定して、符号を示すことができます。-0は、0に相当し、負数ではありません。
[+|-]? [[0-9]+|[0-9]*"."[0-9]+]
整数または実数を値として許可する多くのプロパティは、実際には値をある範囲(多くの場合、負以外の値)に制限していることに注意してください。
サイズは、単位が<length>または<percentage>の<number>です。 ユニットが指定されていない場合、'px'が仮定されます。
<number>[ px | mm | cm | in | pt | pc | em | ex ]?
数値と単位を指定する場合、両者の間に空白は許可されません。 単位には、相対的なものと絶対的なものがあります。
相対
絶対
これらは、通常はノードの幅または高さに対するある長さの割合です。
<number>[ % ]
角度は、単位が次のいずれかの<number>です。
<number>[ deg | rad | grad | turn ]
期間は、秒またはミリ秒の単位の<number>か、値indefiniteです。
[<number>[ s | ms ]] | indefinite
W3Cの時間単位も参照してください。
ポイントは{x,y}座標です。
[ [ <length> <length> ] | [ <percentage> | <percentage> ] ]
ストップは、W3Cカラー・ストップ構文に準拠しています。
[ <color> [ <percentage> | <length>]? ]
<color-stop>系列で、ストップ距離値はすべて<percentage>または<length>である必要があります。 また、<length>値が使用されている場合は、系列の最初および最後のストップの距離値を指定する必要があります。 この制約は、将来のリリースで削除される可能性があります。
"red, white 70%, blue"は、赤および青の距離がそれぞれ0%および100%とみなされるため有効です。
"red 10, white, blue 90"は有効です。 赤および青の距離がそれぞれ10および90であるため、白の距離を計算できます。
"red, white 70, blue"は、距離単位が一致しないため有効ではありません。
"red, white, blue"は有効です。 ストップは、0%から100%までに均等に分散されます。
url ( ["\']? <address> ["\']? )
<address>は、[scheme:][//authority][path]形式の階層URIです([2]を参照)。 例:
url(http://example.com/images/Duke.png)
url(/com/example/javafx/app/images/Duke.png)
<address>に[scheme:]コンポーネントがない場合、<address>は[path]コンポーネントのみであるとみなされます。 先頭に'/'文字が付く場合、[path]がクラスパスのルートを基準にしたパスであることを示します。 スタイルがスタイルシートで表示され、先頭に'/'文字が付かない場合、パスはスタイルシートのベースURIを基準にしたパスです。 スタイルがインライン・スタイルで表示されている場合、(先頭に'/'が付いているかどうかに関係なく)パスはクラスパスのルートを基準にしたパスです。
スタイルシートのURL | スタイルのURL | 解決先 |
---|---|---|
file:///some/path/build/classes/com/mycompany/myapp/mystyles.css | url(images/Duke.png) | file:///some/path/build/classes/com/mycompany/myapp/images/Duke.png |
file:///some/path/build/classes/com/mycompany/myapp/mystyles.css | url(../images/Duke.png) | file:///some/path/build/classes/com/mycompany/images/Duke.png |
jar:file:/some/path/build/myapp.jar!/com/mycompany/myapp/mystyles.css | url(images/Duke.png) | jar:file:/some/path/build/myapp.jar!/com/mycompany/myapp/images/Duke.png |
クラスパス | スタイルのURL | 解決先URL |
---|---|---|
file:///some/path/build/classes | url(/com/mycompany/resources/images/Duke.png) | file:///some/path/build/classes/com/mycompany/resources/images/Duke.png |
file:///some/path/build/myapp.jar | url(/com/mycompany/resources/images/Duke.png) | jar:file:/some/path/build/myapp.jar!/com/mycompany/resources/images/Duke.png |
インライン・スタイルの場合、パスが常にクラスパスのルートにアンカーされるため、先行するドット・セグメント(たとえば、「..」や「.」)が解決されることに注意してください。
例として、以下のコード・スニペットは、'image'ディレクトリにある架空の'Duke.png'イメージで満たされたシーンを作成します:
同じスタイルがスタイルシートからも同じように機能します。
JavaFX CSSは、現時点でJavaFXプラットフォームのDropShadow効果およびInnerShadow効果をサポートしています。 様々な効果パラメータのセマンティクスの詳細は、javafx.scene.effectのクラスのドキュメントを参照してください。
指定されたコンテンツのシャドウをコンテンツの背後にレンダリングする高度な効果。
dropshadow( <blur-type> , <color> , <number> , <number> , <number> , <number> )
<blur-type> = [ gaussian | one-pass-box | three-pass-box | two-pass-box ]
<color> 影の色。
<number> 影のぼかしカーネルの半径。 範囲[0.0 ... 127.0]で、一般的な値は10。
<number> 影の拡散。 拡散は、ソース・マテリアルの分布が100%になる半径の部分です。 半径の残りの部分には、ぼかしカーネルによって制御される分布があります。 拡散が0.0の場合、影の分散がぼかしアルゴリズムによって完全に決定されます。 拡散が1.0の場合、ソース・マテリアルの不透明度の外側に向かって半径との境界まで堅調に広がり、半径で透明度が鋭く遮断されます。 値は、範囲[0.0 ... 1.0]内にある必要があります。
<number> X方向の影のオフセット(ピクセル)。
<number> Y方向の影のオフセット(ピクセル)。
指定されたコンテンツの端の内側にシャドウをレンダリングする高度な効果。
innershadow( <blur-type> , <color> , <number> , <number> , <number> , <number> )
<blur-type> = [ gaussian | one-pass-box | three-pass-box | two-pass-box ]
<color> 影の色。
<number> 影のぼかしカーネルの半径。 範囲[0.0 ... 127.0]で、一般的な値は10。
<number> 影のチョーク。 チョークは、ソース・マテリアルの分布が100%になる半径の部分です。 半径の残りの部分には、ぼかしカーネルによって制御される分布があります。 チョークが0.0の場合、影の分散がぼかしアルゴリズムによって完全に決定されます。 チョークが1.0の場合、影の内側に向かって端から半径との境界まで堅調に広がり、半径の内側で透明度が非常に鋭く遮断されます。 値は、範囲[0.0 ... 1.0]内にある必要があります。
<number> X方向の影のオフセット(ピクセル)。
<number> Y方向の影のオフセット(ピクセル)。
JavaFX CSSは、ファミリ、サイズ、スタイル、太さの個別のプロパティを使用してフォントを指定する機能と、単一の短縮形プロパティを使用してフォントを指定する機能をサポートしています。 フォントに関連する値タイプが4つと、4つすべてのプロパティを網羅する短縮形プロパティが1つあります。 フォント関連のタイプは次のとおりです。
<font-family>フォント・ファミリの文字列名。 システムで使用される実際のフォント・ファミリ名を使用したり、次のいずれかの汎用的なファミリ名を使用できます。
<font-size> <size>構文を使用したフォントのサイズ。
<font-style> 次の構文を使用したフォントのスタイル。
[ normal | italic | oblique ]
<font-weight> 次の構文を使用したフォントの太さ。
[ normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ]
<font> このフォント短縮形プロパティは、前述のプロパティのかわりに使用できます。 次の構文を使用します。
[[ <font-style> || <font-weight> ]? <font-size> <font-family> ]
テキストを使用するクラスのほとんどが、次のフォント・プロパティをサポートしています。 同じようなプロパティ・セットがサポートされる場合もありますが、-fx-fontではなく別の接頭辞が使用されます。
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-font | <font> | inherit | font-size、font-family、font-weightおよびfont-styleの短縮形プロパティ |
-fx-font-family | <font-family> | inherit | |
-fx-font-size | <font-size> | inherit | |
-fx-font-style | <font-style> | inherit | |
-fx-font-weight | <font-weight> | inherit |
ペイント値は、色構文のいずれかで指定された単色の塗りつぶしになる場合と、線形グラデーション、放射状グラデーションまたはimage-patternになる場合があります。
<color> | <linear-gradient> | <radial-gradient> | <image-pattern> <repeating-image-pattern>
linear-gradient( [ [from <point> to <point>] | [ to <side-or-corner>], ]? [ [ repeat | reflect ], ]? <color-stop>[, <color-stop>]+)
where <side-or-corner> = [left | right] || [top | bottom]
線形グラデーションは、"from" <point>から"to" <point>まで線に沿ってすべての停止色を進むグラデーションを作成します。 ポイントが割合である場合には、塗りつぶされる領域のサイズに相対的なポイントになります。 割合と長さのサイズを単一のグラデーション関数に混在させることはできません。
repeatもreflectも指定しない場合、CycleMethodはデフォルトでNO_CYCLEに設定されます。
[from <point> to <point>]も[ to <side-or-corner> ]も指定しない場合、グラデーション方向はデフォルトで「to bottom」に設定されます。
ストップは、W3Cカラー・ストップ構文に準拠し、それに従って正規化されます。
この例では、左上隅を赤、右下を黒として、塗りつぶし領域の左上から右下までグラデーションを作成します。
linear-gradient(to bottom right, red, black)
これは、次の操作に相当します。
linear-gradient(from 0% 0% to 100% 100%, red 0%, black 100%)
このさらに複雑な例では、最上部に高さ50pxのバーを3色のグラデーションで作成し、下の塗りつぶし領域の残りの部分は白にしています。
linear-gradient(from 0px 0px to 0px 50px, gray, darkgray 50%, dimgray 99%, white)
線形グラデーションの次の構文は、CSS文法に準拠していないため、JavaFX 2.0では非推奨になりました。 JavaFX 2.0 CSSパーサーはこの構文をサポートしていますが、このサポートは将来のリリースでは廃止される可能性があります。
linear (<size>, <size>) to (<size>, <size>) stops [ (<number>,<color>) ]+ [ repeat | reflect ]?
radial-gradient([ focus-angle <angle>, ]? [ focus-distance <percentage>, ]? [ center <point>, ]? radius [ <length> | <percentage> ] [ [ repeat | reflect ], ]? <color-stop>[, <color-stop>]+)
放射状グラデーションは、中心点から外側に向かって半径まで放射線状にすべての停止色を進むグラデーションを作成します。 中心点を指定しない場合、中心はデフォルトで(0,0)に設定されます。 パーセント値は、塗りつぶされる領域のサイズに相対的な値になります。 割合と長さのサイズを単一のグラデーション関数に混在させることはできません。
repeatもreflectも指定しない場合、CycleMethodはデフォルトでNO_CYCLEに設定されます。
ストップは、W3Cカラー・ストップ構文に準拠し、それに従って正規化されます。
次に、radial-gradientの使用例を示します。
radial-gradient(radius 100%, red, darkgray, black)
radial-gradient(focus-angle 45deg, focus-distance 20%, center 25% 25%, radius 50%, reflect, gray, darkgray 75%, dimgray)
放射状グラデーションの次の構文は、CSS文法に準拠していないため、JavaFX 2.0では非推奨になりました。 JavaFX 2.0 CSSパーサーはこの構文をサポートしていますが、このサポートは将来のリリースでは廃止される可能性があります。
radial [focus-angle <number> | <number> ] ]? [ focus-distance <size> ]? [ center <size,size> ]? <size> stops [ ( <number>, <color> ) ]+ [ repeat | reflect ]?
image-pattern(<string>, [<size>, <size>, <size>, <size>[, <boolean>]?]?)
パラメータは、順に次のようになります。
<string> イメージのURL。
<size> アンカー矩形のX原点。
<size> アンカー矩形のY原点。
<size> アンカー矩形の幅。
<size> アンカー矩形の高さ。
<boolean> 開始位置および終了位置がプロポーショナルか絶対かを示すプロポーショナル・フラグ。
パラメータの詳細は、ImagePatternのjavadocを参照してください。
次に、image-patternの使用例を示します。
image-pattern("images/Duke.png")
image-pattern("images/Duke.png", 20%, 20%, 80%, 80%)
image-pattern("images/Duke.png", 20%, 20%, 80%, 80%, true)
image-pattern("images/Duke.png", 20, 20, 80, 80, false)
関連するものとして、タイリングされたイメージベースの塗りつぶしを生成するための短縮形であるrepeating-image-pattern
関数があります。 これは次と同等です。
image-pattern("images/Duke.png", 0, 0, imageWidth, imageHeight, false)
repeating-image-pattern(<string>)
唯一のパラメータは、イメージのURIです。 次に、image-patternの使用例を示します。
repeating-image-pattern("com/mycompany/myapp/images/Duke.png")
<named-color> | <looked-up-color> | <rgb-color> | <hsb-color> | <color-function>
CSSは、色の名前付き定数を数多くサポートしています。 名前付きの色は、次に示すように、名前を引用符で囲まずに指定できます。
.button {
-fx-background-color: red;
}
CSSで使用可能な名前付きの色は次のとおりです。
参照色により、現在のノードやその親に設定されているその他の色プロパティを参照できます。 これは非常に強力な機能です。色の汎用パレットをシーンに指定し、アプリケーションで使用できるようになるためです。 パレットのいずれかの色を変更する場合、シーン・ツリーのどのレベルでもそれが可能であり、そのノードとそのすべての子孫に影響を与えます。 参照色は、適用されるまで参照されません。したがって、ライブであり、実行時にノードのstyleプロパティでパレットの色を置き換えるなど起こりうるすべてのスタイル変更に対応します。
次の例では、すべてのボタンのすべての背景色で、参照色abcを使用しています。
.root { abc: #f00 }
.button { -fx-background-color: abc }
RGBカラー・モデルは、数値による色指定で使用されます。 多種多様な形式がサポートされています。
#<digit><digit><digit>
| #<digit><digit><digit><digit><digit><digit>
| rgb( <integer> , <integer> , <integer> )
| rgb( <integer> %, <integer>% , <integer>% )
| rgba( <integer> , <integer> , <integer> , <number> )
| rgba( <integer>% , <integer>% , <integer> %, <number> )
次のいずれの例でも、ラベルのテキストの塗りつぶしに同じ色を指定しています。
RGB 16進: 16進表記のRGB値の形式では、#のすぐ後に3文字または6文字の16進文字が続きます。 3桁のRGB表記(#rgb)は、ゼロを追加するのではなく数字をレプリケートすることで、6桁の形式(#rrggbb)に変換されます。 たとえば、#fb0は#ffbb00に拡張されます。 これにより、white (#ffffff)を短縮表記(#fff)で指定し、ディスプレイの色深度への依存を排除できます。
RGB 10進またはパーセント: 関数表記のRGB値の形式では、「rgb(」の後に3つの数値(3つの10進整数値または3つのパーセント値)のカンマ区切りリストが続き、さらにその後に「)」が続きます。 整数値255は100%と16進表記のFまたはFFに対応し、rgb(255,255,255) = rgb(100%,100%,100%) = #FFFとなります。 数値の前後に空白文字が許可されます。
RGB +アルファ: これは、色の不透明度を指定するアルファ値を含めるようにRGBカラー・モデルを拡張したものです。 これは、アルファ値である4つ目のパラメータを取るrgba(...)形式の関数構文を使用することで実現しています。 アルファ値は、0.0 (完全に透明を表す)から1.0 (完全に不透明)までの範囲内の数値である必要があります。 rgb()関数と同じく、赤、緑、青の各値は10進整数や割合になります。 次のいずれの例でも、同じ色を指定しています。
次のように、HSB (HSVとも呼ばれます)カラー・モデルを使用して色を指定できます。
hsb( <number> , <number>% , <number>% ) | hsba( <number> , <number>% , <number>% , <number> )
最初の数値は色相で、0から360度の範囲内の数値です。 2つ目の数値は彩度で、0%から100%までの範囲内の割合です。 3つ目の数値は明度で、これも0%から100%までの範囲内の割合です。 hsba(...)形式は、最後に0.0 (完全な透明)から1.0 (完全な不透明)までの範囲内のアルファ値である4つ目のパラメータを取ります。
JavaFXは、色計算関数をサポートしています。 これらは、色スタイルが適用されるときに入力色から新しい色を計算します。 これにより、単一の基本色を使用して色テーマを指定し、その基本色から様々な色を計算できます。 色の関数には、derive()とladder()の2つがあります。
<derive> | <ladder>
派生<derive>
derive関数は、色を取得し、その色のさらに明るいバージョンまたは暗いバージョンを計算します。 2つ目のパラメータは明度オフセットで、派生する色をどの程度明るくまたは暗くするかを表します。 正の割合は色を明るくすることを示し、負の割合は色を暗くすることを示します。 値を-100%にすると完全に黒になり、0%にすると明度に変化はなく、100%にすると完全に白になります。
ラダー<ladder>
ladder(<color> , <color-stop> [, <color-stop>]+)
ladder関数は、色間で補間します。 指定のストップを使用してグラデーションを作成したかのような効果が得られ、指定の<color>の明度を使用してそのグラデーション内の色値がインデックス付けされます。 明度が0%のときはグラデーション0.0の端にある色が使用され、明度が100%のときはグラデーション1.0の端にある色が使用され、明度が50%のときはグラデーションの中間点である0.5にある色が使用されます。 グラデーションは実際にはレンダリングされないことに注意してください。 これは単に補間関数で、結果として単一の色が生成されます。
ストップは、W3Cカラー・ストップ構文に準拠し、それに従って正規化されます。
たとえば、背景の明度に応じてテキストの色を黒または白にする場合は、次を使用できます。
background: white;
-fx-text-fill: ladder(background, white 49%, black 50%);
結果として得られる-fx-text-fill値は黒になります。背景(白)の明度が100%で、グラデーションの1.0にある色が黒であるためです。 ここで背景色を黒またはダーク・グレーに変更すると、明度は50%未満になり、-fx-text-fill値はwhiteになります。
次のladder構文は、CSS文法に準拠していないため、JavaFX 2.0では非推奨になりました。 JavaFX 2.0 CSSパーサーはこの構文をサポートしていますが、このサポートは将来のリリースでは廃止される可能性があります。
ladder(<color>) stops [ ( <number> , <color> ) ]+
javafx.stage |
スタイル・クラス: .root.popup
PopupWindowにはCSSでスタイル設定できるプロパティはありませんが、PopupWindowには独自のSceneがあります。 Sceneのルートは、デフォルトで.rootスタイル・クラスを取得します。 SceneがPopupWindowのルート・シーンである場合は、.popupスタイル・クラスも追加されます。 これにより、PopupWindowのルート・シーンでは、CSSルール.root.popup { /* declarations */ }
を使用して個別のスタイルを保持できます。
javafx.scene |
スタイル・クラス: デフォルトでは空
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
GroupはParentを拡張したものです。 グループに追加のCSSプロパティは追加されません。 | |||
Parentのすべてのプロパティも保持 |
スタイル・クラス: デフォルトでは空
CSSプロパティ | 値 | デフォルト | 範囲 | 備考 |
---|---|---|---|---|
-fx-blend-mode | [ add | blue | color-burn | color-dodge | darken | difference | exclusion | green | hard-light | lighten | multiply | overlay | red | screen | soft-light | src-atop | src-in | src-out | src-over ] | null | ||
-fx-cursor | [ null | crosshair | default | hand | move | e-resize | h-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | v-resize | text | wait ] | <url> | null | 継承 | |
-fx-effect | <effect> | null | ||
-fx-focus-traversable | <boolean> | false | 例外がいくつかありますが、コントロールのデフォルト値はtrueです。 詳細は、「コントロール」を参照してください。 | |
-fx-view-order | <number> | 0 | このプロパティは、親子リストを並べ替えることなく、親子内のノードのレンダリングとピッキングの順番を変更するために使用されます。 親はviewOrderの順番を減らすことでその子をトラバースします。 | |
-fx-opacity | <number> | 1 | [0.0 ... 1.0] | 不透明度は、概念的に後処理操作であると考えることができます。 概念的には、ノード(その子孫を含む)がRGBAオフスクリーン・イメージにレンダリングされた後で、オフスクリーン・レンダリングを現在のコンポジット・レンダリングにブレンドする方法を不透明度設定に指定します。 |
-fx-rotate | <number> | 0 | これは回転の角度(度単位)です。 ゼロ度は3時(右に直角)です。 角度値は時計回りに正の値です。 回転は中心を軸とします。 | |
-fx-scale-x | <number> | 1 | 中心を軸にスケーリングします。 | |
-fx-scale-y | <number> | 1 | 中心を軸にスケーリングします。 | |
-fx-scale-z | <number> | 1 | 中心を軸にスケーリングします。 | |
-fx-translate-x | <number> | 0 | ||
-fx-translate-y | <number> | 0 | ||
-fx-translate-z | <number> | 0 | ||
visibility | [ visible | hidden | collapse | inherit ] | true (i.e, visible) | W3Cのvisibilityプロパティを参照してください。 |
CSS擬似クラス | 備考 |
---|---|
disabled | disabled変数がtrueのときに適用されます。 |
focused | focused変数がtrueのときに適用されます。 |
hover | hover変数がtrueのときに適用されます。 |
pressed | pressed変数がtrueのときに適用されます。 |
show-mnemonic | ニーモニック・アフォーダンス(通常はアンダースコア)を表示する必要があるときに適用されます。 |
スタイル・クラス: デフォルトでは空
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
ParentはNodeを拡張したものです。 親はCSSプロパティを追加しません。 | |||
Nodeのすべてのプロパティも保持 |
スタイル・クラス: 該当なし
Sceneオブジェクトには、設定可能なCSSプロパティも擬似クラスもありません。 ただし、Sceneのルート・ノードには(ノードにすでに割り当てられているスタイル・クラスに加えて)スタイル・クラスrootが割り当てられます。 Sceneのルート・ノードはアクティブなすべてのシーングラフ・ノードのルート・コンテナであるため、これは有益です。 このため、継承または参照されるプロパティのコンテナとして機能できます。
javafx.scene.image |
スタイル・クラス: image-view
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-image | <uri> | null | 相対URLは、スタイルシートのURLに対して解決されます。 |
Nodeのすべてのプロパティも保持 |
javafx.scene.layout |
スタイル・クラス: デフォルトでは空
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
AnchorPaneは、Paneを拡張したもので、新たにCSSプロパティを追加しません。 | |||
Paneのすべてのプロパティも保持 |
スタイル・クラス: デフォルトでは空
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
BorderPaneは、Paneを拡張したもので、新たにCSSプロパティを追加しません。 | |||
Paneのすべてのプロパティも保持 |
スタイル・クラス: dialog-pane
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-graphic | <uri> | null | |
Paneのすべてのプロパティも保持 |
スタイル・クラス: デフォルトでは空
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-hgap | <size> | 0 | |
-fx-vgap | <size> | 0 | |
-fx-alignment | [ top-left | top-center | top-right | center-left | center | center-right bottom-left | bottom-center | bottom-right | baseline-left | baseline-center | baseline-right ] | top-left | |
-fx-column-halignment | [ left | center | right ] | left | |
-fx-row-valignment | [ top | center | baseline | bottom ] | center | |
-fx-orientation | [ horizontal | vertical ] | horizontal | |
Paneのすべてのプロパティも保持 |
スタイル・クラス: デフォルトでは空
CSSプロパティ | 値 | デフォルト | 備考 | |
---|---|---|---|---|
-fx-hgap | <size> | 0 | ||
-fx-vgap | <size> | 0 | ||
-fx-alignment | [ top-left | top-center | top-right | center-left | center | center-right bottom-left | bottom-center | bottom-right | baseline-left | baseline-center | baseline-right ] | top-left | ||
-fx-grid-lines-visible | <boolean> | false | ||
Paneのすべてのプロパティも保持 |
スタイル・クラス: デフォルトでは空
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-spacing | <size> | 0 | |
-fx-alignment | [ top-left | top-center | top-right | center-left | center | center-right bottom-left | bottom-center | bottom-right | baseline-left | baseline-center | baseline-right ] | top-left | |
-fx-fill-height | <boolean> | true | |
Paneのすべてのプロパティも保持 |
スタイル・クラス: デフォルトでは空
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
Paneは、Regionの子を公開するようにRegionを拡張したものです。 ペインに追加のCSSプロパティは追加されません。 | |||
Regionのすべてのプロパティも保持 |
スタイル・クラス: デフォルトでは空
Regionは、CSSで背景とボーダーのスタイルを設定できる(Parentから拡張される)Nodeです。 Regionは一般に角の丸い矩形で、CSSを使用してこれを任意の図形に変更できます。 Regionには他のRegionオブジェクト(サブリージョン)を含めたり、サブコントロールを含めることができます。 次に説明するように、すべてのRegionが同じセットのCSSプロパティを保持します。
各Regionは、下から上へと次の順序でペイントされる複数のレイヤーで構成されています。
背景とボーダーのメカニズムは、CSS 3ドラフト背景とボーダー・モジュールにならって作られています。 詳細は、[4]を参照してください。
背景の塗りつぶしは、-fx-background-color、-fx-background-radius、-fx-background-insetsの各プロパティで指定します。 -fx-background-colorプロパティは、1つ以上のカンマ区切りの<paint>値の系列です。 系列の値の数によって、ペイントされる背景の矩形の数が決まります。 背景の矩形は、この<paint>値を使用して指定した順にペイントされます。 各背景の矩形では、半径および枠が異なる場合があります。 -fx-background-radiusプロパティおよび-fx-background-insetsプロパティは、カンマ区切りの値の系列(または値セット)です。 特定の背景に使用される半径および枠の値は、-fx-background-radius系列および-fx-background-insets系列の対応する位置にあります。 たとえば、-fx-background-colorプロパティに3つの値からなる系列が指定されているとします。 3つの値からなる系列は、-fx-background-radiusプロパティおよび-fx-background-insetsプロパティにも指定されている必要があります。 最初の背景は最初の半径値および最初の枠値を使用してペイントされ、2つ目の背景は2つ目の半径値および2つ目の枠値を使用してペイントされ、以下同じように続きます。
-fx-background-radiusや-fx-background-insetsなどのプロパティには、値の系列または4つの値からなるセットを含めることができます。 一連の値は空白で区切りますが、系列の値または値セットはカンマで区切ります。 -fx-background-radiusの場合、単一の値はその値を背景の矩形の4隅すべての半径に使用する必要があることを示しています。 一連の4つの値は、その順序で左上、右上、右下、左下の各隅にそれぞれ異なる半径値が使用されることを示しています。 同じように、-fx-background-insetsプロパティにも値系列または値セットを含めることができます。 -fx-background-insetsの一連の4つの値は、その順序で矩形の上、右、下、左の各端にそれぞれ異なる枠が使用されることを示しています。
背景イメージは、-fx-background-image、-fx-background-repeat、-fx-background-position、-fx-background-sizeの各プロパティで指定します。 -fx-background-image値の系列のイメージの数によって、ペイントされる背景イメージの数が決まります。 -fx-background-repeat、-fx-background-position、-fx-background-sizeの各プロパティには、値系列を含めることができます。 -fx-background-image系列のアイテムごとに、-fx-background-repeat、-fx-background-position、-fx-background-sizeの各プロパティの対応するアイテムがその背景イメージに適用されます。
ストロークで描画されたボーダーは、-fx-border-color、-fx-border-style、-fx-border-width、-fx-border-radius、-fx-border-insetsの各プロパティで指定します。 各プロパティには、アイテムの系列が含まれています。 -fx-border-colorプロパティまたは-fx-border-styleプロパティのアイテムの最大数によって、ペイントされるボーダー・レイヤーの数が決まります。 系列の各ボーダーは、-fx-border-color、-fx-border-style、-fx-border-width、-fx-border-radius、-fx-border-insetsの各プロパティの対応する系列のアイテムからの情報を使用してペイントされます。 -fx-border-colorがない場合、デフォルトの色はblackです。-fx-border-styleがない場合、デフォルトのスタイルはsolidです。
イメージ・ボーダーは、-fx-border-image-source、-fx-border-image-repeat、-fx-border-image-slice、-fx-border-image-width、-fx-border-image-insetsの各プロパティで指定します。 各プロパティには、アイテムの系列が含まれています。 -fx-border-image-sourceプロパティのアイテムの数によって、ペイントされるイメージの数が決まります。 系列の各イメージは、-fx-border-image-repeat、-fx-border-image-slice、-fx-border-image-width、-fx-border-image-insetsの各プロパティの対応する系列アイテムからの情報を使用してペイントされます。
リージョンのコンテンツは、他のコンテナと同じように、ノードのシーケンスです。 コンテンツはプログラムで設定され、CSSを使用して設定することはできません。
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
背景の塗りつぶし(「CSS Backgrounds and Borders Module Level 3: Backgrounds」を参照) | |||
-fx-region-background | javafx.scene.layout.Background | null | これはCSSから直接設定することはできず、-fx-background-color、-fx-background-image、-fx-background-insets、-fx-background-position、-fx-background-radius、-fx-background-repeat、-fx-background-sizeの各プロパティ値から作成されます。 |
-fx-background-color | <paint> [ , <paint> ]* | transparent | カンマで区切られたペイント値の系列。 |
-fx-background-insets | <size> | <size> <size> <size> <size> [ , [ <size> | <size> <size> <size> <size>] ]* | 0 0 0 0 |
カンマで区切られた、サイズ値の系列または4つのサイズ値からなるセット。 単一のサイズ値は、すべての枠が同じであることを示します。 それ以外の場合、各枠の4つの値は上、右、下、左の順に指定されます。 カンマ区切りの各値または系列の値セットが、対応する背景色に適用されます。 |
-fx-background-radius | [<size>]{1,4} [ / [<size>]{1,4} ]? [ , [<size>]{1,4} [ / [<size>]{1,4} ]? ]* | 0 0 0 0 |
「CSS Backgrounds and Borders Module Level 3: Curve Radii」と同じ構文およびセマンティクスが-fx-background-radiusに適用されます。 JavaFXは短縮形の構文のみをサポートしていることに注意してください。 カンマ区切りの各値または系列の値セットが、対応する背景色に適用されます。 |
背景イメージ(「CSS Backgrounds and Borders Module Level 3: Background Image」を参照) | |||
-fx-background-image | <uri> [ , <uri> ]* | null | カンマで区切られたイメージURIの系列。 |
-fx-background-position |
<bg-position> [ , <bg-position> ]* |
0% 0% |
カンマで区切られた<bg-position>値の系列。 系列の各bg-positionアイテムは、background-image系列の対応するイメージに適用されます。 |
-fx-background-repeat | <repeat-style> [ , <repeat-style> ]* where <repeat-style> = repeat-x | repeat-y | [repeat | space | round | stretch | no-repeat]{1,2} |
repeat repeat |
カンマで区切られた<repeat-style>値の系列。 系列の各repeat-styleアイテムは、background-image系列の対応するイメージに適用されます。 |
-fx-background-size | <bg-size> [ , <bg-size> ]* <bg-size> = [ <size> | auto ]{1,2} | cover | contain | stretch |
auto auto |
カンマで区切られた<bg-size>値の系列。 系列の各bg-sizeアイテムは、background-image系列の対応するイメージに適用されます。 |
ストロークで描画されたボーダー(「CSS Backgrounds and Borders Module Level 3: Borders」を参照) | |||
-fx-region-border | javafx.scene.layout.Border | null | これはCSSから直接設定することはできず、-fx-border-color、-fx-border-insets、-fx-border-radius、-fx-border-style、-fx-border-width、-fx-border-image-insets、-fx-border-image-repeat、-fx-border-image-slice、-fx-border-image-source、-fx-border-image-widthの各プロパティ値から作成されます。 |
-fx-border-color | <paint> | <paint> <paint> <paint> <paint> [ , [<paint> | <paint> <paint> <paint> <paint>] ]* | null |
カンマで区切られた、ペイント値の系列または4つのペイント値からなるセット。 系列のアイテムごとに、単一のペイント値が指定されている場合、そのペイントがリージョンのすべての辺のボーダーとして使用されます。4つのペイントからなるセットが指定されている場合は、それらがその順序でリージョンの上、右、下、左の各ボーダーに使用されます。 ボーダーが矩形でない場合は、セットの最初のペイント値のみが使用されます。 |
-fx-border-insets | <size> | <size> <size> <size> <size> [ , [ <size> | <size> <size> <size> <size>] ]* | null |
カンマで区切られた、枠値の系列または4つの枠値からなるセット。 系列のアイテムごとに、単一の枠値はすべての枠が同じであることを示します。4つの枠値からなるセットが指定されている場合は、それらがその順序でリージョンの上、右、下、左の各端に使用されます。 枠の系列の各アイテムが、ボーダー色の系列の対応するアイテムに適用されます。 |
-fx-border-radius | [<size>]{1,4} [ / [<size>]{1,4} ]? [ , [<size>]{1,4} [ / [<size>]{1,4} ]? ]* | null |
「CSS Backgrounds and Borders Module Level 3: Curve Radii」を参照してください。 JavaFXは短縮形の構文のみをサポートしています。 カンマ区切りの各値または系列の値セットが、対応するボーダー色に適用されます。 |
-fx-border-style |
<border-style> [ , <border-style> ]* |
null |
カンマで区切られたボーダー・スタイル値の系列。 系列の各アイテムが、ボーダー色の系列の対応するアイテムに適用されます。 segments破線スタイルには、破線セグメントの長さを表すシーケンスを定義します。 シーケンス内のエントリが、破線の不透明セグメントと透明セグメントの長さを交互に表します。 これは、ShapeのstrokeDashArray変数に対応しています。 オプションのphaseパラメータには、ストロークの先頭に対応する破線パターン内の点を定義します。 これは、ShapeのstrokeDashOffset変数に対応しています。 |
-fx-border-width | <size> | <size> <size> <size> <size> [ , [ <size> | <size> <size> <size> <size>] ]* | null |
カンマで区切られた、幅値の系列または4つの幅値からなるセット。 系列のアイテムごとに、単一の幅値はすべてのボーダー幅が同じであることを示します。4つの幅値からなるセットが指定されている場合は、それらがその順序で上、右、下、左の各ボーダー幅に使用されます。 ボーダーが矩形でない場合は、最初の幅値のみが使用されます。 幅の系列の各アイテムが、ボーダー色の系列の対応するアイテムに適用されます。 |
-fx-border-image-source | <uri> [ , <uri> ]* | null |
カンマで区切られたイメージURIの系列。 |
-fx-border-image-insets | <size> | <size> <size> <size> <size> [ , [ <size> | <size> <size> <size> <size>] ]* | 0 0 0 0 |
カンマで区切られた、枠値の系列または4つの枠値からなるセット。 系列のアイテムごとに、単一の枠値はすべての枠が同じであることを示します。4つの枠値からなるセットが指定されている場合は、それらがその順序でリージョンの上、右、下、左の各端に使用されます。 枠の系列の各アイテムが、ボーダー・イメージの系列の対応するイメージに適用されます。 |
-fx-border-image-repeat | <repeat-style> [ , <repeat-style> ]* where <repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2} |
repeat repeat |
カンマで区切られたrepeat-style値の系列。 系列の各アイテムが、ボーダー・イメージの系列の対応するイメージに適用されます。 |
-fx-border-image-slice |
[<size> | <size> <size> <size> <size> ] fill? [ , [ <size> | <size> <size> <size> <size> <size> ] fill? ]* |
100% |
カンマで区切られた、イメージ区分値の系列または4つの値からなるセット。 系列の各アイテムが、ボーダー・イメージの系列の対応するイメージに適用されます。 系列のアイテムごとに、4つの値が指定されている場合は、それらが上、右、下、左の各区分のサイズを表します。 これは、イメージを左上隅、上端、右上隅、右端、右下隅、下端、左下隅、左端、中央の9個のリージョンに効果的に分割します。 1つの値が指定されている場合は、この値が4つすべての端の区分値に使用されます。 中央区分は、fillが指定されている場合には保持され、それ以外の場合には破棄されます。 ここではパーセント値を使用することもでき、その場合、値はソース・イメージに対してプロポーショナルであるとみなされます。 |
-fx-border-image-width | <size> | <size> <size> <size> <size> [ , [ <size> | <size> <size> <size> <size>] ]* | 1 1 1 1 |
カンマで区切られた、幅値の系列または4つの幅値からなるセット。 系列のアイテムごとに、単一の幅値はすべてのボーダー幅が同じであることを示します。4つの幅値からなるセットが指定されている場合は、それらがその順序で上、右、下、左の各ボーダー幅に使用されます。 ボーダーが矩形でない場合は、最初の幅値のみが使用されます。 幅の系列の各アイテムが、ボーダー・イメージの系列の対応するアイテムに適用されます。 ここではパーセント値を使用することもでき、その場合、値はボーダー・イメージ領域に対してプロポーショナルであるとみなされます。 |
その他 | |||
-fx-padding | <size> | <size> <size> <size> <size> | 0 0 0 0 |
カンマで区切られた4つの余白の値のセット。 系列のアイテムごとに、余白の値が単一であることは、すべての余白が同じであることを示します。4つの余白の値からなるセットが指定されている場合は、それらがその順序でリージョンの上、右、下、左の各端に使用されます。 |
-fx-position-shape | <boolean> | true | 図形は、trueの場合にはリージョンの幅または高さの範囲で中央揃えされ、それ以外の場合にはソース位置に配置されます。 図形文字列が指定されていない場合は、何も行われません。 |
-fx-scale-shape | <boolean> | true | 図形は、trueの場合にはリージョンのサイズに適合するようにスケーリングされ、それ以外の場合にはソース・サイズになり、その位置はposition-shapeプロパティの値によって異なります。 図形文字列が指定されていない場合は、何も行われません。 |
-fx-shape | "<string>" | null | SVGパス文字列。 ここに図形を指定することで、リージョンは矩形または角の丸い矩形ではなくその図形になります。 このパス文字列の構文は、[3]に指定されています。 |
-fx-snap-to-pixel | <boolean> | true | このリージョンで子をレイアウトする際に、位置/スペーシングを丸めて、サイズ値の上限をピクセル境界にするかどうかを定義します |
-fx-region-background | null | このプロパティは、-fx-background-colorや-fx-background-imageを指定することで設定します。 オプションで、-fx-background-insets、-fx-background-radius、-fx-background-position、-fx-background-repeat、-fx-background-sizeの各プロパティも設定できます。 リージョンの背景をnullに設定するためには、スタイル-fx-background-color: null; -fx-background-image: null;を指定します。 現時点では、-fx-region-backgroundの短縮形表記はありません。 | |
-fx-region-border | null | このプロパティは、-fx-border-colorや-fx-border-imageを指定することで設定します。 オプションで、-fx-border-insets、-fx-border-radius、-fx-border-style、-fx-border-width、-fx-border-image-insets、-fx-border-image-repeat、-fx-border-image-slice、-fx-border-image-widthの各プロパティも指定できます。 リージョンの背景をnullに設定するためには、スタイル-fx-border-color: null; -fx-border-image: null;を指定します。 現時点では、-fx-region-borderの短縮形表記はありません。 | |
-fx-min-height、-fx-pref-height、-fx-max-height | <size> | -1 | パーセント値は有用ではありません。親がレイアウトされる前に、実際の値がリージョンの親の幅や高さから計算されるためです。 |
-fx-min-width、-fx-pref-width、-fx-max-width | <size> | -1 | パーセント値は有用ではありません。親がレイアウトされる前に、実際の値がリージョンの親の幅や高さから計算されるためです。 |
Parentのすべてのプロパティも保持 |
スタイル・クラス: デフォルトでは空
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-alignment | [ top-left | top-center | top-right | center-left | center | center-right bottom-left | bottom-center | bottom-right | baseline-left | baseline-center | baseline-right ] | top-left | |
Paneのすべてのプロパティも保持 |
スタイル・クラス: デフォルトでは空
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-orientation | [ horizontal | vertical ] | horizontal | |
-fx-pref-rows | <integer> | 5 | |
-fx-pref-columns | <integer> | 5 | |
-fx-pref-tile-width | <size> | -1 | |
-fx-pref-tile-height | <size> | -1 | |
-fx-hgap | <size> | 0 | |
-fx-vgap | <size> | 0 | |
-fx-alignment | [ top-left | top-center | top-right | center-left | center | center-right bottom-left | bottom-center | bottom-right | baseline-left | baseline-center | baseline-right ] | top-left | |
-fx-tile-alignment | [ top-left | top-center | top-right | center-left | center | center-right bottom-left | bottom-center | bottom-right | baseline-left | baseline-center | baseline-right ] | center | |
Paneのすべてのプロパティも保持 |
スタイル・クラス: デフォルトでは空
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-spacing | <size> | 0 | |
-fx-alignment | [ top-left | top-center | top-right | center-left | center | center-right bottom-left | bottom-center | bottom-right | baseline-left | baseline-center | baseline-right ] | top-left | |
-fx-fill-width | <boolean> | true | |
Paneのすべてのプロパティも保持 |
javafx.scene.media |
スタイル・クラス: media-view
javafx.scene.shape |
スタイル・クラス: デフォルトでは空
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-fill | <paint> | BLACK | |
-fx-smooth | <boolean> | true | |
-fx-stroke | <paint> | null | |
-fx-stroke-type | [ inside | outside | centered ] | centered | |
-fx-stroke-dash-array | <size>[ <size>]+ | コメントを参照 | 初期値は空の配列の値で、事実上実線です。 |
-fx-stroke-dash-offset | <number> | 0 | |
-fx-stroke-line-cap | [ square | butt | round ] | square | |
-fx-stroke-line-join | [ miter | bevel | round ] | miter | |
-fx-stroke-miter-limit | <number> | 10 | |
-fx-stroke-width | <size> | 1 | |
Nodeのすべてのプロパティも保持 |
スタイル・クラス: デフォルトでは空
Arcノードには、ShapeおよびNodeのすべてのプロパティがあります。
スタイル・クラス: デフォルトでは空
Circleノードには、ShapeおよびNodeのすべてのプロパティがあります。
スタイル・クラス: デフォルトでは空
CubicCurveノードには、ShapeおよびNodeのすべてのプロパティがあります。
スタイル・クラス: デフォルトでは空
Ellipseノードには、ShapeおよびNodeのすべてのプロパティがあります。
スタイル・クラス: デフォルトでは空
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-fill | <paint> | null | |
-fx-stroke | <paint> | black | |
Shapeのすべてのプロパティも保持 |
スタイル・クラス: デフォルトでは空
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-fill | <paint> | null | |
-fx-stroke | <paint> | black | |
Shapeのすべてのプロパティも保持 |
スタイル・クラス: デフォルトでは空
Polygonノードには、ShapeおよびNodeのすべてのプロパティがあります。
スタイル・クラス: デフォルトでは空
QuadCurveノードには、ShapeおよびNodeのすべてのプロパティがあります。
スタイル・クラス: デフォルトでは空
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-arc-height | <size> | 0 | |
-fx-arc-width | <size> | 0 | |
Shapeのすべてのプロパティも保持 |
スタイル・クラス: デフォルトでは空
SVGPathノードには、ShapeおよびNodeのすべてのプロパティがあります。
javafx.scene.text |
スタイル・クラス: デフォルトでは空
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-font | <font> | Font.DEFAULT | 継承 |
-fx-font-smoothing-type | [ gray | lcd ] | gray | |
-fx-strikethrough | <boolean> | false | |
-fx-text-alignment | [ left | center | right | justify ] | left | 継承 |
-fx-text-origin | [ baseline | top | bottom ] | baseline | |
-fx-underline | <boolean> | false | |
フォント・プロパティおよびShapeのすべてのプロパティも保持 |
javafx.scene.web |
スタイル・クラス: web-view
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-context-menu-enabled | <boolean> | true | |
-fx-font-smoothing-type | [ gray | lcd ] | lcd | |
-fx-font-scale | <number> | 1 | |
-fx-min-width | <size> | 0 | |
-fx-min-height | <size> | 0 | |
-fx-pref-width | <size> | 800 | |
-fx-pref-height | <size> | 600 | |
-fx-max-width | <size> | Double.MAX_VALUE | |
-fx-max-height | <size> | Double.MAX_VALUE | |
Parentのすべてのプロパティも保持 |
javafx.scene.control |
JavaFX 2.0から、すべてのコントロールのデフォルトのスキンがCSSからのスタイル設定をサポートするようになりました。 これは、Regionというレイアウト・オブジェクトからスキンを構築することで実現しています。 コントロールのスタイル・プロパティのほとんどは、コントロールのスキンで構成されているRegionオブジェクトから提供されます。 スキンのサブストラクチャの各Regionオブジェクトには、個別にスタイル設定できるように独自のスタイル・クラスがあります。 Regionから提供されるプロパティに加えて、コントロール自体がCSSプロパティを提供することもあります。 最後に、Nodeによって定義されているものに加えて、コントロールでverticalやhorizontalなどの擬似クラスを定義する場合もあります。
次の例外を除き、コントロールにフォーカスを設定できます。 つまり、ControlではfocusTraversableプロパティの初期値がtrueに設定されますが、NodeではfocusTraversableプロパティの初期値がfalseになります。 デフォルトでは、フォーカスを設定できないコントロールがあります。Accordion、Cell、Label、MenuBar、ProgressBar、ProgressIndicator、ScrollBar、ScrollPane、Separator、SplitPane、ToolBarです。
スタイル・クラス: accordion
Accordionコントロールには、Controlのすべてのプロパティと擬似クラスがあります。
スタイル・クラス: button
Buttonコントロールには、ButtonBaseのすべてのプロパティがあります。
CSS擬似クラス | 備考 |
---|---|
cancel | 他にイベントを消費する方法がない場合に、このButtonがVK_ESCを受け取ると適用されます。 |
default | 他にイベントを消費する方法がない場合に、このButtonがVK_ENTERを受け取ると適用されます。 |
ButtonBaseのすべての擬似クラスも保持 |
ButtonBaseコントロールには、Labeledのすべてのプロパティがあります。
CSS擬似クラス | 備考 |
---|---|
armed | armed変数がtrueのときに適用されます。 |
Labeledのすべての擬似クラスも保持 |
スタイル・クラス: cell
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-cell-size | <size> | 24 | セル・サイズ。 これは、垂直のListView、TreeView、TableViewのいずれかの場合には高さ、水平のListViewの場合には幅になります。 |
Cellコントロールには、Labeledのすべてのプロパティがあります。 |
CSS擬似クラス | 備考 |
---|---|
空 | empty変数がtrueのときに適用されます。 |
filled | empty変数がfalseのときに適用されます。 |
selected | selected変数がtrueのときに適用されます。 |
Labeledのすべての擬似クラスも保持 |
スタイル・クラス: check-box
CheckBoxコントロールには、ButtonBaseのすべてのプロパティがあります。
CSS擬似クラス | 備考 |
---|---|
selected | selected変数がtrueのときに適用されます。 |
determinate | indeterminate変数がfalseのときに適用されます。 |
indeterminate | indeterminate変数がtrueのときに適用されます。 |
ButtonBaseのすべての擬似クラスも保持 |
CSS擬似クラス | 備考 |
---|---|
selected | このアイテムが選択されている場合に適用されます。 |
スタイル・クラス: choice-box
ChoiceBoxコントロールには、Controlのすべてのプロパティと擬似クラスがあります。
スタイル・クラス: color-picker
ColorPickerコントロールには、ComboBoxBaseのすべてのプロパティと擬似クラスがあります。
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-color-label-visible | <boolean> | true | |
Controlのすべてのプロパティも保持 |
スタイル・クラス: combo-box
ComboBoxコントロールには、ComboBoxBaseのすべてのプロパティと擬似クラスがあります。
スタイル・クラス: combo-box-base
ComboBoxBaseコントロールには、Controlのすべてのプロパティがあります。
CSS擬似クラス | 備考 |
---|---|
editable | editable変数がtrueのときに適用されます。 |
showing | showing変数がtrueのときに適用されます。 |
armed | armed変数がtrueのときに適用されます。 |
スタイル・クラス: context-menu
ContextMenuコントロールには、PopupControlのすべてのプロパティがあります。
ContextMenuを表示したコントロールのセレクタを使用することで、ContextMenuのセレクタがより具体的なものになる場合があります。 次に例を示します。.choice-box > .context-menu { ... }
Controlクラスには、Regionのすべてのプロパティがあります。
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-skin | <string> | null | ControlのSkinのクラス名。 |
-fx-focus-traversable | <boolean> | true | Controlは、focusTraversableプロパティのデフォルト値をtrueに設定します。 次にあげるコントロールのfocusTraversableプロパティのデフォルト値はfalseです。Accordion、Cell、Label、MenuBar、ProgressBar、ProgressIndicator、ScrollBar、ScrollPane、Separator、SplitPane、ToolBarです。 |
スタイル・クラス: date-picker
DatePickerコントロールには、ComboBoxBaseのすべてのプロパティと擬似クラスがあります
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-show-week-numbers | <boolean> | resource bundleプロパティ"DatePicker.showWeekNumbers"に国コードが含まれている場合は、true。 | |
Controlのすべてのプロパティも保持 |
スタイル・クラス: html-editor
Hyperlinkコントロールには、Controlのすべてのプロパティがあります。
スタイル・クラス: hyperlink
Hyperlinkコントロールには、ButtonBaseのすべてのプロパティがあります。
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-cursor | [ null | crosshair | default | hand | move | e-resize | h-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | v-resize | text | wait ] | <url> | hand | 継承 |
CSS擬似クラス | 備考 |
---|---|
visited | visited変数がtrueのときに適用されます。 |
ButtonBaseのすべての擬似クラスも保持 |
スタイル・クラス: indexed-cell
IndexedCellコントロールには、Cellのすべてのプロパティがあります。
CSS擬似クラス | 備考 | ||
---|---|---|---|
even | このセルのインデックスが偶数である場合に適用されます。 | ||
odd | このセルのインデックスが奇数である場合に適用されます。 | ||
Cellのすべての擬似クラスも保持 |
スタイル・クラス: label
Labelには、Labeledのすべてのプロパティと擬似クラス状態があります。
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-alignment | [ top-left | top-center | top-right | center-left | center | center-right bottom-left | bottom-center | bottom-right | baseline-left | baseline-center | baseline-right ] | center-left | |
-fx-text-alignment | [ left | center | right | justify ] | left | CSS仕様のtext-alignは、JavaFXのtextAlignmentにマップされます。 |
-fx-text-overrun | [ center-ellipsis | center-word-ellipsis | clip | ellipsis | leading-ellipsis | leading-word-ellipsis | word-ellipsis ] | ellipsis | |
-fx-wrap-text | <boolean> | false | |
-fx-font | <font> | プラットフォーム依存 | 継承 初期値は、Font.getDefault()の値です。 |
-fx-underline | <boolean> | false | |
-fx-graphic | <uri> | null | |
-fx-content-display | [ top | right | bottom | left | center | right | graphic-only | text-only ] | left | |
-fx-graphic-text-gap | <size> | 4 | |
-fx-label-padding | <size> | <size> <size> <size> <size> | [0,0,0,0] | |
-fx-text-fill | <paint> | black | |
-fx-ellipsis-string | <string> | ... | |
Controlのプロパティも保持 |
スタイル・クラス: list-cell
ListCellコントロールには、IndexedCellの設定可能なすべてのプロパティと擬似クラスがあります。
スタイル・クラス: list-view
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-orientation | [ horizontal | vertical ] | vertical |
CSS擬似クラス | 備考 |
---|---|
horizontal | このListViewが水平である場合に適用されます。 |
vertical | このListViewが垂直である場合に適用されます。 |
スタイル・クラス: menu
CSS擬似クラス | 備考 |
---|---|
showing | このMenuが表示されている場合に適用されます。 |
Controlのすべての擬似クラスも保持 |
スタイル・クラス: menu-bar
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-use-system-menu-bar | <boolean> | false | |
Controlのすべてのプロパティも保持 |
MenuBarには、Controlのすべての擬似クラス状態があります。
スタイル・クラス: menu-button
MenuButtonコントロールには、ButtonBaseのすべてのプロパティがあります。
CSS擬似クラス | 備考 |
---|---|
openvertically | openVertically変数がtrueの場合に適用されます。 |
showing | showing変数がtrueの場合に適用されます。 |
Nodeのすべての擬似クラスも保持 |
スタイル・クラス: menu-item
スタイル・クラス: pagination
Paginationには、Controlのすべての擬似クラス状態があります。
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-max-page-indicator-count | <number> | 10 | |
-fx-arrows-visible | <boolean> | true | |
-fx-tooltip-visible | <boolean> | false | trueに設定すると、ページ番号を表示するツールチップがページ・インジケータに設定されます。 このプロパティは、ツールチップをページ・インジケータに表示するかどうかを制御します。Paginationコントロール自体に設定またはインストールされているツールチップの可視性には影響を与えません。 |
-fx-page-information-visible | <boolean> | true | |
-fx-page-information-alignment | [ top | bottom | left | right ] | bottom | |
Controlのすべてのプロパティも保持 |
スタイル・クラス: password-field
PasswordFieldコントロールには、TextFieldのすべてのプロパティがあります。
PopupControlはPopupWindowでもあるため、そのルート・ノードにはスタイル・クラス.root.popupがあります。
スタイル・クラス: progress-bar
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-indeterminate-bar-length | <number> | 60 | |
-fx-indeterminate-bar-escape | <boolean> | true | |
-fx-indeterminate-bar-flip | <boolean> | true | |
-fx-indeterminate-bar-animation-time | <number> | 2.0 | |
Controlのすべてのプロパティも保持 |
CSS擬似クラス | 備考 |
---|---|
determinate | indeterminate変数がfalseの場合に適用されます。 |
indetermindate | indeterminate変数がtrueの場合に適用されます。 |
Controlのすべての擬似クラスも保持 |
スタイル・クラス: progress-indicator
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-indeterminate-segment-count | <number> | 8 | |
-fx-progress-color | <paint> | null | |
-fx-spin-enabled | <boolean> | false | |
Controlのすべてのプロパティも保持 |
CSS擬似クラス | 備考 |
---|---|
determinate | indeterminate変数がfalseの場合に適用されます。 |
indetermindate | indeterminate変数がtrueの場合に適用されます。 |
Controlのすべての擬似クラスも保持 |
スタイル・クラス: radio-button
RadioButtonコントロールには、ToggleButtonのすべてのプロパティがあります。
CSS擬似クラス | 備考 |
---|---|
selected | このアイテムが選択されている場合に適用されます。 |
スタイル・クラス: scroll-bar
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-orientation | [ horizontal | vertical ] | horizontal | |
-fx-block-increment | <number> | 10 | |
-fx-unit-increment | <number> | 1 |
CSS擬似クラス | 備考 |
---|---|
vertical | このScrollBarが垂直である場合に適用されます。 |
horizontal | このScrollBarが水平である場合に適用されます。 |
Controlのすべての擬似クラスも保持 |
スタイル・クラス: scroll-pane
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-fit-to-width | <boolean> | false | |
-fx-fit-to-height | <boolean> | false | |
-fx-pannable | <boolean> | false | |
-fx-hbar-policy | [ never | always | as-needed ] | as-needed | |
-fx-vbar-policy | [ never | always | as-needed ] | as-needed | |
Controlのすべてのプロパティも保持 |
CSS擬似クラス | 備考 |
---|---|
pannable | このScrollPaneがパン可能である場合に適用されます。 |
fitToWidth | このScrollPaneがfitToWidthの場合に適用されます。 |
fitToHeight | このScrollPaneがfitToHeightの場合に適用されます。 |
Controlのすべての擬似クラスも保持 |
スタイル・クラス: separator
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-orientation | [ horizontal | vertical ] | horizontal | |
-fx-halignment | [ left | center | right ] | center | |
-fx-valignment | [ top | center | baseline | bottom ] | center | |
Controlのすべてのプロパティも保持 |
CSS擬似クラス | 備考 |
---|---|
horizontal | このSeparatorが水平である場合に適用されます。 |
vertical | このSeparatorが垂直である場合に適用されます。 |
Controlのすべての擬似クラスも保持 |
スタイル・クラス: spinner
デフォルト・スタイル・クラス"spinner"は、矢印を縦並びで右側に表示します。 Spinnerのレイアウトを制御するために、次のスタイル・クラスをデフォルト・スタイル・クラスと組み合せて使用することもできます。
Style Class | コメント |
---|---|
arrows-on-right-horizontal | 水平方向(左向きと右向き)の矢印がSpinnerの右側に配置されます |
arrows-on-left-vertical | 垂直方向(上向きと下向き)の矢印がSpinnerの左側に配置されます |
arrows-on-left-horizontal | 水平方向(左向きと右向き)の矢印がSpinnerの左側に配置されます |
split-arrows-vertical | スピナーの幅全体にわたって上下に伸びた矢印が配置されます |
split-arrows-horizontal | Spinnerの左側に減分矢印、右側に増分矢印が配置されます |
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
Controlのすべてのプロパティも保持 |
CSS擬似クラス | 備考 |
---|---|
Controlのすべての擬似クラスも保持 |
スタイル・クラス: slider
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-orientation | [ horizontal | vertical ] | horizontal | |
-fx-show-tick-labels | <boolean> | false | |
-fx-show-tick-marks | <boolean> | false | |
-fx-major-tick-unit | <number> | 25 | |
-fx-minor-tick-count | <integer> | 3 | |
-fx-show-tick-labels | <boolean> | false | |
-fx-snap-to-ticks | <boolean> | false | |
-fx-block-increment | <integer> | 10 | |
Controlのすべてのプロパティも保持 |
CSS擬似クラス | 備考 |
---|---|
horizontal | このSliderが水平である場合に適用されます。 |
vertical | このSliderが垂直である場合に適用されます。 |
Controlのすべての擬似クラスも保持 |
スタイル・クラス: split-menu-button
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
MenuButtonのすべてのプロパティも保持 |
スタイル・クラス: split-pane
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-orientation | [ horizontal | vertical ] | horizontal | |
Controlのすべてのプロパティも保持 |
CSS擬似クラス | 備考 |
---|---|
horizontal | このSliderが水平である場合に適用されます。 |
vertical | このSliderが垂直である場合に適用されます。 |
Controlのすべての擬似クラスも保持 |
スタイル・クラス: tab-pane
注意: styleclassは、TabPaneがフローティングである場合にはtab-pane floatingです。
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-tab-min-width | <integer> | 0 | |
-fx-tab-max-width | <integer> | Double.MAX_VALUE | |
-fx-tab-min-height | <integer> | 0 | |
-fx-tab-max-height | <integer> | Double.MAX_VALUE | |
-fx-open-tab-animation | [ grow | none ] | grow | noneは、タブを開くアニメーションを無効にします。 |
-fx-close-tab-animation | [ grow | none ] | grow | noneは、タブを閉じるアニメーションを無効にします。 |
Controlのすべてのプロパティも保持 |
CSS擬似クラス | 備考 |
---|---|
top | 辺が上辺である場合に適用されます。 |
right | 辺が右辺である場合に適用されます。 |
bottom | 辺が下辺である場合に適用されます。 |
left | 辺が左辺である場合に適用されます。 |
Controlのすべての擬似クラスも保持 |
スタイル・クラス: column-header
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-size | <size> | 20 | 表の列ヘッダーのサイズ。 |
Regionのすべてのプロパティも保持 |
CSS擬似クラス | 備考 |
---|---|
last-visible | これが表の最後に表示される列である場合に適用されます。 |
Nodeのすべての擬似クラスも保持 |
スタイル・クラス: table-view
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-fixed-cell-size | <size> | -1 | ゼロよりも大きい値は、表の固定セル・サイズを設定します。 ゼロ未満の値は、固定セル・サイズを無効にします。 |
Controlのすべてのプロパティも保持 |
CSS擬似クラス | 備考 |
---|---|
cell-selection | このTableViewの選択モデルがセル選択である場合に適用されます。 |
row-selection | このTableViewの選択モデルが行選択である場合に適用されます。 |
Nodeのすべての擬似クラスも保持 |
スタイル・クラス: text-area
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-pref-column-count | number | 40 | |
-fx-pref-row-count | number | 10 | |
-fx-wrap-text | boolean | false | |
TextInputControlのすべてのプロパティも保持 |
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-font | <font> | null | 継承 |
-fx-text-fill | <paint> | black | |
-fx-prompt-text-fill | <paint> | gray | |
-fx-highlight-fill | <paint> | dodgerblue | |
-fx-highlight-text-fill | <paint> | white | |
-fx-display-caret | <boolean> | true | |
フォント・プロパティおよびControlのすべてのプロパティも保持 |
CSS擬似クラス | 備考 |
---|---|
readonly | このTextInputControlが編集不可である場合に適用されます。 |
Controlのすべての擬似クラスも保持 |
スタイル・クラス: text-field
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-alignment | [ top-left | top-center | top-right | center-left | center | center-right bottom-left | bottom-center | bottom-right | baseline-left | baseline-center | baseline-right ] | center-left | |
-fx-pref-column-count | number | 12 | |
TextInputControlのすべてのプロパティも保持 |
TextFieldには、TextInputControlのすべての擬似クラス状態があります。
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-animated | <boolean> | true | |
-fx-collapsible | <boolean> | true | |
フォント・プロパティおよびLabeledのすべてのプロパティも保持 |
CSS擬似クラス | 備考 |
---|---|
expanded | このTitledPaneが展開される場合に適用されます。 |
collapsed | このTitledPaneが縮小される場合に適用されます。 |
Labeledのすべての擬似クラスも保持 |
スタイル・クラス: toggle-button
ToggleButtonコントロールには、ButtonBaseのすべてのプロパティがあります。
CSS擬似クラス | 備考 |
---|---|
selected | このToggleButtonが選択される場合に適用されます。 |
ButtonBaseのすべての擬似クラスも保持 |
スタイル・クラス: tool-bar
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-orientation | [ horizontal | vertical ] | horizontal | |
Controlのすべてのプロパティも保持 |
CSS擬似クラス | 備考 |
---|---|
horizontal | このToolBarが水平である場合に適用されます。 |
vertical | このToolBarが垂直である場合に適用されます。 |
Controlのすべての擬似クラスも保持 |
スタイル・クラス: tooltip
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-text-alignment | [ left | center | right | justify ] | left | |
-fx-text-overrun | [ center-ellipsis | center-word-ellipsis | clip | ellipsis | leading-ellipsis | leading-word-ellipsis | word-ellipsis ] | ellipsis | |
-fx-wrap-text | <boolean> | false | |
-fx-graphic | <uri> | null | |
-fx-content-display | [ top | right | bottom | left | center | right | graphic-only | text-only ] | left | |
-fx-graphic-text-gap | <size> | 4 | |
-fx-font | <font> | Font.DEFAULT | 継承 |
-fx-show-delay | <duration> | 1000ms | |
-fx-show-duration | <duration> | 5000ms | |
-fx-hide-delay | <duration> | 200ms |
スタイル・クラス: tree-cell
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-indent | <size> | 10 | 左マージンを取得するためにtreeItem.levelと乗算する空白の量 |
IndexedCellのすべてのプロパティも保持 |
CSS擬似クラス | 備考 |
---|---|
expanded | このセルが展開される場合に適用されます。 |
collapsed | このセルが展開されない場合に適用されます。 |
IndexedCellのすべての擬似クラスも保持 |
スタイル・クラス: tree-table-cell
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
IndexedCellのすべてのプロパティも保持 |
CSS擬似クラス | 備考 |
---|---|
last-visible | これが最後の表示可能なセル(通常はTreeTableView内の一番右のセル)の場合は、true |
IndexedCellのすべての擬似クラスも保持 |
スタイル・クラス: tree-table-view
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-fixed-cell-size | <size> | Region.USE_COMPUTED_SIZE | CSSで-fx-cell-sizeプロパティと-fx-fixed-cell-sizeプロパティの両方が指定されている場合、-fx-fixed-cell-sizeが優先されます。 |
また、Controlのすべてのプロパティと擬似クラス状態を持ちます |
スタイル・クラス: tree-view
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-fixed-cell-size | <size> | Region.USE_COMPUTED_SIZE | CSSで-fx-cell-sizeプロパティと-fx-fixed-cell-sizeプロパティの両方が指定されている場合、-fx-fixed-cell-sizeが優先されます。 |
また、Controlのすべてのプロパティと擬似クラス状態を持ちます |
javafx.scene.chart |
スタイル・クラス | 備考 | プロパティ |
---|---|---|
"chart-series-area-line series<i> default-color<j>" | <i>は系列のインデックスで、<j>は系列の色インデックスです。 | Node |
"chart-series-area-fill series<i> default-color<j>" | <i>は系列のインデックスで、<j>は系列の色インデックスです。 | Path |
"chart-area-symbol series<i> data<j> default-color<k>" | <i>は系列のインデックスで、<j>は系列内のデータのインデックスで、<k>は系列の色インデックスです。 | Path |
"chart-area-symbol series<i> area-legend-symbol default-color<j>" | <i>は系列のインデックスで、<j>は系列の色インデックスです。 | LegendItem |
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
XYChartのすべてのプロパティを保持 |
スタイル・クラス: axis
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-side | Side | null | |
-fx-tick-length | <size> | 8 | |
-fx-tick-label-font | <font> | 8 system | |
-fx-tick-label-fill | <paint> | black | |
-fx-tick-label-gap | <size> | 3 | |
-fx-tick-mark-visible | <boolean> | true | |
-fx-tick-labels-visible | <boolean> | true | |
Regionのすべてのプロパティを保持 |
スタイル・クラス | 備考 | プロパティ |
---|---|---|
"bar-chart" | ||
"chart-bar series<i> data<j> default-color<k>" | <i>は系列のインデックスで、<j>は系列内のデータのインデックスで、<k>は系列の色インデックスです。 データ値が負である場合、negativeスタイル・クラスが追加されます。たとえば、.negative.chart-bar などです。 |
Node |
"chart-bar series<i> bar-legend-symbol default-color<j>" | <i>は系列のインデックスで、<j>は系列の色インデックスです。 | LegendItem |
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-bar-gap | <number> | 4 | |
-fx-category-gap | <number> | 10 | |
XYChartのすべてのプロパティを保持 |
スタイル・クラス | 備考 | プロパティ |
---|---|---|
"chart-bubble series<i> data<j> default-color<k>" | <i>は系列のインデックスで、<j>は系列内のデータのインデックスで、<k>は系列の色インデックスです。 | Node |
"chart-bubble series<i> bubble-legend-symbol default-color<j>" | <i>は系列のインデックスで、<j>は系列の色インデックスです。 | LegendItem |
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
XYChartのすべてのプロパティを保持 |
スタイル・クラス: axis
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-start-margin | <number> | 5 | 軸の開始点と最初の目盛の間の余白 |
-fx-end-margin | <number> | 5 | 軸の開始点と最初の目盛の間の余白 |
-fx-gap-start-and-end | <boolean> | true | これがtrueの場合は、目盛の間の半分のスペースが開始点と終了点に残されます |
Axisのすべてのプロパティを保持 |
スタイル・クラス: chart
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-legend-side | Side | bottom | |
-fx-legend-visible | <boolean> | true | |
-fx-title-side | Side | top | |
Regionのすべてのプロパティを保持 |
スタイル・クラス: chart-legend
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
Regionのすべてのプロパティを保持 |
スタイル・クラス | 備考 | プロパティ |
---|---|---|
"chart-series-line series<i> default-color<j>" | <i>は系列のインデックスで、<j>は系列の色インデックスです。 | Node |
"chart-line-symbol series<i> data<j> default-color<k>" | <i>は系列のインデックスで、<j>は系列内のデータのインデックスで、<k>は系列の色インデックスです。 | Node |
"chart-line-symbol series<i> default-color<j>" | <i>は系列のインデックスで、<j>は系列の色インデックスです。 | LegendItem |
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-create-symbols | <boolean> | true | |
XYChartのすべてのプロパティを保持 |
スタイル・クラス: axis
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-tick-unit | <number> | 5 | データ単位の各大目盛の間の値。 |
ValueAxisのすべてのプロパティを保持 |
スタイル・クラス | 備考 | プロパティ |
---|---|---|
"chart-pie data<i> default-color<j>" | <i>はデータのインデックスで、<j>は系列の色インデックスです。 データ値が負である場合、negativeスタイル・クラスが追加されます。たとえば、.negative.chart-pie などです。 |
Node |
"chart-pie-label-line;" | Path | |
"chart-pie-label;" | Text | |
"pie-legend-symbol <i番目のデータ・アイテムのスタイル・クラス>" | 凡例の各アイテムには、スタイル・クラスpie-legend-symbolに加え、対応するデータ・アイテムのスタイル・クラスもあります。 | LegendItem |
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-clockwise | <boolean> | true | |
-fx-pie-label-visible | <boolean> | true | |
-fx-label-line-length | <size> | 20 | |
-fx-start-angle | <number> | 0 | |
Chartのすべてのプロパティを保持 |
スタイル・クラス | 備考 | プロパティ |
---|---|---|
"chart-symbol series<i> data<j> default-color<k>" | <i>は系列のインデックスで、<j>は系列内のデータのインデックスで、<k>は系列の色インデックスです。 | Node |
"chart-symbol series<i> data0 default-color0" | LegendItemシンボルには、系列の最初のシンボルのスタイル・クラスが割り当てられます。 | LegendItem |
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
XYChartのすべてのプロパティを保持 |
スタイル・クラス: axis
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-minor-tick-length | <size> | 5 | |
-fx-minor-tick-count | <size> | 5 | |
-fx-minor-tick-visible | <boolean> | true | |
Axisのすべてのプロパティを保持 |
スタイル・クラス: set by sub-type
CSSプロパティ | 値 | デフォルト | 備考 |
---|---|---|---|
-fx-alternative-column-fill-visible | <boolean> | true | |
-fx-alternative-row-fill-visible | <boolean> | true | |
-fx-horizontal-grid-lines-visible | <boolean> | true | |
-fx-horizontal-zero-line-visible | <boolean> | true | |
-fx-vertical-grid-lines-visible | <boolean> | true | |
-fx-vertical-zero-line-visible | <boolean> | true | |
chartのすべてのプロパティを保持 |
[1] CSS 2.1: http://www.w3.org/TR/CSS21/
[2] CSS 3進行中の作業http://www.w3.org/Style/CSS/current-work (2010年5月)
[3] SVGパス: http://www.w3.org/TR/SVG/paths.html
[4] CSS Backgrounds and Borders Module Level 3: http://www.w3.org/TR/css3-background/
[5] Uniform Resource Identifier (URI): 汎用構文RFC-3986
Report a bug or suggest an enhancement
Copyright © 2008, 2018, Oracle and/or its affiliates. All rights reserved.