クリエーター

CSS 比較

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

ほとんどの CSS の概念は、Roblox のスタイリング概念にマッピングされます。以下の例は、CSS と HTML が Luau と Roblox のクラス/プロパティにどのように対応するかを示しています。

次の Luau スクリプト例をテストするには：

  1. Explorerで次のものを作成します。

    1. StyleSheet インスタンスを ReplicatedStorage の中に作成します。
    2. ScreenGui コンテナを StarterGui の中に作成します。
    3. LocalScript インスタンスを ScreenGui の中に作成します。
    4. StyleLink オブジェクトを ScreenGui の中に作成します。

  2. LocalScript に次のサポートコードを貼り付けます：

    LocalScript
    local CollectionService = game:GetService("CollectionService")

    local ReplicatedStorage = game:GetService("ReplicatedStorage")

    

    local coreSheet = ReplicatedStorage:FindFirstChildWhichIsA("StyleSheet")

    local screenGui = script.Parent

    local styleLink = screenGui:FindFirstChildWhichIsA("StyleLink")

    styleLink.StyleSheet = coreSheet

  3. 以下の各例について、サポート行 1 ～ 7 の後に Luau コード行を貼り付けます。

セレクタ

Selector プロパティの StyleRule は、ルールが影響を与えるインスタンスを指定します。以下のセレクタタイプは、CSS から Luau にマッピングされ、コンビネーターと共に使用できます。

要素

CSS の要素セレクタに相当する Roblox クラスセレクタは、特定の GuiObject クラスのすべてのインスタンスを選択します。たとえば、Frame、ImageLabel、TextButton などです。

CSS
button {

	background-color: #335FFF;

	color: #E1E1E1;

	width: 15%;

	height: 40px;

	border: none;

}
HTML
<button>Main Menu</button>

Luau
local rule = Instance.new("StyleRule")

rule.Parent = coreSheet



rule.Selector = "TextButton" -- Roblox クラスセレクタ

rule:SetProperties({

	BackgroundColor3 = Color3.fromHex("335FFF"),

	TextColor3 = Color3.fromHex("E1E1E1"),

	Size = UDim2.new(0.15, 0, 0, 40),

	BorderSizePixel = 0

})



local button = Instance.new("TextButton")

button.Text = "Main Menu"

button.Parent = screenGui

クラス

Roblox の CSS の class セレクタに相当するのは タグセレクタで、CollectionService を通じて適用された タグ を使用します。

CSS
.button-primary {

	background-color: #335FFF;

	color: #E1E1E1;

}
HTML
<button class="button-primary">Main Menu</button>

Luau
local rule = Instance.new("StyleRule")

rule.Parent = coreSheet



rule.Selector = ".ButtonPrimary" -- Roblox タグセレクタ

rule:SetProperties({

	BackgroundColor3 = Color3.fromHex("335FFF"),

	TextColor3 = Color3.fromHex("E1E1E1"),

	AutomaticSize = Enum.AutomaticSize.XY

})



local button = Instance.new("TextButton")

button.Text = "Main Menu"

button.Parent = screenGui

-- ボタンにタグを適用

CollectionService:AddTag(button, "ButtonPrimary")

識別子

CSS の id に対する最も近い Roblox の比較は、#[name] セレクタで、Instance.Name の値に従って選択します。W3C の id 属性の仕様とは異なり、名前がユニークである必要はありません。

CSS
#modal-frame {

	background-color: #000022;

	opacity: 0.5;

	width: 50%;

	min-height: 100px;

}
HTML
<div id="modal-frame"></div>

Luau
local rule = Instance.new("StyleRule")

rule.Parent = coreSheet



rule.Selector = "#ModalFrame" -- インスタンス名セレクタ

rule:SetProperties({

	BackgroundColor3 = Color3.fromHex("000022"),

	BackgroundTransparency = 0.5,

	Size = UDim2.new(0.5, 0, 0, 100),

	AutomaticSize = Enum.AutomaticSize.Y

})



local frame = Instance.new("Frame")

frame.Parent = screenGui

-- セレクタに一致するようにフレームの名前を変更

frame.Name = "ModalFrame"

コンビネーター

コンビネーターを使用すると、基本的な セレクタ を組み合わせて、より深い階層関係を一致させることができます。

子

> の子セレクタは、CSS と Roblox の間で同一です。

