JavaFX CSSリファレンス・ガイド

目次

• 概要
  • CSSおよびJavaFXシーングラフ
  • Scene、Parent、SubSceneの各スタイルシート
  • ネーミング規則
  • CSSパブリックAPI
  • 継承
  • @ルール
  • 例
  • パーサーの警告について
  • 制限事項
• タイプ
  • 継承
  • <boolean>
  • <string>
  • <number> & <integer>
  • <size>
  • <length>
  • <percentage>
  • <angle>
  • <duration>
  • <point>
  • <color-stop>
  • <uri>
  • <effect>
  • <font>
  • <paint>
  • <color>
• ステージ
  • javafx.stage
    • PopupWindow
• ノード
  • javafx.scene
    • Group
    • Node
    • Parent
    • Scene
  • javafx.scene.image
    • ImageView
  • javafx.scene.layout
    • AnchorPane
    • BorderPane
    • DialogPane
    • FlowPane
    • GridPane
    • HBox
    • Pane
    • Region
    • StackPane
    • TilePane
    • VBox
  • javafx.scene.media
    • MediaView
  • javafx.scene.shape
    • Shape
    • Arc
    • Circle
    • CubicCurve
    • Ellipse
    • Line
    • Path
    • Polygon
    • QuadCurve
    • Rectangle
    • SVGPath
  • javafx.scene.text
    • Text
  • javafx.scene.web
    • WebView
• コントロール
  • javafx.scene.control
    • Accordion
    • Button
    • ButtonBase
    • Cell
    • CheckBox
    • CheckMenuItem
    • ChoiceBox
    • ColorPicker
    • ComboBox
    • ContextMenu
    • Control
    • DatePicker
    • HTMLEditor
    • Hyperlink
    • IndexedCell
    • Label
    • Labeled
    • ListCell
    • ListView
    • Menu
    • MenuBar
    • MenuButton
    • MenuItem
    • Pagination
    • PasswordField
    • ProgressBar
    • ProgressIndicator
    • RadioButton
    • RadioMenuItem
    • ScrollBar
    • ScrollPane
    • Separator
    • Spinner
    • Slider
    • SplitMenuButton
    • SplitPane
    • TabPane
    • TableColumnHeader
    • TableView
    • TextArea
    • TextInputControl
    • TextField
    • TitledPane
    • ToggleButton
    • ToolBar
    • Tooltip
    • TreeCell
    • TreeTableCell
    • TreeTableView
    • TreeView
    • WebView
• チャート
  • javafx.scene.chart
    • AreaChart
    • Axis
    • BarChart
    • BubbleChart
    • CategoryAxis
    • Chart
    • Legend
    • LineChart
    • NumberAxis
    • PieChart
    • ScatterChart
    • ValueAxis
    • XYChart
• 参考資料

概要

Java UIのスタイルを設定するには、JavaFXおよびカスケード・スタイルシート(CSS)を使用するのが最も簡単です。 テーマ間の移動や1つのコントロールの外観のカスタマイズは、すべてCSSから行うことができます。 初心者にとって、これは未知の領域かもしれませんが、習得するのはそれほど困難ではありません。 CSSスタイルを試してみれば、その利点がすぐにわかります。 また、設計と開発のワークフローを分けたり、設計をプロジェクトの後半に先送りすることもできます。 UIの外観の土壇場での変更やデプロイ後の変更も、JavaFX CSSから行うことができます。

このドキュメントの構成は次のとおりです。 まず、JavaFX CSSプロパティのすべての値タイプについて説明します。その中で随時、特定の値タイプの構文の文法も取り上げます。 次に、CSSスタイルをサポートするシーングラフ・ノードごとに、サポートされるプロパティをタイプおよびセマンティクス情報とともに表に示します。 各クラスの擬似クラスも示します。 コントロールのCSSプロパティの説明を続けます。 コントロールごとに、そのコントロールのスキンのサブストラクチャを、そのサブストラクチャを実装するRegionオブジェクトのスタイル・クラス名とともに示します。

CSSおよびJavaFXシーングラフ

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セレクタとの関係は次のとおりです。

