内蔵のスタイルエディタは、トークン、デザインシート、スタイルルール、およびテーマの組み合わせを使用して、RobloxゲームのUIスタイルを作成、管理、適用できる包括的なツールです。
UIタブを介してスタイルエディタにアクセスします。
開いたら、デザインを作成ボタンをクリックして、基本スタイルセットを生成します。
スタイルエディタを使用してデザインスタイルセットを作成すると、ReplicatedStorage内のDesignフォルダーにBaseStyleSheetが生成されます。このベースシートは、Color3のデフォルトである[163, 162, 165]のような特定のエンジンレベルのデフォルトと、スタジオの挿入ワークフローからのデフォルトを同期します。ベーススタイルシートを削除したり、変更しようとしたりしないことを強くお勧めします。代わりに、UI目標に合わせてデザインシートの周りにトークンとスタイルルールを構築します。
さらに、Designフォルダー内にスタイルシートが生成され、ベーススタイルシートからトークンとスタイルを派生させるStyleDeriveが含まれています。そのStyleDeriveを削除すると、GuiObjectsのスタイルのない値が予期しない値になる可能性があります。たとえば、デフォルトのSizeは0, 0, 0, 0になります。
スタイルトークン
スタイルトークンは、トークンStyleSheetの属性を介して定義され、スタイルとコンポーネント全体で使用できるUIプロパティ変数を表します。たとえば、Frame.BackgroundColor3、TextLabel.TextColor3、およびUIStroke.Colorに共通の色があるかもしれません。トークンはCSS変数に似ています。
UIスタイリングに必須ではありませんが、反復可能なUIデザインとスタイルの更新のためにトークンを使用することを強くお勧めします。ユニバーサルスタイリングの他の側面との関連性を理解するために、以下のトークンを作成することから始めてください。
新しいトークンスタイルシートを作成します：
- スタイルエディタの左側の列で、トークンにカーソルを合わせ、⊕をクリックして新しい トークン スタイルシートを選択します。
- 新しいシートの名前をTokenSheetに変更します。
デザインシート
デザインスタイルシートはスタイルルールを集約し、UIインスタンスにスタイルプロパティを適用するためにDataModelツリーにリンクされる可能性があります。特定のツリーに適用できるのは一つのStyleSheetのみですが、テーマを使用してUI全体の関連スタイルを入れ替えることができ、この概念はこのガイドの後の方で説明されます。
デザインを作成ボタンを介して、事前にポピュレートされたデザインシートがStyleSheetという名前で作成されます。このシートには、FrameやTextLabelなどの一般的なUIオブジェクトのためのクラスルールが含まれています。また、カスタムスタイリング構成で使用するために、基本スタイルシートからトークンとスタイルを継承する二つのStyleDeriveインスタンスも含まれています。
デザインシートを持っていると、スタイルエディタで使用するためのテストオンスクリーンコンテナを設定するか、必要に応じてインエクスペリエンスコンテナを設定できます。
Explorer内のStarterGuiにカーソルを合わせ、ScreenGuiを挿入します。
スタイルルール
スタイルルールは、ルールのSelector定義と一致するすべてのインスタンスに適用され、クラス名、インスタンスタグ、階層関係などの特性と一致します。高レベルでは、ルールのSelector定義によるインスタンスの一致と修正は以下のように機能します：
- インスタンス名選択は、UIオブジェクトのInstance.Nameの値に基づいています。
クラスルール
スタイルクラスセレクタは、特定のUIクラスのすべてのインスタンスを対象とします。以下のルールセットは、すべてのFramesに均一な背景色とサイズを持たせます。
スタイルエディタの左側の列で、UI ElementsブランチのFrameを選択します。
二つのFrameプロパティに二つの事前に作成されたスタイルトークンをリンクします：
プロパティ スタイルトークン BackgroundColor3 $Magenta Size $SquareL - メインパネルで**プロパティを追加…**をクリックし、必要なプロパティを選択します。ドロップダウンメニューでプロパティをより迅速に見つけるためにキーワードを入力できます。
- 静的値を入力する代わりに、**⋮**ボタンをクリックし、リンク トークンを選択します。
- 値フィールドに表示される$をクリックして、適切な関連トークンを選択します。
タグルール
インスタンスタグセレクタは、CollectionServiceを通じてタグ付けされた特定のUIオブジェクトを対象とします。以下のルールセットは、ButtonPrimaryとしてタグ付けされたTextButtonにカスタム背景色、フォント、およびテキストサイズをスタイルします。
スタイルエディタの左側の列で、StyleSheetシートにカーソルを合わせ、**⋮**ボタンをクリックし、新規 ⟩ タグを選択します。
新しいタグルールの名前を.ButtonPrimaryに変更します（先頭に.を付けます）。
三つの以前に作成されたスタイルトークンを三つのTextButtonプロパティにリンクします：
プロパティ スタイルトークン BackgroundColor3 $Gold FontFace $Oswald TextSize $Text32 - メインパネルで**プロパティを追加…**をクリックし、必要なプロパティを選択します。ドロップダウンメニューでプロパティをより迅速に見つけるためにキーワードを入力できます。
- 静的値を入力する代わりに、**⋮**ボタンをクリックし、リンク トークンを選択します。
- 値フィールドに表示される$をクリックして、適切な関連トークンを選択します。
以前に作成してリンクした ScreenGuiに新しいTextButtonを挿入し、それをButtonPrimaryとしてタグ付けします。便利なショートカットは次のとおりです：
- 新しいTextButtonがExplorerで選択されていることを確認します。
- スタイルエディタの左側の列で**.ButtonPrimaryタグルールが選択されている状態で、メインパネル内のタグを適用**をクリックします。定義したスタイルがボタンに自動的に適用されるはずです。
UIモディファイア
インスタンスモディファイアセレクタは、UICornerやUIStrokeなどのファントムUIComponentsを使用してオブジェクトをさらにスタイリングします。以下のルールセットは、カスタムテキストサイズと丸みを帯びたコーナーを持つTextLabelをスタイリングします。
スタイルエディタの左側の列で、TextLabelをUI Elementsブランチから選択します。
丸みを帯びたコーナーを他の要素に構成して適用するには擬似インスタンスが必要です。作成するには：
左側の列でTextLabelにカーソルを合わせ、**⋮**ボタンをクリックし、新規 ⟩ 擬似 インスタンス ⟩ UICornerに移動します。
左側の列のTextLabel要素の下に、新しいUICorner擬似インスタンスが表示されます。
新しいUICornerインスタンスが左側の列で選択されている状態で、以前に作成されたスタイルトークンをCornerRadiusプロパティにリンクします：
- メインパネルで**プロパティを追加…**をクリックし、CornerRadiusプロパティを選択します。
- 静的値を入力する代わりに、**⋮**ボタンをクリックし、リンク トークンを選択します。
- 値フィールドに表示される$をクリックして、$Rad20トークンを選択します。
ステートルール
GuiObjectのステートセレクタは、GuiState列挙型の四つの値のいずれかに対応しており、インタラクティブステートのスタイル変更を自動的に構成できます。以下のルールセットは、すべてのImageButtonsのホバーステートを-4度の回転に設定します。
スタイルエディタの左側の列で、ImageButtonをUI Elementsブランチから選択します。
**⋮**ボタンをクリックし、新規 ⟩ GuiState ⟩ Hoverに移動します。
左側の列に新しいHoverステートモディファイアインスタンスが表示されます。
新しいHoverモディファイアが左側の列で選択されている状態で、メインパネル内の**プロパティを追加…**をクリックし、Rotationを選択します。ドロップダウンメニューでプロパティをより迅速に見つけるためにキーワードを入力できます。
プロパティの値フィールドに-4を入力します。
以前に作成してリンクした ScreenGuiに新しいImageButtonを挿入します。ビューポート内でボタンにカーソルを合わせると、4度反時計回りに回転するはずです。
スタイルクエリ
スタイルクエリは、CSSコンテナおよびメディアクエリに似ており、コンテナのサイズ、入力タイプ、またはその他の要因に基づいてUIに条件付きロジックを適用できるようにします。スタイルエディタは、クエリロジック（条件）とそれに基づいて適用されるスタイルを統一されたセットとして作成するための合理化されたワークフローを提供します。
組み込みクエリ
いくつかのStyleQuery条件は非常に一般的で、ViewportDisplaySizeに基づいてプロパティを変更することなどです。これを簡略化するために、スタイルエディタには組み込みクエリが含まれており、StyleQueryの擬似インスタンスの実体なしで条件ルールを作成でき、代わりにViewportDisplaySizeSmallのような事前定義されたセレクタを持つクエリルールを使用するだけです。
以下の手順は、TextLabelのためにSmall、Medium、およびLargeビューポートサイズに対応した組み込みクエリを生成する方法を示しています。
スタイルエディタの左側の列で、TextLabelにカーソルを合わせ、**⋮**ボタンをクリックし、新規 ⟩ StyleQuery ⟩ Builtin ⟩ ViewportDisplaySizeに移動します。
これにより、QueriesフォルダーがTextLabelルール内に作成され、三つのクエリルールが含まれます：
- @ViewportDisplaySizeLarge — ビューポートがLargeの場合に適用されるプロパティを定義します。
- @ViewportDisplaySizeMedium — ビューポートがMediumの場合に適用されるプロパティを定義します。
- @ViewportDisplaySizeSmall — ビューポートがSmallの場合に適用されるプロパティを定義します。
クエリを確認するには、デバイスエミュレータを使用して、UIが三つの異なるデバイスで異なる解像度にどう反応するかをテストします。
デバイスエミュレータのデバイスを変更して、テキストがリアルタイムで変わるのを確認します。
カスタムクエリ
既存のルールにスタイルクエリを追加して、コンテナに応じて適応するレスポンシブUIを作成できます。以下の設定は、幅が400ピクセル以上に拡張されたときのみ外観が自動的に変わるTextLabelを構成します。
スタイルエディタの左側の列で、TextLabelにカーソルを合わせ、**⋮**ボタンをクリックし、新規 ⟩ StyleQuery ⟩ カスタムに移動します。
この操作により、QueriesフォルダーがTextLabelルール内に作成され、二つのリンクアイテムが含まれます：
- ::StyleQuery擬似インスタンスルール。ここで条件を定義します。
- @StyleQueryルール。条件が満たされたときに適用されるプロパティを定義します。
メインパネル内の親TextLabelルールを選択し、以下のデフォルトプロパティを定義します：
プロパティ 値 BackgroundColor3 $Magenta Text Default Text ::StyleQueryルールをメインパネルで選択し、**条件を追加…**をクリックして以下のように構成します：
条件 値 MinSize 400, 0 StyleQuery.IsActiveを参照して、::StyleQueryルールを介して利用可能な他の条件を確認してください。
@StyleQueryルールをメインパネルで選択し、クエリがアクティブなときに適用されるプロパティを設定します：
プロパティ 値 BackgroundColor3 $Gold Text Large Text
クエリを確認するには、ビューポート内でTextLabelのサイズを手動で変更できます。
手動でサイズを変更することはレスポンシブロジックを確認するための迅速な手段ですが、より正確なテストのためにStudioの組み込みエミュレーションツールを使用することもできます：
- デバイスエミュレーターを使用して、特定の画面解像度やViewportDisplaySize条件に対するUIの反応をテストします。
- コントローラーエミュレーターを使用して、ゲームパッドが検出されたときにスタイルが切り替わるなど、PreferredInputロジックを確認します。
スタイルトランジション
スタイルトランジションは、CSSトランジションに相当し、セットされた期間にわたってプロパティ値をアニメーションさせることができます。
デフォルト
同じパラメータで多くのUIプロパティをトゥイーンするには、特定のプロパティに別のトランジションが明示的に設定されていない限り、すべてのプロパティに適用されるデフォルトトランジションを設定できます。
UI ElementsブランチからTextButtonを選択し、メインパネルで以下の値を持つ三つの新しいプロパティを追加します：
プロパティ 値 AutoButtonColor false BackgroundColor3 #335FFF Rotation 0 
親TextButton行にカーソルを合わせ、**⋮**ボタンをクリックし、新しい ⟩ GuiState ⟩ Hoverに移動します。
以前に作成してリンクした ScreenGuiに新しいTextButtonを挿入します。ビューポート内でボタンにカーソルを合わせると、それは徐々に明るくなり、5度反時計回りに回転するはずです。
トークンリンク
複数のルール間でトランジション動作を再利用するには、TweenInfoデータタイプを表すトークンを定義できます。以下のルールセットは、ホバーステートを作成し、すべてのTextButtonsを-5度の回転とより明るい背景色にトランジションするように設定します。
まだ作成していない場合は、TokenSheetと呼ばれるトークンスタイルシートを作成します。
UI ElementsブランチからTextButtonを選択し、メインパネルで以下の値を持つ三つの新しいプロパティを追加します：
プロパティ 値 AutoButtonColor false BackgroundColor3 #335FFF Rotation 0 AutoButtonColor以外の新しいプロパティのそれぞれについて、行にカーソルを合わせて**⋮**ボタンをクリックし、挿入 ⟩ トランジションを選択します。
各プロパティの下の新しいトランジション行にカーソルを合わせ、⋮ボタンをクリックしてリンク トークンを選択します。その後、静的値を入力する代わりに、値フィールドに表示される$をクリックして、適切なトランジショントークンを選択します。
プロパティトランジション トランジショントークン BackgroundColor3 $CubicOut Size $QuadInOut 
親TextButton行にカーソルを合わせ、**⋮**ボタンをクリックし、新しい ⟩ GuiState ⟩ Hoverに移動します。
以前に作成してリンクした ScreenGuiに新しいTextButtonを挿入します。ビューポート内でボタンにカーソルを合わせると、それが徐々に明るくなり、5度反時計回りに回転するはずです。
スタイルテーマ
スタイルテーマは、例えば「ライト」と「ダーク」テーマを定義する色トークンのセットを構成しています。
テーマ作成
拡張性のために、テーマはフォルダーに整理されています。一つのフォルダーがほとんどの目的に十分かもしれませんが、必要に応じて「colors」や「fonts」といったフォルダーにテーマを整理することは自由です。
新しいテーマフォルダーを作成します：
- スタイルエディタの左側の列で、テーマにカーソルを合わせ、⊕をクリックして新しい テーマを選択します。
- 新しいフォルダーアイテムの名前をGeneralに変更します。
新しいテーマスタイルシートを作成します：
- 新しいGeneralフォルダーにカーソルを合わせ、**⋮**ボタンをクリックし、新しい テーマ スタイルシートを選択します。
- その名前をThemeAに変更します。
テーマトークン
テーマが構成されると、そのトークンをBackgroundColor3のようなさまざまなUIオブジェクトプロパティにリンクできます。テーマシートは正しく動作するために共通のトークンセットを使用する必要があります。
スタイルエディタの左側の列でThemeAが選択されている状態で：
三つの以前に作成されたスタイルトークンを三つの新しいテーマトークンにリンクします：
テーマトークン スタイルトークン BackColor $Gold ButtonFont $Oswald ButtonTextSize $Text32 - メインパネルで**トークンを追加…**をクリックし、テーマトークンの名前を入力します。
- 値フィールドに表示される$をクリックして関連するスタイルトークンを選択します。
スタイルエディタの左側の列で、TextButtonをUI Elementsブランチから選択します。
テーマのトークンを三つの新しいTextButtonプロパティにリンクします：
プロパティ テーマトークン BackgroundColor3 $BackColor FontFace $ButtonFont TextSize $ButtonTextSize - メインパネルで**プロパティを追加…**をクリックし、必要なプロパティを選択します。
- 静的値を入力する代わりに、**⋮**ボタンをクリックし、リンク トークンを選択します。
- 値フィールドに表示される$をクリックして、適切なテーマトークンを選択します。
テーマのトークンをリンクする際は、ホバーオーバーで**$[Token] in ThemeAを探して、トークンがテーマ**から来ていることを確認してください。グローバルトークンシートからのものでないことに注意してください（テーマはすでにグローバルトークンを継承しています）。
テーマの複製
テーマが一般的に確立されたら、それを複製してさまざまなトークンを変更してユニークなテーマスタイルを定義できます。
スタイルエディタの左側の列で、ThemeAテーマにカーソルを合わせ、⋮ボタンをクリックして複製を選択します。
複製されたテーマの名前をThemeBに変更します。
テーマの二つのトークンを異なるスタイルトークンにリンクします：
テーマトークン スタイルトークン BackColor $Magenta ButtonTextSize $Text24 - プロパティの値フィールドの右側にある**⋮ボタンをクリックしてトークンのリンク解除**を選択します。
- **⋮**を再度クリックし、リンクトークンを選択します。
- 値フィールドで$をクリックし、新しい関連スタイルトークンを選択します。
テーマの入れ替え
複数のテーマを持っている場合、テーマのフォルダーを介してまたはSetDerives()でのスクリプトを介してテーマを入れ替えることができます。
スタイルエディタの左側の列で、Themesブランチ内のGeneralフォルダーを選択します。
メインパネルで、ラジオボタンを使用してテーマを入れ替えます。