CSS
.menu-container {

	width: 25%;

}



.menu-container > button {

	background-color: #335FFF;

	color: #E1E1E1;

	width: 80%;

	height: 40px;

	border: none;

}
HTML
<div class="menu-container">

	<button>Options</button>

</div>

Luau
local rule = Instance.new("StyleRule")

rule.Parent = coreSheet



rule.Selector = ".MenuContainer > TextButton" -- 子セレクタ

rule:SetProperties({

	BackgroundColor3 = Color3.fromHex("335FFF"),

	TextColor3 = Color3.fromHex("E1E1E1"),

	Size = UDim2.new(0.8, 0, 0, 40),

	BorderSizePixel = 0

})



-- メニューコンテナを作成

local menuContainer = Instance.new("Frame")

menuContainer.Size = UDim2.new(0.25, 0, 0, 0)

menuContainer.AutomaticSize = Enum.AutomaticSize.Y

menuContainer.Parent = screenGui

-- タグを適用

CollectionService:AddTag(menuContainer, "MenuContainer")



-- ボタンを作成

local button = Instance.new("TextButton")

button.Text = "Options"

-- ボタンの親をメニューコンテナに設定

button.Parent = menuContainer

子孫

CSS の空白構文とは異なり、たとえば .menu-container button のように、Roblox では >> コンビネーターを使用して子孫関係を示します。

CSS
.menu-container {

	width: 25%;

}



.sub-container {

	width: 75%;

}



.menu-container button {

	background-color: #335FFF;

	color: #E1E1E1;

	width: 80%;

	height: 40px;

	border: none;

}
HTML
<div class="menu-container">

	<div class="sub-container">

		<button>Options</button>

	</div>

</div>

Luau
local rule = Instance.new("StyleRule")

rule.Parent = coreSheet



rule.Selector = ".MenuContainer >> TextButton" -- 子孫セレクタ

rule:SetProperties({

	BackgroundColor3 = Color3.fromHex("335FFF"),

	TextColor3 = Color3.fromHex("E1E1E1"),

	Size = UDim2.new(0.8, 0, 0, 40),

	BorderSizePixel = 0

})



-- メニューコンテナを作成

local menuContainer = Instance.new("Frame")

menuContainer.Size = UDim2.new(0.25, 0, 0, 0)

menuContainer.AutomaticSize = Enum.AutomaticSize.Y

menuContainer.Parent = screenGui

-- タグを適用

CollectionService:AddTag(menuContainer, "MenuContainer")



-- サブコンテナを作成

local subContainer = Instance.new("Frame")

subContainer.Size = UDim2.new(0.75, 0, 0, 0)

subContainer.AutomaticSize = Enum.AutomaticSize.Y

-- メニューコンテナをサブコンテナの親に設定

subContainer.Parent = menuContainer



-- ボタンを作成

local button = Instance.new("TextButton")

button.Text = "Options"

-- サブコンテナをボタンの親に設定

button.Parent = subContainer

セレクタリスト

複数のセレクタ（コンビネーター付きのセレクタを含む）を同じプロパティブロックで宣言し、カンマで区切ることで冗長性を減らすことができます。

CSS
img, p {

	background-color: #FF0033;

}
HTML
<img src="gear.png" width="100" height="100">



<p>Main Menu</p>

Luau
local rule = Instance.new("StyleRule")

rule.Parent = coreSheet



rule.Selector = "ImageLabel, TextLabel" -- 画像ラベルとテキストラベルのためのセレクタ

rule:SetProperty("BackgroundColor3", Color3.fromHex("ff0033"))



-- 画像ラベルを作成

local imageLabel = Instance.new("ImageLabel")

imageLabel.Image = "rbxassetid://104919049969988"

imageLabel.Size = UDim2.new(0, 100, 0, 100)

imageLabel.Parent = screenGui



-- テキストラベルを作成

local textLabel = Instance.new("TextLabel")

textLabel.Size = UDim2.new(1, 0, 0, 0)

textLabel.AutomaticSize = Enum.AutomaticSize.Y

textLabel.TextXAlignment = Enum.TextXAlignment.Left

textLabel.TextYAlignment = Enum.TextYAlignment.Top

textLabel.Text = "Main Menu"

textLabel.Parent = screenGui

擬似クラス

Roblox の CSS 擬似クラス セレクタに相当するのは、Enum.GuiState の 4 つの値のいずれかに対応する 状態セレクタです。たとえば、Hover や Press などです。