• ノードのgetTypeSelectorメソッドは、CSSタイプ・セレクタに似た文字列を返します。 デフォルトでは、このメソッドはクラスの単純名を返します。 内部クラスまたは匿名クラスの単純名はタイプ・セレクタとして使用できない場合があることに注意してください。 このような場合には、意味のある値を返すように、このメソッドをオーバーライドします。
• シーングラフの各ノードには、styleClass propertyプロパティがあります。 1つのノードに複数のスタイル・クラスがある場合があることに注意してください。 ノードのstyleClassは、HTML要素に記述できるclass="..."属性に似ています。 「Class Selectors」を参照してください。
• シーングラフの各ノードには、id変数である文字列があります。 これは、HTML要素に記述できるid="..."属性に似ています。 ID Selectorsを参照してください。

JavaFX CSSでは、擬似クラスもサポートしていますが、擬似クラスの指定どおりに擬似クラスの全範囲を実装しているわけではありません。 各ノード・タイプでサポートされている擬似クラスは、このリファレンス内の表に示します。 JavaFXは、現時点では構造擬似クラスをサポートしていないことに注意してください。

各ノードは、ノードのJavaFXクラス(styleClassとは異なります)に応じて一連のプロパティを適用します。 各ノード・クラスによって適用されるプロパティは、このドキュメントの後の表に詳しく示します。 実際に適用されるプロパティ値は、前述したルールの起源と、CSS 2 [1]で説明しているルールのセレクタの特異性の優先順位によって異なります。 最終的に、プロパティ値文字列は、適切なタイプのJavaFX値に変換され、その後JavaFXオブジェクトのインスタンス変数に割り当てられます。

Scene、Parent、SubSceneの各スタイルシート

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のユーザー・エージェント・スタイルシートまたはプラットフォームのユーザー・エージェント・スタイルシートからスタイルを取得します。

ネーミング規則

JavaFXクラス名からCSSスタイル・クラス名を導出し、JavaFX変数名からCSSプロパティ名を導出するために、ネーミング規則が確立されています。 これはネーミング規則にすぎず、自動名前変換は存在しないことに注意してください。 ほとんどのJavaFX名では、キャメル・ケースが使用されます。つまり、複合語から形成される大文字と小文字が混在する名前で、複合語の各単語の先頭文字は大文字になります。 HTMLの世界のほとんどのCSS名はすべて小文字で、複合語はハイフンで区切られます。 このため、規則では、JavaFXクラス名を取得し、複合語をハイフンで区切って文字をすべて小文字に変換することで対応するCSSスタイル・クラス名を形成することになっています。 たとえば、JavaFX ToggleButtonクラスには、toggle-buttonというスタイル・クラスがあります。 JavaFX変数名をCSSプロパティ名にマップする規則も同様で、接頭辞-fx-が追加されます。 たとえば、blendMode変数には、-fx-blend-modeというCSSプロパティ名が対応しています。

CSSパブリックAPI

継承

CSSには、デフォルトで継承されるプロパティや、プロパティ値がinheritの場合に継承されるプロパティもあります。 値が継承される場合、その値はドキュメント・ツリーの要素の親の計算された値から継承されます。 JavaFXの継承も、ドキュメント・ツリーの要素ではなくシーングラフの親ノードから行われることを除き同じです。

次のプロパティは、デフォルトで継承されます。 どのプロパティも、値をinheritに指定することで継承可能にできます。

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プロパティにリスナーを追加できます。

制限事項

