Version: 2022.1
言語: 日本語
Create USS variables
USS built-in variable references

Introduction to USS built-in variables

USS built-in variables specify default values for Editor and runtime UI. You can use these variables in your own USS to match your custom interfaces with Unity style.

The name of each built-in variable indicates how and where the variable is used. A variable name consists of one or more parts, separated by hyphens. Each part consists of one or more words separated by underscores.

--unity-{group}-{role_and_control}-{sub_element}-{pseudo_state_sequence}

Each part of the name shows the types of USS rules that use the variable.

  • Group: The kind of data the variable represents.
  • Role/Control: A conceptual grouping for the elements the variable affects.
  • Sub-Element: An element or control the variable affects.
  • Pseudo States: Lists the states Unity uses the variable for.

例えば、変数名は以下のようになります。

--unity-colors-button-text-hover

Unity が変数をどのように使用するかについては、以下の通りです。

Value 意味
Group colors Represents color data.
Role/Control button Affects buttons.
Sub-Element text Affects text. Its group is colors, so it affects text color.
Pseudo-States hover Applies to elements when the mouse pointer hovers over them.

This USS built-in variable changes the color of button text when a user hovers over the button.

Group

The group specifies what kind of data the variable represents. Each group has several possible sub-elements.

The variable names have the following groups:

Group 用途
colors background-colorborder-color などの色のプロパティ。
metrics 寸法や形状を制御するプロパティ。例えば、 border-radiusborder-widthmarginpadding
icons 標準的な Unity のアイコン画像。

Role and Control

Role and Control (ロールとコントロール) は、概念的に要素をグループ化する 2 つの方法です。

  • Role refers to a group of elements that have the same purpose, regardless of what type each element is. For example, the error role includes all elements that display error messages to users.
  • Control refers to a group of elements of the same type, regardless of what they do. For example, buttons includes all buttons in the Editor.

Each variable has either a role or a control.

The variable names have the following roles and controls:

役割

Role 説明 
default 文字色、背景、余白などのデフォルトのスタイル設定。
alternated_rows 表形式のデータを交互に行の色を変えて表示する要素。例えば、リストビューのリストアイテムなど。
error エラーの状態をユーザーに伝えるための要素。
highlight UI のハイライト部分。例えば、テキストの選択部分や、ツリービューでの選択項目など。
link UI のパーツ (通常はテキスト) でクリックできるリンク。これは、クリックされていない状態です。
play_mode エディターが再生モードのときに表示される要素。
visited_link UI のパーツ (通常はテキスト) でクリックできるリンク。これは、クリックされていない状態です。
warning ユーザーに警告メッセージを伝えるための要素。

Controls

制御 説明 
app_toolbar Unity のメインツールバー
app_toolbar_button Unity のメインツールバーのボタン
box Editor UI で要素をグループ化するためのボックス
button ツールバーを除く UI のボタン
dropdown ドロップダウンリストやメニュー
helpbox ヘルプ情報を表示するボックス
input_field テキストや数値を入力するフィールド
label エディター UI のテキストラベル
object_field オブジェクトの値に使用されるフィールド。例えば、ゲームオブジェクトやアセットのプロパティ値など。
popup ポップアップメニューなどのポップアップコントロール
preview プレビューを表示するためのビュー。例えば、メッシュやテクスチャなどのアセットのプレビューを表示します。
scrollbar_groove ユーザーがスクロールバーのつまみをドラッグするスクロールバーの背景要素
scrollbar_thumb スクロールバーのドラッグ可能なハンドル要素
slider_groove ユーザーがスライダーのつまみをドラッグする際のスライダーの背景要素
slider_thumb スライダーのドラッグ可能なハンドル要素
slider_thumb_halo ユーザーがスライダーのサムをドラッグしたときに、サムの周囲に表示されるオーバーレイ
tab タブコントロールのタブアイテム
toolbar Unity のメインツールバー (app_toolbar) 以外のエディターツールバー
toolbar_button エディターツールバーのボタン
window エディターウィンドウ

Sub-Element

The sub-element is the part of an element that the variable affects. Together with a variable’s group, the sub-element shows what kind of data the variable represents.

例えば、変数名に colors グループと text サブ要素が付いている場合です。これは、Unity がテキストの色に影響を与えるスタイルでその変数を使用することを意味します。

The variable names have the following sub-elements:

Group Sub-element 説明 
colors
background 要素の背景色
border 要素の境界色
border_accent 要素の内側の境界線の色を表します。たとえば、Inspector ウィンドウには、ツートンカラーの境界線があります。
text テキストを表示する要素の文字色
metrics
margin_{left, top, right, bottom} 要素のマージン値
padding_{left, top, right, bottom} 要素のパディング値
border_{left, top, right, bottom}_width 要素のボーダー幅の値
border_{left_top, left_bottom, right_top, right_bottom}_radius 要素の境界線の半径値
width, height 要素の幅と高さの値

Pseudo-States

Pseudo-State (疑似状態) シーケンスは、Unity が変数を使用する UI 状態のリストです。

例えば、変数名に hover という疑似状態が付いている場合です。これは、ユーザーが要素にポインターを重ねるときに要素に影響を与えるスタイルの変数を Unity が使用するという意味です。

例えば、--unity-colors-toolbar_button-text-hover

一つの変数名に複数の疑似状態を持たせることができます。複数の疑似状態は、アンダースコア _ で区切られたアルファベット順に表示されます。

例えば、 --unity-colors-toolbar_button-text-focus_selected

Unity の変数名には、以下の疑似状態のすべての組み合わせが可能です。

Pseudo-state 説明 
(なし) 通常の状態
checked チェックボックスタイプのコントロールがオンです。
disabled コントロールがオフです。
focus コントロールにフォーカスがあります。
hover ユーザーがコントロールにカーソルを重ねています。
inactive A control doesn’t have focus
pressed コントロールが押されました。
selected コントロールが選択されました。

その他の参考資料

Create USS variables
USS built-in variable references