CSS
img:hover {

	opacity: 0.5;

}
HTML
<img src="gear.png" width="100" height="100">

Luau
local rule = Instance.new("StyleRule")

rule.Parent = coreSheet



rule.Selector = "ImageLabel:Hover" -- 状態セレクタ

rule:SetProperty("ImageTransparency", 0.5)



-- 画像ラベルを作成

local imageLabel = Instance.new("ImageLabel")

imageLabel.Image = "rbxassetid://104919049969988"

imageLabel.Size = UDim2.new(0, 100, 0, 100)

imageLabel.BackgroundTransparency = 1

imageLabel.Parent = screenGui

擬似インスタンス

CSS の 擬似要素 が要素の特定の部分を変更できるのと同様に、Roblox ではスタイルルールの Selector プロパティを通じてファントムの UIComponents を作成できます。たとえば、以下のルールは、すべての Frame に RoundedCorner20 タグが付けられたモディファイアーとして、各モディファイアーの CornerRadius を 20 ピクセルに設定します。

Luau
local rule = Instance.new("StyleRule")

rule.Parent = coreSheet



rule.Selector = "Frame.RoundedCorner20::UICorner" -- UI コンポーネントセレクタ

rule:SetProperty("CornerRadius", UDim.new(0, 20))



-- フレームを作成

local frame = Instance.new("Frame")

frame.Size = UDim2.new(0.4, 0, 0.2, 0)

frame.Parent = screenGui

-- フレームにタグを適用

CollectionService:AddTag(frame, "RoundedCorner20")

クエリ

Roblox の スタイルクエリ は、CSS の メディアクエリ と コンテナクエリ のギャップを埋めます。@ プレフィックスを使用して、親の寸法、入力デバイスタイプ、またはユーザーのアクセシビリティ設定に基づいてスタイルをトグルできます。

CSS では、@container が親要素のサイズに基づいてスタイルを適用します。Roblox では、条件の Selector プロパティのための識別子とともに、::StyleQuery を使用して擬似インスタンスクエリを定義します。例えば、"::StyleQuery #WideContainer" および "MinSize" のような StyleQuery 条件名を使用して、親の GuiObject.AbsoluteSize を評価します。それから、クエリがアクティブなときにインスタンスまたはその子にスタイルを適用するには、@[identifier] プレフィックスを使用した StyleRule を作成します。例として @WideContainer を挙げます。

CSS
.container {

	container-type: inline-size;

	background-color: rgba(0, 0, 34, 0.5);

}

button {

	background-color: #335FFF;

	color: #E1E1E1;

	width: 75%;

	height: 40px;

	border: none;

}



@container (min-width: 400px) {

	button {

		background-color: #cc0033;

	}

}
HTML
<div class="container" style="width: 80%; height: 200px;">

	<button>Main Menu</button>

</div>

Luau
-- コンテナルール

local containerRule = Instance.new("StyleRule")

containerRule.Selector = "Frame" -- Roblox クラスセレクタ

containerRule:SetProperties({

	BackgroundColor3 = Color3.fromRGB(0, 0, 34),

	BackgroundTransparency = 0.5,

	BorderSizePixel = 0

})

containerRule.Parent = coreSheet



-- ボタンルール

local buttonRule = Instance.new("StyleRule")

buttonRule.Selector = "TextButton" -- Roblox クラスセレクタ

buttonRule:SetProperties({

	BackgroundColor3 = Color3.fromHex("335FFF"),

	TextColor3 = Color3.fromHex("E1E1E1"),

	Size = UDim2.new(0.75, 0, 0, 40),

	BorderSizePixel = 0

})

buttonRule.Parent = containerRule -- コンテナルールの子