1. JavaFX CSSパーサーは、有効なCSS構文を解析しますが、完全準拠のCSSパーサーではありません。 パーサーがこのドキュメントに指定されていない構文を処理することはありません。
2. @font-faceと@importを除き、@-keyword文は無視されます。
3. @import文の<media-query-list>は解析されません。
4. 構造擬似クラスはサポートされていません。
5. :activeと:focusの動的擬似クラスはサポートされていません。 ただし、Nodesではよく似た:pressedと:focusedの擬似クラスをサポートしています。
6. :linkと:visitedの擬似クラスは通常サポートされていません。 ただし、Hyperlinkオブジェクトでは、スタイルを設定でき、:visited擬似クラスをサポートしています。
7. JavaFX CSSは、-fx-font-familyプロパティでカンマ区切りの一連のフォント・ファミリ名をサポートしていません。 フォントを指定するときにオプションの行の高さパラメータはサポートされません。 font-variantプロパティに相当するものはありません。
8. JavaFX CSSでは、HSLカラー・モデルではなくHSBカラー・モデルを使用します。
9. ノードのプロパティをそのプロパティのsetメソッドを呼び出して初期化した場合、CSS実装ではこれがユーザー設定値とみなされ、その値はユーザー・エージェント・スタイルシートのスタイルでオーバーライドされません。
10. URIを解析するとき、パーサーはURIエスケープも\\<hex-digit>[1,6]コード・ポイントも処理しません。

Types

継承

各プロパティにはタイプがあり、これによって値の種類とその値を指定するための構文が決まります。 また、各プロパティにはinheritの値が指定されている場合があります。つまり、あるノードのプロパティがその親のプロパティと同じ計算された値を取得することがあります。 inheritの値は、通常は継承されないプロパティで使用できます。

inherit値がルート要素に設定されている場合、プロパティには初期値が割り当てられます。

<boolean>

ブール値は、trueまたはfalseの文字列値を保持できます。すべてのCSSで大文字と小文字が区別されないため、これらの値も大文字と小文字が区別されません。

<string>

文字列は、二重引用符または一重引用符とともに記述できます。 '\'や'\\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プロパティを参照してください。

<number> & <integer>

値タイプの中には、整数値(<integer>で示される)や実数値(<number>で示される)を保持するものがあります。 実数および整数は、10進表記でのみ指定します。 <integer>は、0から9までの1つ以上の数字で構成されています。 <number>は、<integer>になるか、またはゼロ個以上の数字にドット(.)を付け、さらにその後に1つ以上の数字を続けたものになります。 整数と実数の両方とも、前に-または+を指定して、符号を示すことができます。-0は、0に相当し、負数ではありません。

[+|-]? [[0-9]+|[0-9]*"."[0-9]+]

整数または実数を値として許可する多くのプロパティは、実際には値をある範囲(多くの場合、負以外の値)に制限していることに注意してください。

<size>

サイズは、単位が<length>または<percentage>の<number>です。 ユニットが指定されていない場合、'px'が仮定されます。

<length>

<number>[ px | mm | cm | in | pt | pc | em | ex ]?

数値と単位を指定する場合、両者の間に空白は許可されません。 単位には、相対的なものと絶対的なものがあります。

相対

• px: 表示デバイスを基準にしたピクセル
• em: 関連するフォントのフォント・サイズ
• ex: 関連するフォントのxの高さ

絶対

• in: インチ - 1インチは2.54cmです。
• cm: センチメートル
• mm: ミリメートル
• pt: ポイント - CSS 2.1によって使用されるポイントは、1インチの1/72です。
• pc: パイカ - 1パイカは12ポイントです。

<percentage>

これらは、通常はノードの幅または高さに対するある長さの割合です。

<number>[ % ]

<angle>

角度は、単位が次のいずれかの<number>です。

<number>[ deg | rad | grad | turn ]

• deg: 度数単位の角度 - 他のすべての角度単位は、度数に変換されます。
• rad: ラジアン単位の角度
• grad: グラディアン単位の角度
• turn: 回転単位の角度

<duration>

期間は、秒またはミリ秒の単位の<number>か、値indefiniteです。

[<number>[ s | ms ]] | indefinite

• s: 期間(秒)
• ms: 期間(ミリ秒)。 1秒は1000ミリ秒です。
• indefinite: 「Duration.INDEFINITE」を参照してください

W3Cの時間単位も参照してください。

<point>

ポイントは{x,y}座標です。

[ [ <length> <length> ] | [ <percentage> | <percentage> ] ]

<color-stop>

ストップは、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%までに均等に分散されます。

