UIスタイリング

UIスタイリングは、スタイルシートのためのRobloxのソリューションであり、CSSに似ているもので、UIインスタンスプロパティにオーバーライドを宣言し、グローバルに適用できるようにします。このエンジンレベルのサポートは、スタイルエディターとエンドツーエンドのトークンパイプラインの基盤です。

コンセプト

スタイルルール（StyleSheetの一部）は、ルールのSelector定義に一致するすべてのインスタンスに適用され、クラス名やインスタンス名、階層関係といった特性に一致します。詳細については、Selectorのドキュメントを参照してください。

スタイルトークンは、トークンStyleSheetの属性を介して定義されており、スタイルやコンポーネント全体で使用できるUIプロパティの変数を表します。例えば、Frame.BackgroundColor3、TextLabel.TextColor3、およびUIStroke.Colorの共通の色などです。トークンはCSSの変数に相当します。

スタイルテーマは、テーマStyleSheetの属性を介して設定され、スワップ可能な特定のトークンのセットで構成されます。例えば、「ライト」テーマと「ダーク」テーマを定義する色トークンです。関連するテーマは、正しく機能するために同じセットのトークンを持たなければなりません。

スタイルクエリは、UIのコンテキストや環境に基づいてスタイルを条件付きで適用できるようにします。これらはCSSのコンテナクエリやメディアクエリに相当し、UIが画面サイズ、入力タイプ、またはユーザーのアクセシビリティ設定に適応できるようにします。

ルールの伝播

StyleLinkインスタンスは、StyleSheetとその関連するルールを親のScreenGuiおよびそれに含まれるすべてのGuiObjectsにリンクします。特定のツリーに対して適用されるStyleSheetは1つだけです。

セレクタの定義

高レベルでは、ルールのSelector定義を介したインスタンスの一致と変更は次のように操作されます：

Roblox クラスセレクタは、特定のGuiObjectクラスのすべてのインスタンスにターゲットを絞ります。例えばFrame、ImageLabel、TextButtonなどです。
特定のUIオブジェクトにCollectionServiceを介して適用されたインスタンスのタグ。
UIオブジェクトのInstance.Nameの値に従ったインスタンス名の選択。
CSSの擬似要素に似たインスタンス修飾子、ファントムUIComponents（例えばUICornerやUIStroke）を介して適用されます。
CSSの擬似クラスに似たGuiObject 状態セレクタは、GuiStateの4つの列挙値のいずれかに対応します。例えばHoverです。
Roblox クエリセレクタは、CSSのコンテナおよびメディアクエリに似ており、@プレフィックスを使用して、同じ名前のStyleQueryインスタンスまたは擬似インスタンスがアクティブである間のみスタイルを適用します。

次のセットアップは、サイズと色のトークン、テーマ、およびクラスセレクタ『"Frame"』が組み合わさって、サイズが200×200ピクセルのマゼンタのFrameを生成する様子を示しています。

コードの同等物

UI クラスセレクタ
local CollectionService = game:GetService("CollectionService")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local screenGui = script.Parent

-- トークン
local tokens = Instance.new("StyleSheet")
tokens.Name = "Tokens"
tokens.Parent = ReplicatedStorage
tokens:SetAttribute("SquareS", UDim2.fromOffset(50, 50))
tokens:SetAttribute("SquareM", UDim2.fromOffset(100, 100))
tokens:SetAttribute("SquareL", UDim2.fromOffset(200, 200))
tokens:SetAttribute("Fit", UDim2.fromScale(1, 1))
tokens:SetAttribute("Magenta", Color3.fromHex("FF0099"))
tokens:SetAttribute("Gold", Color3.fromHex("FFCC00"))
tokens:SetAttribute("Aqua", Color3.fromHex("0093F0"))

-- ThemeA
local themeA = Instance.new("StyleSheet")
themeA.Name = "ThemeA"
themeA.Parent = ReplicatedStorage
local tokensDerive = Instance.new("StyleDerive")
tokensDerive.StyleSheet = tokens  -- グローバルトークンを継承
tokensDerive.Parent = themeA
themeA:SetAttribute("FrameSize", "$SquareM")
themeA:SetAttribute("FrameColor", "$Aqua")

-- ThemeB
local themeB = Instance.new("StyleSheet")
themeB.Name = "ThemeB"
themeB.Parent = ReplicatedStorage
local tokensDerive = Instance.new("StyleDerive")
tokensDerive.StyleSheet = tokens  -- グローバルトークンを継承
tokensDerive.Parent = themeB
themeB:SetAttribute("FrameSize", "$SquareL")
themeB:SetAttribute("FrameColor", "$Magenta")

-- DesignSheet
local designSheet = Instance.new("StyleSheet")
designSheet.Name = "DesignSheet"
designSheet.Parent = ReplicatedStorage
local themeDerive = Instance.new("StyleDerive")
themeDerive.StyleSheet = themeB  -- ThemeBから継承
themeDerive.Parent = designSheet

-- DesignSheetをScreenGuiにリンク
local styleLink = Instance.new("StyleLink")
styleLink.StyleSheet = designSheet
styleLink.Parent = screenGui

-- ルールを設定
local rule = Instance.new("StyleRule")
rule.Selector = "Frame"  -- クラスセレクタ
rule.Parent = designSheet

-- ルールプロパティを設定
rule:SetProperties({
	["BackgroundColor3"] = "$FrameColor",
	["Size"] = "$FrameSize",
	["BorderSizePixel"] = 0
})

local frame = Instance.new("Frame")
frame.Parent = screenGui

スタイリングに影響されるインスタンスプロパティは、⚠がプロパティウィンドウにフラグ付けされており、影響を受けるプロパティにカーソルを合わせるとどのスタイルがそれを影響しているかが表示されます。例えば、スタイルルールがタグ付きのFrameにAnchorPointを0.5, 0.5の値を使用するように指示した場合、そのオブジェクトプロパティはデフォルト値の0, 0を表示しますが、実際のAnchorPointはルールのスタイル設定された値を使用します。

デフォルトまたはスタイル設定されたプロパティの値が特定のUIオブジェクトのためにさらに変更されると、それは太字で表示されてオーバーライドされた値を示します。例えば、デフォルトのAnchorPointが0, 0であると仮定した場合、特定のインスタンスのためにそのプロパティを1, 1に設定すると、太字でオーバーライドが表示されます：

任意のオーバーライドされたプロパティ値については、プロパティウィンドウで右クリックしてデフォルトにリセットを選択し、スタイル設定された値に戻すことができます。また、スタイルが設定されていない場合はデフォルトプロパティ値にリセットできます。

コンセプト

ルールの伝播

セレクタの定義

修正されたプロパティ