-- クエリ条件 (#WideContainer)

local queryCondition = Instance.new("StyleRule")

queryCondition.Selector = "::StyleQuery #WideContainer"

queryCondition:SetProperty("MinSize", Vector2.new(400, 0))

queryCondition.Parent = containerRule -- コンテナルールの子



-- 条件がアクティブなときに適用されるルール (@WideContainer)

local queryStyle = Instance.new("StyleRule")

queryStyle.Selector = "@WideContainer Frame > TextButton" -- 子セレクタ

queryStyle:SetProperty("BackgroundColor3", Color3.fromHex("CC0033"))

queryStyle.Parent = containerRule -- コンテナルールの子



-- インスタンスを作成

local container = Instance.new("Frame")

container.Size = UDim2.new(0.8, 0, 0, 200)

container.Parent = screenGui

local button = Instance.new("TextButton")

button.Text = "Main Menu"

button.Parent = container

Roblox はまた、ViewportDisplaySize や ReducedMotionEnabled などのグローバル環境状態に直接マッピングされる ビルトインクエリ を提供します。これらは ::StyleQuery 定義を必要とせず、直接 @ プレフィックスを使用できます。

CSS メディア機能Roblox スタイルクエリセレクタ
(max-width: 600px)@ViewportDisplaySizeSmall
(min-width: 601px) and (max-width: 1200px)@ViewportDisplaySizeMedium
(min-width: 1201px)@ViewportDisplaySizeLarge
(pointer: fine)@PreferredInputKeyboardAndMouse
(pointer: coarse)@PreferredInputTouch
(any-pointer: coarse)@PreferredInputGamepad
(prefers-reduced-motion: reduce)@ReducedMotionEnabledTrue
(prefers-reduced-motion: no-preference)@ReducedMotionEnabledFalse
CSS
.container {

	container-type: inline-size;

	background-color: rgba(0, 0, 34, 0.5);

}



@media (prefers-reduced-motion: reduce) {

	.container {

		background-color: rgba(0, 0, 34, 1);

	}

}
HTML
<div class="container" style="width: 80%; height: 200px;">

</div>

Luau
-- コンテナルール

local containerRule = Instance.new("StyleRule")

containerRule.Selector = "Frame" -- Roblox クラスセレクタ

containerRule:SetProperties({

	BackgroundColor3 = Color3.fromRGB(0, 0, 34),

	BackgroundTransparency = 0.5,

	BorderSizePixel = 0

})

containerRule.Parent = coreSheet



-- ビルトインクエリ

local motionRule = Instance.new("StyleRule")

motionRule.Selector = "@ReducedMotionEnabledTrue Frame"

motionRule:SetProperty("BackgroundTransparency", 0)

motionRule.Parent = containerRule -- コンテナルールの子



-- インスタンスを作成

local container = Instance.new("Frame")

container.Size = UDim2.new(0.8, 0, 0, 200)

container.Parent = screenGui

変数

CSS では、スタイルシステム全体で 変数 を宣言および参照できます。Roblox では、トークンおよび インスタンス属性システムを通じてこれを達成します。 $ をプレフィックスとして使用すると、スタイルプロパティを設定する際に、StyleRule または StyleSheet の継承チェーンにおいて宣言された属性を参照できます。

CSS
:root {

	--button-bg-color: #335FFF;

	--button-text-color: #E1E1E1;

}



button {

	background-color: var(--button-bg-color);

	color: var(--button-text-color);

}
HTML
<button>Main Menu</button>

Luau
local rule = Instance.new("StyleRule")

rule.Parent = coreSheet



-- 属性を使用してスタイルシートのトークンを設定

coreSheet:SetAttribute("ButtonBgColor", Color3.fromHex("335FFF"))

coreSheet:SetAttribute("ButtonTextColor", Color3.fromHex("E1E1E1"))



rule.Selector = "TextButton" -- クラスセレクタ

rule:SetProperties({

	BackgroundColor3 = "$ButtonBgColor",

	TextColor3 = "$ButtonTextColor"

})



-- ボタンを作成

local button = Instance.new("TextButton")

button.AutomaticSize = Enum.AutomaticSize.XY

button.Text = "Main Menu"

button.Parent = screenGui

トランジション

CSS の トランジション により、設定された期間の間にプロパティ値を補間できます。Roblox では、StyleRule のプロパティトランジションを設定することで、これを達成できます。SetPropertyTransition()（単体）または SetPropertyTransitions()（複数）を使用します。

CSS
button {

	background-color: #335FFF;

	color: #E1E1E1;

	width: 15%;

	height: 40px;

	border: none;

	transition:

		background-color 1s ease-out,

		transform 1.25s ease-out

}

button:hover {

	background-color: #33AAFF;

	transform: rotate(-5deg);

}
HTML
<button>Main Menu</button>

Luau
-- ボタンルール

local buttonRule = Instance.new("StyleRule")

buttonRule.Selector = "TextButton" -- Roblox クラスセレクタ

buttonRule:SetProperties({

	BackgroundColor3 = Color3.fromHex("335FFF"),

	TextColor3 = Color3.fromHex("E1E1E1"),

	Size = UDim2.new(0.15, 0, 0, 40),

	BorderSizePixel = 0

})

-- プロパティトランジションの動作を設定

buttonRule:SetPropertyTransitions({

	BackgroundColor3 = TweenInfo.new(1, Enum.EasingStyle.Cubic, Enum.EasingDirection.Out),

	Rotation = TweenInfo.new(1.25, Enum.EasingStyle.Cubic, Enum.EasingDirection.Out)

})

buttonRule.Parent = coreSheet



-- ボタンホバールール

local hoverRule = Instance.new("StyleRule")

hoverRule.Selector = "TextButton:Hover" -- 状態セレクタ

hoverRule:SetProperties({

	AutoButtonColor = false,

	BackgroundColor3 = Color3.fromHex("33AAFF"),

	Rotation = -5

})

hoverRule.Parent = coreSheet



-- テキストボタンを作成

local button = Instance.new("TextButton")

button.Text = "Main Menu"

button.Parent = screenGui

ネスティングとマージ

SCSS の概念を借用して、StyleRules をネストすることができ、そのセレクタは マージ されます。

SCSS
#menu-frame {

	background-color: #000022;

	width: 25%;

	min-height: 200px;

	display: flex;

	flex-direction: column;

	justify-content: space-evenly;

	align-items: center;

	

	> button {

		background-color: #335FFF;

		color: #E1E1E1;

		width: 80%;

		height: 40px;

		border: none;

		

		&:hover {

			opacity: 0.5;

		}

	}

}
HTML
<div id="menu-frame">

	<button>Charms</button>

	<button>Mana</button>

	<button>Scrolls</button>  

