USS data types

USS data types define typical values, including keywords and units, that USS properties and functions accept.

構文

USS properties use the same syntax as W3C CSS documents:

• Keyword values appear as is. For example: auto, baseline.
• Basic data types appear between angle brackets ( < and >). For example: <length> and <color>.
• プロパティと同じ名前を持つ端末以外のものは山括弧 ( < と >) の間に表記します。例: <'width'>

If a property value has more than one option, the following applies:

• Side-by-side words mean that all options must occur in the given order.
• A bar (|) separates two or more options. One of them must occur.
• Double bars (||`) separate two or more options. One or more of them must occur in any order.
• Double ampersands (&&`) separate two or more options. All options must occur.
• 大括弧 ([ ]) はグループ化を意味します。

Every type, keyword, or angle-bracketed group might be followed by modifiers. The following table lists the possible modifiers:

Modifier	The preceding type, keyword, or group
An asterisk (*)	Occurs zero or more times
A plus sign (+)	Occurs one or more times
A question mark (?)	Is optional
A pair of numbers in curly braces ({A,B})	Occurs at least A and at most B times

Length

UI Toolkit supports pixels (px) and percentages (%) as units of measurement for length. Pixel values are absolute, while percentages are relative to the element’s parent.

例：

• width:200px; は、幅が 200 ピクセルであることを表します。
• width:50%; は、幅が親要素の半分であることを表しています。

It’s important to specify the unit of measurement. If you don’t specify a unit of measurement, UI Toolkit assumes that the property value is expressed in pixels.

注意： 0 は、測定単位を必要としない特別な値です。

Numeric

数値は、浮動小数点数または整数リテラルで表されます。例えば、flex:1.0 です。

キーワード

Specific keywords are supported for some built-in properties. Keywords give a descriptive name instead of a number. For example: position:absolute.

All properties support the initial global keyword which resets the default value of a property to an element.

In the following example, although you set the color of all the labels to red, the initial keyword of color restores the color of label1 to its default value:

/* Set the color of all the labels to red. */
Label {
    color: red;
}
/* label1 is the name of a specific label. */
#label1{
    color: initial;
}

Color

UI Toolkit は、以下のリテラルの色の値と関数をサポートします。

• A Hexadecimal value: #FFFF00 (RGBA one byte per channel), #0F0 (RGB)
• RGB 関数: rgb(255, 255, 0)
• RGBA 関数: rgba(255, 255, 0, 1.0)
• Color keywords

アセット

フォントやテクスチャなどのプロジェクトアセットを、USS ファイルから参照することができます。例えば、テクスチャを参照して、要素の背景画像として使用できます。

To reference an asset, you can use either the url() function or the resource() function:

• resource(): Represents an asset in a Resources folder.
• url(): Represents an asset specified by a path. You can express it as either a relative path or an absolute path.

Use the url() function in most cases. However, the resource() function supports automatically loading different versions of image assets for different screen densities.

Reference assets with the URL function

url() 関数でアセットを参照する際、指定するパスは相対パスでも絶対パスでも構いません。

• 相対パスは、アセットを参照する USS ファイルを含むフォルダーへの相対パスでなければなりません。
• 絶対パスは、プロジェクトに相対するパスです。

パスは、ファイルの拡張子を含む必要があります。

For example, if your project has a USS folder that contains all your style sheets, and a Resources folder that contains all your image assets.

Assets
  └─ Editor
      └─ Resources
      └─ USS

thumb.png という名前の画像を参照するには、以下のいずれかのパスを使用します。

相対パス	絶対パス
url("../Resources/thumb.png")	url("/Assets/Editor/Resources/thumb.png") url("project:/Assets/Editor/Resources/thumb.png") url("project:///Assets/Editor/Resources/thumb.png")

Reference assets with the resource function

resource() 関数は、Unity のリソースフォルダー (Resources と Editor Default Resources) にあるアセットを参照できます。アセットの参照は名前で行います。

• ファイルが Editor Default Resources Resources フォルダーにある場合は、ファイルの拡張子が必要です。
• ファイルが Resources フォルダーにある場合は、ファイルの拡張子は不要です。

例

ファイルへのパス	参照構文
Assets/Resources/Images/my-image.png	resource("Images/my-image")
Assets/Editor Default Resources/Images/my-image.png	resource("Images/default-image.png")

Reference image assets for High DPI/Retina screens

To support screens with different screen densities (DPI), do the following:

• テクスチャの高 DPI バージョンには、ファイル名に @2x というサフィックスが付いていることを確認してください。例えば、myimage.png の高 DPI バージョンは、myimage@2x.png としてください。
• テクスチャアセットの通常版と高 DPI バージョンを同じプロジェクトフォルダーに配置します。

Unity がアセットをロードするとき、現在のスクリーン DPI に合ったバージョンを自動的に選択します。

例えば、USS の resource("myimage") を使用すると、Unity は Resources/myimage.png または Resources/myimage@2x.png のいずれかをロードします。

Strings

引用符を使用して文字列の値を指定します。例えば --my-property: "foo"

その他の参考資料

• USS color keywords
• USS common properties
• USS properties reference
• USs custom properties.
• Style UI with UI Builder