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