UIスタイリング

*このコンテンツは、ベータ版のAI(人工知能)を使用して翻訳されており、エラーが含まれている可能性があります。このページを英語で表示するには、 こちら をクリックしてください。

UI スタイリングは、CSS に似ている Roblox の解決策で、UI インスタンスプロパティにオーバーライドを宣言し、グローバルに適用できます。このエンジンレベルのサポートは、スタイルエディタ と終端トークンパイプラインの基礎です。

コンセプト

スタイル ルール (一部の StyleSheet ) は、規則の Selector 定義に一致するすべてのインスタンスに適用され、クラス名、インスタンス名、階層関係などの特徴に一致します。詳細については、Selector ドキュメントを参照してください。

スタイル トークン 、トークンの 属性 を通じて定義され、例えば、スタイルやコンポーネント間で使用できる UI プロパティ変数を表す、例えば、共通の色で 、 、および 。トークンは CSS 変数 と同等です。

スタイル テーマ 、テーマ 属性 を通じて構成され、例えば「ライト」と「ダーク」テーマを定義する色トークンのセットを交換できる、テーマ StyleSheet で構成されています。関連するテーマは、正しく機能するには同じトークンセットが必須です。

ルール拡散

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

セレクター定義

高レベルでは、ルールの Selector 定義を介したインスタンスマッチングと修正は次のように機能します:

  • Roblox クラス は、例えば GuiObjectFrameImageLabelTextButton など、指定されたすべてのインスタンスをターゲットとする選択器です。
  • インスタンス タグ は、CollectionService を介して特定の UI オブジェクトに適用されました。
  • UI オブジェクトの 名 の値によるインスタンス選択。
  • インスタンス 修正子CSS 偽要素 に似て、ファントム UIComponents を介して適用される、例えば UICorner または UIStroke のような。
  • GuiObject 状態 選択者は、CSS 仮想クラス 選択者と同様、4つの GuiState 枚数のうちの1つ、例えば Hover に対応します。

次の設定では、サイズおよびカラートークン、テーマ、および "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"))
-- テーマA
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")
-- テーマB
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")
-- デザインシート
local designSheet = Instance.new("StyleSheet")
designSheet.Name = "DesignSheet"
designSheet.Parent = ReplicatedStorage
local themeDerive = Instance.new("StyleDerive")
themeDerive.StyleSheet = themeB -- テーマBから派生する
themeDerive.Parent = designSheet
-- リンクデザインシートをスクリーンGUIに
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

修正されたプロパティ

スタイリングによって影響を受けるインスタンスプロパティは、 でマークされた プロパティ ウィンドウに表示され、影響を受けたプロパティをホバーすると、どのスタイルがそれを影響しているかが表示されます。たとえば、スタイルルールがタグ付きの に の を使用するように指示した場合、そのオブジェクトプロパティは デフォルト値 を表示しますが、実際の はルールの スタイル値 を使用します。

デフォルトまたはスタイル付きのプロパティ値が特定の UI オブジェクトのためにさらに修正されると、オーバーライドされた値を示すために ボールド になります。たとえば — デフォルトの AnchorPoint0, 0 を想定して — 特定のインスタンスのためにそのプロパティを 1, 1 に設定すると、太字でオーバーライドが表示されます:

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