</div>

Luau
-- メニューフレームルール

local menuFrameRule = Instance.new("StyleRule")

menuFrameRule.Selector = "#MenuFrame"

menuFrameRule:SetProperties({

	BackgroundColor3 = Color3.fromHex("000022"),

	Size = UDim2.new(0.25, 0, 0, 200),

	AutomaticSize = Enum.AutomaticSize.Y

})

menuFrameRule.Parent = coreSheet



-- メニュー レイアウトルール

local menuLayoutRule = Instance.new("StyleRule")

menuLayoutRule.Selector = "::UIListLayout"

menuLayoutRule:SetProperties({

	FillDirection = Enum.FillDirection.Vertical,

	VerticalFlex = Enum.UIFlexAlignment.SpaceEvenly,

	HorizontalAlignment = Enum.HorizontalAlignment.Center

})

menuLayoutRule.Parent = menuFrameRule -- メニューフレームルールを親として設定



-- ボタンルール

local buttonRule = Instance.new("StyleRule")

buttonRule.Selector = "> TextButton"

buttonRule:SetProperties({

	BackgroundColor3 = Color3.fromHex("335FFF"),

	TextColor3 = Color3.fromHex("E1E1E1"),

	Size = UDim2.new(0.8, 0, 0, 40),

	BorderSizePixel = 0

})

buttonRule.Parent = menuFrameRule -- メニューフレームルールを親として設定



-- ボタンホバールール

local buttonHoverRule = Instance.new("StyleRule")

buttonHoverRule.Selector = ":Hover"

buttonHoverRule:SetProperties({

	AutoButtonColor = false,

	BackgroundTransparency = 0.5,

	TextTransparency = 0.5

})

buttonHoverRule.Parent = buttonRule -- ボタンルールを親として設定



-- 親フレームを作成

local menuFrame = Instance.new("Frame")

menuFrame.Name = "MenuFrame"

menuFrame.Parent = screenGui



-- フレーム内にボタンを作成

local button1 = Instance.new("TextButton")

button1.Text = "Charms"

button1.Parent = menuFrame

local button2 = Instance.new("TextButton")

button2.Text = "Mana"

button2.Parent = menuFrame

local button3 = Instance.new("TextButton")

button3.Text = "Scrolls"

button3.Parent = menuFrame
©2026 Roblox Corporation。Roblox（ロブロックス）、RobloxロゴおよびPowering Imaginationは、米国並びにその他の国における登録商標および非登録商標です。
規約·プライバシー·アクセシビリティ·サポート
日本語