<uri>

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を基準にしたパスです。 スタイルがインライン・スタイルで表示されている場合、(先頭に'/'が付いているかどうかに関係なく)パスはクラスパスのルートを基準にしたパスです。

インライン・スタイルの場合、パスが常にクラスパスのルートにアンカーされるため、先行するドット・セグメント(たとえば、「..」や「.」)が解決されることに注意してください。

例として、以下のコード・スニペットは、'image'ディレクトリにある架空の'Duke.png'イメージで満たされたシーンを作成します:

同じスタイルがスタイルシートからも同じように機能します。

<effect>

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方向の影のオフセット(ピクセル)。

<font>

JavaFX CSSは、ファミリ、サイズ、スタイル、太さの個別のプロパティを使用してフォントを指定する機能と、単一の短縮形プロパティを使用してフォントを指定する機能をサポートしています。 フォントに関連する値タイプが4つと、4つすべてのプロパティを網羅する短縮形プロパティが1つあります。 フォント関連のタイプは次のとおりです。

<font-family>フォント・ファミリの文字列名。 システムで使用される実際のフォント・ファミリ名を使用したり、次のいずれかの汎用的なファミリ名を使用できます。

• serif (たとえば、Times)
• sans-serif (たとえば、Helvetica)
• cursive (たとえば、Zapf-Chancery)
• fantasy (たとえば、Western)
• monospace (たとえば、Courier)

<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ではなく別の接頭辞が使用されます。

<paint>

ペイント値は、色構文のいずれかで指定された単色の塗りつぶしになる場合と、線形グラデーション、放射状グラデーションまたはimage-patternになる場合があります。

<color> | <linear-gradient> | <radial-gradient> | <image-pattern> <repeating-image-pattern>

線形グラデーション <linear-gradient>

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>

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>

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")

<color>

<named-color> | <looked-up-color> | <rgb-color> | <hsb-color> | <color-function>

名前付きの色<named-color>

CSSは、色の名前付き定数を数多くサポートしています。 名前付きの色は、次に示すように、名前を引用符で囲まずに指定できます。

.button {
    -fx-background-color: red;
}

CSSで使用可能な名前付きの色は次のとおりです。

参照色<looked-up-color>

参照色により、現在のノードやその親に設定されているその他の色プロパティを参照できます。 これは非常に強力な機能です。色の汎用パレットをシーンに指定し、アプリケーションで使用できるようになるためです。 パレットのいずれかの色を変更する場合、シーン・ツリーのどのレベルでもそれが可能であり、そのノードとそのすべての子孫に影響を与えます。 参照色は、適用されるまで参照されません。したがって、ライブであり、実行時にノードのstyleプロパティでパレットの色を置き換えるなど起こりうるすべてのスタイル変更に対応します。

次の例では、すべてのボタンのすべての背景色で、参照色abcを使用しています。

