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>メインメニュー</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 = "メインメニュー"

button.Parent = screenGui

クラス

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

CSS
.button-primary {

	background-color: #335FFF;

	color: #E1E1E1;

}
HTML
<button class="button-primary">メインメニュー</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 = "メインメニュー"

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>オプション</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 = "オプション"

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

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>オプション</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 = "オプション"

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

button.Parent = subContainer

セレクタリスト

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

CSS
img, p {

	background-color: #FF0033;

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



<p>メインメニュー</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 = "メインメニュー"

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を作成できます。例えば、以下のルールは、RoundedCorner20でタグ付けされたすべてのFrameの下にUICorner修飾子を効果的に作成し、各修飾子の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では、::StyleQueryを使用して擬似インスタンスクエリを定義し、条件のSelectorプロパティの識別子を続けて、例えば"::StyleQuery #WideContainer"のようにし、親のGuiObject.AbsoluteSizeを評価するためのStyleQuery条件名のように"MinSize"を指定します。次に、クエリがアクティブなときにインスタンスまたはその子にスタイルを適用するには、@[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>メインメニュー</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 = "メインメニュー"

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>メインメニュー</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 = "メインメニュー"

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>メインメニュー</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 = "メインメニュー"

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>チャーム</button>

	<button>マナ</button>

	<button>スクロール</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 = "チャーム"

button1.Parent = menuFrame

local button2 = Instance.new("TextButton")

button2.Text = "マナ"

button2.Parent = menuFrame

local button3 = Instance.new("TextButton")

button3.Text = "スクロール"

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