UIのスタイルを設定するには、JavaFXおよびカスケード・スタイルシート(CSS)を使用するのが最も簡単です。テーマ間の移動や1つのコントロールの外観のカスタマイズは、すべてCSSから行うことができます。初心者にとって、これは未知の領域かもしれませんが、習得するのはそれほど困難ではありません。CSSスタイルを試してみれば、その利点がすぐにわかります。設計と開発のワークフローを分けたり、設計をプロジェクトの後半に先送りすることもできます。CSSから行うことができます。このドキュメントの構成は次のとおりです。CSSプロパティのすべての値タイプについて説明します。その中で随時、特定の値タイプの構文の文法も取り上げます。次に、CSSスタイルをサポートするシーングラフ・ノードごとに、サポートされるプロパティをタイプおよびセマンティクス情報とともに表に示します。各クラスの擬似クラスも示します。コントロールのCSSプロパティの説明を続けます。コントロールごとに、そのコントロールのスキンのサブストラクチャを、そのサブストラクチャを実装するRegionオブジェクトのスタイル・クラス名とともに示します。[2]に対する現在の作業の一部が追加されています。CSSでは、特定のJavaFX機能をサポートするためにCSSを拡張しています。CSSの目標は、HTML向けCSSをすでに習得しているWeb開発者がCSSを使用して、JavaFXコントロールおよびシーングラフ・オブジェクトのテーマを無理のない方法でカスタマイズおよび開発できるようにすることです。JavaFXにはCSSの豊富な拡張機能があり、色派生、プロパティ参照、単一ノードに対する複数の背景色とボーダーなどの機能をサポートしています。これらの機能は、開発者および設計者に新しい大きな力をもたらすものであり、このドキュメントで詳しく説明します。CSSはW3C標準に従いますが、ほとんど例外なく、JavaFXプロパティ名には接頭辞として-fx-というベンダー拡張子が付けられています。CSS拡張機能を利用することを前提としています。DOMの要素に適用される場合と同じような方法で、JavaFXシーングラフのノードに適用されます。スタイルは、まず親に適用され、次にその子に適用されます。コードは、CSSの再適用が必要になる可能性があるシーングラフの分岐のみがアクセスされるように記述されます。ノードは、シーングラフに追加された後でスタイル設定されます。ノードの擬似クラス状態、スタイル・クラス、ID、インライン・スタイルまたは親が変更されたり、スタイルシートがシーンに対して追加または削除されると、スタイルが再適用されます。CSSが適用されるようにするには、ノードがシーングラフに存在する必要があることに注意してください。ノードを表示する必要はありませんが、そのscenePropertyはnull以外の値である必要があります。詳細は、applyCssを参照してください。通常のシーングラフ・パルス中に、シーングラフがレイアウトされて描画される前に、CSSスタイルが適用されます。擬似クラス状態変更をトリガーするイベント("ホバー"状態をトリガーするMouseEvent.MOUSE_ENTEREDなど)のスタイルは、そのイベントに続く次のパルスに適用されます。CSSセレクタは、スタイルをシーングラフ・ノードに適合させるために使用されます。ノードとCSSセレクタとの関係は次のとおりです。ノードのgetTypeSelectorメソッドは、CSSタイプ・セレクタに似た文字列を返します。デフォルトでは、このメソッドはクラスの単純名を返します。内部クラスまたは匿名クラスの単純名はタイプ・セレクタとして使用できない場合があることに注意してください。このような場合には、意味のある値を返すように、このメソッドをオーバーライドします。propertyプロパティがあります。1つのノードに複数のスタイル・クラスがある場合があることに注意してください。ノードのstyleClassは、HTML要素に記述できるclass="..."属性に似ています。Selectors」を参照してください。シーングラフの各ノードには、id変数である文字列があります。これは、HTML要素に記述できるid="..."属性に似ています。Selectors」を参照してください。CSSでは、擬似クラスもサポートしていますが、擬似クラスの指定どおりに擬似クラスの全範囲を実装しているわけではありません。各ノード・タイプでサポートされている擬似クラスは、このリファレンス内の表に示します。JavaFXは、現時点では構造擬似クラスをサポートしていないことに注意してください。各ノードは、ノードのJavaFXクラス(styleClassとは異なります)に応じて一連のプロパティを適用します。各ノード・クラスによって適用されるプロパティは、このドキュメントの後の表に詳しく示します。[1]で説明しているルールのセレクタの特異性の優先順位によって異なります。最終的に、プロパティ値文字列は、適切なタイプのJavaFX値に変換され、その後JavaFXオブジェクトのインスタンス変数に割り当てられます。Scene、Parent、SubSceneの各スタイルシートCSSスタイルは、スタイルシートまたはインライン・スタイルから生成できます。スタイルシートは、SceneオブジェクトのgetStylesheetsプロパティに指定されているURLからロードされます。シーングラフにコントロールが含まれている場合は、デフォルトのユーザー・エージェント・スタイルシートがロードされます。APIで指定されます。インライン・スタイルは、HTML要素のstyle="..."属性に似ています。Sceneのスタイルシートからロードされたスタイルは、ユーザー・エージェント・スタイルシートのセレクタよりも優先されます。インライン・スタイルは、別の場所で発生したスタイルよりも優先されます。スタイル・セレクタの優先順位は、スタイル宣言の!importantを使用して変更できます。2.1から、ParentクラスにはgetStylesheetsプロパティが保持され、スタイルシートをコンテナで設定できるようになりました。これにより、シーングラフの1つの分岐で個別にスタイルを設定できます。Parentのインスタンスはいずれもスタイル・シートを持つことができます。子は、自身のスタイルをそれぞれのインライン・スタイル、そのすべての祖先のスタイルシートおよびSceneのすべてのスタイルシートから取得します。8u20から、SceneクラスにはgetUserAgentStylesheetプロパティが保持され、ユーザー・スタイルシートをSceneで設定できるようになりました。これにより、シーンではプラットフォームのデフォルトとは異なる一連のユーザー・エージェント・スタイルを保持できます。ユーザー・エージェント・スタイルシートがシーンに設定されているときは、そのユーザー・エージェント・スタイルがプラットフォームのデフォルトのユーザー・エージェント・スタイルシートのスタイルのかわりに使用されます。8u20から、SubSceneクラスにはgetUserAgentStylesheetプロパティが保持され、ユーザー・スタイルシートをSubSceneで設定できるようになりました。これにより、シーングラフのSubSceneではプラットフォームのデフォルトまたはSubSceneが含まれているSceneとは異なる一連のユーザー・エージェント・スタイルを保持できます。ユーザー・エージェント・スタイルシートがSubSceneに設定されているときは、そのユーザー・エージェント・スタイルがプラットフォームのデフォルトのユーザー・エージェント・スタイルシートまたはSceneに設定されたユーザー・エージェント・スタイルシートのスタイルのかわりに使用されます。SceneまたはParentに追加されているスタイルシートのスタイルは、そのSceneまたはParentの子または子孫であるSubSceneに影響を与えないことに注意することが重要です。ユーザー・エージェントがSubSceneに設定されている場合を除き、SubSceneはSceneのユーザー・エージェント・スタイルシートまたはプラットフォームのユーザー・エージェント・スタイルシートからスタイルを取得します。この実装により、設計者はスタイルシートを使用してコードから設定されたプロパティ値をオーバーライドすることでアプリケーションのスタイルを設定できます。rectangle.setFill(Color.YELLOW)への呼出しは、インライン・スタイルまたは著者スタイルシートのスタイルでオーバーライドできます。これは、カスケードに影響を与えます。コードから設定された値がスタイルシートのスタイルでオーバーライドされるときは顕著です。CSS実装では、次のように優先順位が適用されます。ユーザー・エージェント・スタイルシートのスタイルはコードから設定された値よりも優先順位が低く、コードから設定された値はSceneまたはParentのスタイルシートよりも優先順位が低くなっています。インライン・スタイルの優先順位が最も高くなっています。Parentインスタンスのスタイルシートは、Sceneスタイルシートのスタイルよりも具体的であるとみなされます。ネーミング規則JavaFXクラス名からCSSスタイル・クラス名を導出し、JavaFX変数名からCSSプロパティ名を導出するために、ネーミング規則が確立されています。これはネーミング規則にすぎず、自動名前変換は存在しないことに注意してください。ほとんどのJavaFX名では、キャメル・ケースが使用されます。複合語から形成される大文字と小文字が混在する名前で、複合語の各単語の先頭文字は大文字になります。HTMLの世界のほとんどのCSS名はすべて小文字で、複合語はハイフンで区切られます。このため、規則では、JavaFXクラス名を取得し、複合語をハイフンで区切って文字をすべて小文字に変換することで対応するCSSスタイル・クラス名を形成することになっています。ToggleButtonクラスには、toggle-buttonというスタイル・クラスがあります。JavaFX変数名をCSSプロパティ名にマップする規則も同様で、接頭辞-fx-が追加されます。blendMode変数には、-fx-blend-modeというCSSプロパティ名が対応しています。8.0から、開発者はパブリックAPIを使用してスタイル設定可能なプロパティを作成し、擬似クラス状態を管理できるようになりました。詳細は、javafx.cssを参照してください。継承CSSには、デフォルトで継承されるプロパティや、プロパティ値がinheritの場合に継承されるプロパティもあります。値が継承される場合、その値はドキュメント・ツリーの要素の親の計算された値から継承されます。JavaFXの継承も、ドキュメント・ツリーの要素ではなくシーングラフの親ノードから行われることを除き同じです。次のプロパティは、デフォルトで継承されます。どのプロパティも、値をinheritに指定することで継承可能にできます。system)JavaFXクラスの階層(たとえば、RectangleはShapeのサブクラスで、ShapeはNodeのサブクラスです)内では、祖先のCSSプロパティは子孫のCSSプロパティでもあります。サブクラスはその祖先クラスと同じプロパティ・セットおよびサブクラス自体に定義されている追加のプロパティに対応します。そのため、ShapeはNodeのすべてのプロパティに加えてさらにいくつかのプロパティをサポートし、RectangleはShapeのすべてのプロパティに加えてさらにいくつかのプロパティをサポートしています。JavaFXクラス名をタイプ・セレクタとして使用するのは完全一致であるため、Shapeのスタイル宣言を指定しても、Rectangleではそれらの値が使用されません(Rectangleのプロパティの.css値がinheritである場合を除きます)。フォント継承の場合、CSSエンジンは前述の表のスタイルのみを探します。継承するフォントを探すとき、検索はユーザーによって設定されたFontプロパティがあるノードで終了します。ユーザー設定フォントは、そのノードに特に適用される著者スタイルまたはインライン・スタイルがない場合に継承されます。この場合、継承されるフォントはユーザー設定フォントおよび適用可能な著者スタイルまたはインライン・スタイルの一部から作成されます。@importも一部サポートされるようになりました。無条件インポートのみがサポートされています。media-type修飾子はサポートされていません。CSSパーサーは、@importがスタイルシート内で表示される場所に関して非コンプライアンスです(「At‐rules」を参照)。これが将来のリリースで修正される予定であることがユーザーに警告されます。W3C標準に準拠することをお薦めします。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アプリケーションについて考えてみます。Rectangle(100,100);rect.setLayoutX(50);rect.setLayoutY(50);rect.getStyleClass().add("my-rect");((Group)scene.getRoot()).getChildren().add(rect);何もスタイルがないと、これには無地の黒い矩形が表示されます。}矩形は黒ではなく赤になります。butt;}結果は、ボーダーが緑の点線で見事に描かれた黄色の矩形になります。CSSパーサーで構文エラーが発生すると、警告メッセージが送出され、エラーの解決に役立つ入手できるかぎりの情報が伝送されます。?[1,49]暗号のような?[1,49]は、エラーの場所に関連しています。場所を示す文字列の形式は次のとおりです。position]ファイルの解析中にエラーが見つかった場合、ファイルURLが指定されます。エラーが(前述の例のように)インライン・スタイルからのものである場合は、URLが疑問符として指定されます。行と位置により、トークンが始まるファイルまたは文字列内でのオフセットが指定されます。2.2よりも前のリリースでは正確でない場合があることに注意してください。パーサーからのエラーを検出する必要があるアプリケーションでは、com.sun.javafx.css.StyleManagerのerrorsプロパティにリスナーを追加できます。これは、パブリックAPIではなく、変更されることがあります。CSSパーサーは、有効なCSS構文を解析しますが、完全準拠のCSSパーサーではありません。パーサーがこのドキュメントに指定されていない構文を処理することはありません。@font-faceと@importを除き、@-keyword文は無視されます。@import文の<media-query-list>は解析されません。構造擬似クラスはサポートされていません。:activeと:focusの動的擬似クラスはサポートされていません。Nodesではよく似た:pressedと:focusedの擬似クラスをサポートしています。:linkと:visitedの擬似クラスは通常サポートされていません。Hyperlinkオブジェクトでは、スタイルを設定でき、:visited擬似クラスをサポートしています。CSSは、-fx-font-familyプロパティでカンマ区切りの一連のフォント・ファミリ名をサポートしていません。フォントを指定するときにオプションの行の高さパラメータはサポートされません。font-variantプロパティに相当するものはありません。CSSでは、HSLカラー・モデルではなくHSBカラー・モデルを使用します。ノードのプロパティをそのプロパティのsetメソッドを呼び出して初期化した場合、CSS実装ではこれがユーザー設定値とみなされ、その値はユーザー・エージェント・スタイルシートのスタイルでオーバーライドされません。URIを解析するとき、パーサーはURIエスケープも\\<hex-digit>[1,6]コード・ポイントも処理しません。各プロパティにはタイプがあり、これによって値の種類とその値を指定するための構文が決まります。各プロパティにはinheritの値が指定されている場合があります。あるノードのプロパティがその親のプロパティと同じ計算された値を取得することがあります。inheritの値は、通常は継承されないプロパティで使用できます。inherit値がルート要素に設定されている場合、プロパティには初期値が割り当てられます。<boolean>ブール値は、trueまたはfalseの文字列値を保持できます。すべてのCSSで大文字と小文字が区別されないため、これらの値も大文字と小文字が区別されません。<string>文字列は、二重引用符または一重引用符とともに記述できます。'\'や'\\22'というようにエスケープする場合を除き、二重引用符を二重引用符内に記述することはできません。一重引用符の場合も同じです(たとえば、"\\'"や"\\27")。\'string\''文字列に改行を直接含めることはできません。(U+000A)で行送り文字を表すエスケープ("\\A"や"\\00000a"など)を使用します。この文字は、CSSで改行の総称的概念を表します。例については、contentプロパティを参照してください。<integer>値タイプの中には、整数値(<integer>で示される)や実数値(<number>で示される)を保持するものがあります。実数および整数は、10進表記でのみ指定します。<integer>は、0から9までの1つ以上の数字で構成されています。<number>は、<integer>になるか、またはゼロ個以上の数字にドット(.)を付け、さらにその後に1つ以上の数字を続けたものになります。整数と実数の両方とも、前に-または+を指定して、符号を示すことができます。-0は、0に相当し、負数ではありません。[[0-9]+|[0-9]*"."[0-9]+]整数または実数を値として許可する多くのプロパティは、実際には値をある範囲(多くの場合、負以外の値)に制限していることに注意してください。<size>サイズは、単位が<length>または<percentage>の<number>です。単位が指定されていない場合は、pxが指定されたものとみなされます。]?数値と単位を指定する場合、両者の間に空白は許可されません。単位には、相対的なものと絶対的なものがあります。1インチは2.54cmです。2.1によって使用されるポイントは、1インチの1/72です。1パイカは12ポイントです。<percentage>これらは、通常はノードの幅または高さに対するある長さの割合です。]<angle>角度は、単位が次のいずれかの<number>です。他のすべての角度単位は、度数に変換されます。回転単位の角度<duration>期間は、秒またはミリ秒の単位の<number>か、値indefiniteです。1秒は1000ミリ秒です。「Duration.INDEFINITE」を参照してください「W3Cの時間単位」も参照してください。<point>ポイントは{x,y}座標です。]<color-stop>ストップは、W3Cカラー・ストップ構文に準拠しています。]<color-stop>系列で、ストップ距離値はすべて<percentage>または<length>である必要があります。<length>値が使用されている場合は、系列の最初および最後のストップの距離値を指定する必要があります。この制約は、将来のリリースで削除される可能性があります。blue"は、赤および青の距離がそれぞれ0%および100%とみなされるため有効です。赤および青の距離がそれぞれ10および90であるため、白の距離を計算できます。blue"は、距離単位が一致しないため有効ではありません。blue"は有効です。ストップは、0%から100%までに均等に分散されます。)<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を基準にしたパスです。スタイルがインライン・スタイルで表示されている場合、(先頭に'/'が付いているかどうかに関係なく)パスはクラスパスのルートを基準にしたパスです。jar:file:/some/path/build/myapp.jar!/com/mycompany/resources/images/Duke.pngインライン・スタイルの場合、パスが常にクラスパスのルートにアンカーされるため、先行するドット・セグメント(たとえば、「..」や「.」)が解決されることに注意してください。次に示すコードのスニペットでは、jfxrt.jarにあるHTMLEditorからの貼付けイメージで満たされたシーンを作成します。}同じスタイルがスタイルシートからも同じように機能します。CSSは、現時点でJavaFXプラットフォームのDropShadow効果およびInnerShadow効果をサポートしています。様々な効果パラメータのセマンティクスの詳細は、javafx.scene.effectのクラスのドキュメントを参照してください。ドロップ・シャドウ指定されたコンテンツのシャドウをコンテンツの背後にレンダリングする高度な効果。影のぼかしカーネルの半径。127.0]で、一般的な値は10。拡散は、ソース・マテリアルの分布が100%になる半径の部分です。半径の残りの部分には、ぼかしカーネルによって制御される分布があります。拡散が0.0の場合、影の分散がぼかしアルゴリズムによって完全に決定されます。拡散が1.0の場合、ソース・マテリアルの不透明度の外側に向かって半径との境界まで堅調に広がり、半径で透明度が鋭く遮断されます。1.0]内にある必要があります。X方向の影のオフセット(ピクセル)。Y方向の影のオフセット(ピクセル)。インナー・シャドウ指定されたコンテンツの端の内側にシャドウをレンダリングする高度な効果。影のぼかしカーネルの半径。127.0]で、一般的な値は10。チョークは、ソース・マテリアルの分布が100%になる半径の部分です。半径の残りの部分には、ぼかしカーネルによって制御される分布があります。チョークが0.0の場合、影の分散がぼかしアルゴリズムによって完全に決定されます。チョークが1.0の場合、影の内側に向かって端から半径との境界まで堅調に広がり、半径の内側で透明度が非常に鋭く遮断されます。1.0]内にある必要があります。X方向の影のオフセット(ピクセル)。Y方向の影のオフセット(ピクセル)。CSSは、ファミリ、サイズ、スタイル、太さの個別のプロパティを使用してフォントを指定する機能と、単一の短縮形プロパティを使用してフォントを指定する機能をサポートしています。フォントに関連する値タイプが4つと、4つすべてのプロパティを網羅する短縮形プロパティが1つあります。フォント関連のタイプは次のとおりです。<font-family>フォント・ファミリの文字列名。システムで使用される実際のフォント・ファミリ名を使用したり、次のいずれかの汎用的なファミリ名を使用できます。<size>構文を使用したフォントのサイズ。次の構文を使用したフォントのスタイル。次の構文を使用したフォントの太さ。このフォント短縮形プロパティは、前述のプロパティのかわりに使用できます。次の構文を使用します。]フォントのプロパティテキストを使用するクラスのほとんどが、次のフォント・プロパティをサポートしています。同じようなプロパティ・セットがサポートされる場合もありますが、-fx-fontではなく別の接頭辞が使用されます。inherit<paint>ペイント値は、色構文のいずれかで指定された単色の塗りつぶしになる場合と、線形グラデーション、放射状グラデーションまたはimage-patternになる場合があります。<point>まで線に沿ってすべての停止色を進むグラデーションを作成します。ポイントが割合である場合には、塗りつぶされる領域のサイズに相対的なポイントになります。割合と長さのサイズを単一のグラデーション関数に混在させることはできません。repeatもreflectも指定しない場合、CycleMethodはデフォルトでNO_CYCLEに設定されます。bottom」に設定されます。ストップは、W3Cカラー・ストップ構文に準拠し、それに従って正規化されます。この例では、左上隅を赤、右下を黒として、塗りつぶし領域の左上から右下までグラデーションを作成します。black)これは、次の操作に相当します。100%)このさらに複雑な例では、最上部に高さ50pxのバーを3色のグラデーションで作成し、下の塗りつぶし領域の残りの部分は白にしています。2.0では非推奨になりました。CSSパーサーはこの構文をサポートしていますが、このサポートは将来のリリースでは廃止される可能性があります。<color-stop>]+)放射状グラデーションは、中心点から外側に向かって半径まで放射線状にすべての停止色を進むグラデーションを作成します。中心点を指定しない場合、中心はデフォルトで(0,0)に設定されます。パーセント値は、塗りつぶされる領域のサイズに相対的な値になります。割合と長さのサイズを単一のグラデーション関数に混在させることはできません。repeatもreflectも指定しない場合、CycleMethodはデフォルトでNO_CYCLEに設定されます。ストップは、W3Cカラー・ストップ構文に準拠し、それに従って正規化されます。次に、radial-gradientの使用例を示します。2.0では非推奨になりました。CSSパーサーはこの構文をサポートしていますが、このサポートは将来のリリースでは廃止される可能性があります。<boolean>]?]?)パラメータは、順に次のようになります。アンカー矩形のX原点。アンカー矩形のY原点。