.root { abc: #f00 }
.button { -fx-background-color: abc }

RGBカラー<rgb-color>

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

次のいずれの例でも、ラベルのテキストの塗りつぶしに同じ色を指定しています。

• .label { -fx-text-fill: #f00 } /* #rgb */
• .label { -fx-text-fill: #ff0000 } /* #rrggbb */
• .label { -fx-text-fill: rgb(255,0,0) }
• .label { -fx-text-fill: rgb(100%, 0%, 0%) }
• .label { -fx-text-fill: rgba(255,0,0,1) }

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進整数や割合になります。 次のいずれの例でも、同じ色を指定しています。

• .label { -fx-text-fill: rgb(255,0,0) } /* integer range 0 - 255*/
• .label { -fx-text-fill: rgba(255,0,0,1) /* the same, with explicit opacity of 1 */
• .label { -fx-text-fill: rgb(100%,0%,0%) } /* float range 0.0% - 100.0% */
• .label { -fx-text-fill: rgba(100%,0%,0%,1) } /* the same, with explicit opacity of 1 */

HSBカラー<hsb-color>

次のように、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つ目のパラメータを取ります。

色の関数<color-function>

JavaFXは、色計算関数をサポートしています。 これらは、色スタイルが適用されるときに入力色から新しい色を計算します。 これにより、単一の基本色を使用して色テーマを指定し、その基本色から様々な色を計算できます。 色の関数には、derive()とladder()の2つがあります。

<derive> | <ladder>

派生<derive>

derive( <color> , <number>% )

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> ) ]+

Stage

Group

スタイル・クラス: .root.popup

PopupWindowにはCSSでスタイル設定できるプロパティはありませんが、PopupWindowには独自のSceneがあります。 Sceneのルートは、デフォルトで.rootスタイル・クラスを取得します。 SceneがPopupWindowのルート・シーンである場合は、.popupスタイル・クラスも追加されます。 これにより、PopupWindowのルート・シーンでは、CSSルール.root.popup { /* declarations */ }を使用して個別のスタイルを保持できます。

ノード

Group

スタイル・クラス: デフォルトでは空

Node

スタイル・クラス: デフォルトでは空

擬似クラス

Parent

スタイル・クラス: デフォルトでは空

Scene

スタイル・クラス: 該当なし

Sceneオブジェクトには、設定可能なCSSプロパティも擬似クラスもありません。 ただし、Sceneのルート・ノードには(ノードにすでに割り当てられているスタイル・クラスに加えて)スタイル・クラスrootが割り当てられます。 Sceneのルート・ノードはアクティブなすべてのシーングラフ・ノードのルート・コンテナであるため、これは有益です。 このため、継承または参照されるプロパティのコンテナとして機能できます。

ImageView

スタイル・クラス: image-view

AnchorPane

スタイル・クラス: デフォルトでは空

BorderPane

スタイル・クラス: デフォルトでは空

DialogPane

スタイル・クラス: dialog-pane

サブストラクチャ

• header-panel - BoderPane
  • graphic-container - StackPane
• content - Label
• button-bar - ButtonBar

FlowPane

スタイル・クラス: デフォルトでは空

GridPane

スタイル・クラス: デフォルトでは空

HBox

スタイル・クラス: デフォルトでは空

Pane

スタイル・クラス: デフォルトでは空

Region

スタイル・クラス: デフォルトでは空

Regionは、CSSで背景とボーダーのスタイルを設定できる(Parentから拡張される)Nodeです。 Regionは一般に角の丸い矩形で、CSSを使用してこれを任意の図形に変更できます。 Regionには他のRegionオブジェクト(サブリージョン)を含めたり、サブコントロールを含めることができます。 次に説明するように、すべてのRegionが同じセットのCSSプロパティを保持します。

各Regionは、下から上へと次の順序でペイントされる複数のレイヤーで構成されています。

1. 背景の塗りつぶし
2. 背景イメージ
3. ボーダー・ストローク
4. ボーダー・イメージ
5. コンテンツ

背景とボーダーのメカニズムは、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を使用して設定することはできません。

StackPane

スタイル・クラス: デフォルトでは空

TilePane

スタイル・クラス: デフォルトでは空

VBox

スタイル・クラス: デフォルトでは空

MediaView

スタイル・クラス: media-view

Shape

スタイル・クラス: デフォルトでは空

Arc

スタイル・クラス: デフォルトでは空

Arcノードには、ShapeおよびNodeのすべてのプロパティがあります。

Circle

スタイル・クラス: デフォルトでは空

Circleノードには、ShapeおよびNodeのすべてのプロパティがあります。

CubicCurve

スタイル・クラス: デフォルトでは空

CubicCurveノードには、ShapeおよびNodeのすべてのプロパティがあります。

Ellipse

スタイル・クラス: デフォルトでは空

Ellipseノードには、ShapeおよびNodeのすべてのプロパティがあります。

Line

スタイル・クラス: デフォルトでは空

Path

スタイル・クラス: デフォルトでは空

Polygon

スタイル・クラス: デフォルトでは空

Polygonノードには、ShapeおよびNodeのすべてのプロパティがあります。

QuadCurve

スタイル・クラス: デフォルトでは空

QuadCurveノードには、ShapeおよびNodeのすべてのプロパティがあります。

Rectangle

スタイル・クラス: デフォルトでは空

SVGPath

スタイル・クラス: デフォルトでは空

SVGPathノードには、ShapeおよびNodeのすべてのプロパティがあります。

Text

スタイル・クラス: デフォルトでは空

WebView

スタイル・クラス: web-view

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

Accordionコントロールには、Controlのすべてのプロパティと擬似クラスがあります。

サブストラクチャ

• first-titled-pane - 最初のTitledPane

Button

スタイル・クラス: button

Buttonコントロールには、ButtonBaseのすべてのプロパティがあります。

擬似クラス

ButtonBase

ButtonBaseコントロールには、Labeledのすべてのプロパティがあります。

擬似クラス

Cell

スタイル・クラス: cell

擬似クラス

サブストラクチャ

• text - Labeled

CheckBox

スタイル・クラス: check-box

CheckBoxコントロールには、ButtonBaseのすべてのプロパティがあります。

擬似クラス

サブストラクチャ

• box - StackPane
  • mark - StackPane

CheckMenuItem

擬似クラス

ChoiceBox

スタイル・クラス: choice-box

ChoiceBoxコントロールには、Controlのすべてのプロパティと擬似クラスがあります。

サブストラクチャ

• open-button - Region
  • arrow - Region

ColorPicker

スタイル・クラス: color-picker

ColorPickerコントロールには、ComboBoxBaseのすべてのプロパティと擬似クラスがあります。

サブストラクチャ

• color display node - Label
• arrow-button - StackPane
  • arrow - StackPane

ComboBox

スタイル・クラス: combo-box

ComboBoxコントロールには、ComboBoxBaseのすべてのプロパティと擬似クラスがあります。

サブストラクチャ

• list-cell - 編集不可のComboBoxのボタン領域での選択の表示に使用されるListCellインスタンス
• text-input - 編集可能なComboBoxのボタン領域での選択の表示および入力の許可に使用されるTextFieldインスタンス
• combo-box-popup - ボタンを押すと表示されるPopupControl
  • list-view - ListView
    • list-cell - ListCell

ComboBoxBase

スタイル・クラス: combo-box-base

ComboBoxBaseコントロールには、Controlのすべてのプロパティがあります。

サブストラクチャ

• arrow-button - StackPane
  • arrow - StackPane

ContextMenu

スタイル・クラス: context-menu

ContextMenuコントロールには、PopupControlのすべてのプロパティがあります。

.choice-box > .context-menu { ... }

サブストラクチャ

• context-menu - Region
  • scroll-arrow - StackPane
    • menu-up-arrow - StackPane
  • scroll-arrow - StackPane
    • menu-down-arrow - StackPane
  • * - VBox
    • menu-item - Region
      • label - Label
      • left-container - StackPane (ラジオ・ボタンおよびチェック・ボックスの場合)
      • right-container - StackPane (プルライト・メニューの場合)
        • arrow - Region
      • graphic-container - StackPane (MenuItemグラフィックの場合)

Control

Controlクラスには、Regionのすべてのプロパティがあります。

DatePicker

スタイル・クラス: date-picker

DatePickerコントロールには、ComboBoxBaseのすべてのプロパティと擬似クラスがあります

サブストラクチャ

• date-picker-display-node - TextField

HTMLEditor

スタイル・クラス: html-editor

Hyperlinkコントロールには、Controlのすべてのプロパティがあります。

サブストラクチャ

• grid - GridPane (WebViewを含む)
  • top-toolbar - ToolBar
    • html-editor-cut - ToggleButton
    • html-editor-copy - ToggleButton
    • html-editor-paste - ToggleButton
    • html-editor-align-left - ToggleButton
    • html-editor-align-right - ToggleButton
    • html-editor-align-center - ToggleButton
    • html-editor-align-justify - ToggleButton
    • html-editor-outdent - ToggleButton
    • html-editor-indent - ToggleButton
    • html-editor-bullets - ToggleButton
    • html-editor-numbers - ToggleButton
  • web-view - WebView
  • bottom-toolbar - ToolBar
    • format-menu-button - ComboBox
    • font-family-menu-button - ComboBox
    • font-size-menu-button - ComboBox
    • html-editor-bold - ToggleButton
    • html-editor-italic - ToggleButton
    • html-editor-underline - ToggleButton
    • html-editor-strike - ToggleButton
    • html-editor-hr - ToggleButton
    • html-editor-foreground - ColorPicker
    • html-editor-background - ColorPicker

Hyperlink

スタイル・クラス: hyperlink

Hyperlinkコントロールには、ButtonBaseのすべてのプロパティがあります。

擬似クラス

サブストラクチャ

• label - Label

IndexedCell

スタイル・クラス: indexed-cell

IndexedCellコントロールには、Cellのすべてのプロパティがあります。

擬似クラス

Label

スタイル・クラス: label

Labelには、Labeledのすべてのプロパティと擬似クラス状態があります。

Labeled

ListCell

スタイル・クラス: list-cell

ListCellコントロールには、IndexedCellの設定可能なすべてのプロパティと擬似クラスがあります。

ListView

スタイル・クラス: list-view

擬似クラス

サブストラクチャ

• .list-view - the ListView<T>
  • .virtual-flow - VirtualFlow
    • .clipped-container - Region
      • .sheet - Group
        • .cell.indexed-cell.list-cell - ListCell<T>
      • .scroll-bar - ScrollBar

Menu

スタイル・クラス: menu

擬似クラス

MenuBar

スタイル・クラス: menu-bar

MenuBarには、Controlのすべての擬似クラス状態があります。

サブストラクチャ

• menu

MenuButton

スタイル・クラス: menu-button

MenuButtonコントロールには、ButtonBaseのすべてのプロパティがあります。

擬似クラス

MenuItem

スタイル・クラス: menu-item

Pagination

スタイル・クラス: pagination

Paginationには、Controlのすべての擬似クラス状態があります。

サブストラクチャ

• page - StackPane
• pagination-control - StackPane
  • leftArrowButton - Button
    • leftArrow - StackPane
  • rightArrowButton - Button
    • rightArrow - StackPane
  • bullet-button - ToggleButton
  • number-button - ToogleButton
  • page-information - Label

PasswordField

スタイル・クラス: password-field

PasswordFieldコントロールには、TextFieldのすべてのプロパティがあります。

PopupControl

PopupControlはPopupWindowでもあるため、そのルート・ノードにはスタイル・クラス.root.popupがあります。

ProgressBar

スタイル・クラス: progress-bar

擬似クラス

サブストラクチャ

• track - StackPane
  • bar - Region

ProgressIndicator

スタイル・クラス: progress-indicator

擬似クラス

サブストラクチャ

• indicator - StackPane
• progress - StackPane
• percentage - Text
• tick - StackPane

RadioButton

スタイル・クラス: radio-button

RadioButtonコントロールには、ToggleButtonのすべてのプロパティがあります。

サブストラクチャ

• radio - Region
  • dot - Region
• label - Label

RadioMenuItem

擬似クラス

ScrollBar

スタイル・クラス: scroll-bar

擬似クラス

サブストラクチャ

• decrement-button - StackPane
  • decrement-arrow - StackPane
• track - StackPane
• thumb - StackPane
• increment-button - StackPane
  • increment-arrow - StackPane

ScrollPane

スタイル・クラス: scroll-pane

擬似クラス

サブストラクチャ

• viewport - StackPane
  • * - StackPane
  • • ScrollPaneのコンテンツ
• scroll-bar:vertical - ScrollBar
• scroll-bar:horizontall - ScrollBar
• corner - StackPane

Separator

スタイル・クラス: separator

擬似クラス

サブストラクチャ

• line - Region

Spinner

スタイル・クラス: spinner

デフォルト・スタイル・クラス"spinner"は、矢印を縦並びで右側に表示します。 Spinnerのレイアウトを制御するために、次のスタイル・クラスをデフォルト・スタイル・クラスと組み合せて使用することもできます。

擬似クラス

サブストラクチャ

• text-field - TextField
• increment-arrow-button - StackPane
  • increment-arrow - Region
• decrement-arrow-button - StackPane
  • decrement-arrow - Region

Slider

スタイル・クラス: slider

擬似クラス

サブストラクチャ

• axis - NumberAxis
• track - Region
• thumb - Region

SplitMenuButton

スタイル・クラス: split-menu-button

SplitPane

スタイル・クラス: split-pane

擬似クラス

サブストラクチャ

• split-pane-divider - StackPane
  • vertical-grabber - StackPane
  • horizontal-grabber - StackPane

TabPane

スタイル・クラス: tab-pane

注意: styleclassは、TabPaneがフローティングである場合にはtab-pane floatingです。

擬似クラス

サブストラクチャ

• tab-header-area - StackPane
  • headers-region - StackPane
  • tab-header-background - StackPane
  • control-buttons-tab - StackPane
    • tab-down-button - Pane
      • arrow - StackPane
  • tab - Tab
    • tab-label - Label
    • tab-close-button - StackPane
• tab-content-area - StackPane

TableColumnHeader

スタイル・クラス: column-header

擬似クラス

サブストラクチャ

• column-resize-line - Region
• column-overlay - Region
• placeholder - StackPane
• column-header-background - StackPane
  • nested-column-header
    • column-header
  • filler - Region
  • show-hide-columns-button - StackPane
    • show-hide-column-image - StackPane
  • column-drag-header - StackPane
    • label - Label

TableView

スタイル・クラス: table-view

擬似クラス

サブストラクチャ

• column-resize-line - Region
• column-overlay - Region
• placeholder - StackPane
• column-header-background - StackPane
  • nested-column-header
    • column-header
  • filler - Region
  • show-hide-columns-button - StackPane
    • show-hide-column-image - StackPane
  • column-drag-header - StackPane
    • label - Label
• table-column - TableColumn

TextArea

スタイル・クラス: text-area

サブストラクチャ

• scroll-pane - ScrollPane
  • content - Region

TextInputControl

擬似クラス

TextField

スタイル・クラス: text-field

TextFieldには、TextInputControlのすべての擬似クラス状態があります。

TitledPane

擬似クラス

サブストラクチャ

• title - HBox
  • text - Label/li>
  • arrow-button - StackPane/li>
    • arrow - StackPane
• content - StackPane/li>

ToggleButton

スタイル・クラス: toggle-button

ToggleButtonコントロールには、ButtonBaseのすべてのプロパティがあります。

擬似クラス

ToolBar

スタイル・クラス: tool-bar

擬似クラス

サブストラクチャ

• tool-bar-overflow-button - StackPane
  • arrow - StackPane

Tooltip

スタイル・クラス: tooltip

サブストラクチャ

• label - Label
• page-corner - StackPane

TreeCell

スタイル・クラス: tree-cell

擬似クラス

TreeTableCell

スタイル・クラス: tree-table-cell

擬似クラス

TreeView

スタイル・クラス: tree-table-view

TreeView

スタイル・クラス: tree-view

チャート

AreaChart

Axis

スタイル・クラス: axis

サブストラクチャ

• axis-label - Text
• axis-tick-mark - Path

BarChart

BubbleChart

CategoryAxis

スタイル・クラス: axis

Chart

スタイル・クラス: chart

サブストラクチャ

• chart-title - Label
• chart-content - Pane

Legend

スタイル・クラス: chart-legend

サブストラクチャ

• chart-legend-item - Label
• chart-legend-item-symbol - Node (Labelのグラフィック)

LineChart

NumberAxis

スタイル・クラス: axis

PieChart

ScatterChart

ValueAxis

スタイル・クラス: axis

サブストラクチャ

• axis-minor-tick-mark - Path

XYChart

スタイル・クラス: set by sub-type

サブストラクチャ

• plot-content - Group
• chart-plot-background - Region
• chart-alternative-column-fill - Path
• chart-alternative-row-fill - Path
• chart-vertical-grid-lines - Path
• chart-horizontal-grid-lines - Path
• chart-vertical-zero-line - Line
• chart-horizontal-zero-line - Line

参考資料

[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.