UXML にスタイルを加える

UI Toolkit では、USS を使用してビジュアル要素の見た目をカスタマイズできます。USS の推奨ワークフローは、UI Builder で視覚的に要素のスタイル設定を行い、そのスタイルを USS ファイルに抽出して UXML で参照することです。

UI Builder で要素にスタイルを設定すると、そのスタイルが UXML 要素の style 属性にインラインスタイルとして追加されます (以下参照)。

<ui:UXML ...>
    <ui:VisualElement style="width: 200px; height: 200px; background-color: red;" />
</ui:UXML>

スタイルシートファイルを参照するには、UXML ファイルのルート要素の下に <Style> 要素を追加します。

For example, if you have a USS file named styles.uss with the following content:

# root {
    width: 200px;
    height: 200px;
    background-color: red;
}

これは以下のように参照できます。

<ui:UXML ...>
    <Style src="<path-to-file>/styles.uss" />
    <ui:VisualElement name="root" />
</ui:UXML>

You can use a relative or an absolute path:

Absolute paths start from the project’s Assets folder and begin with a / or project://database/. For example, /Assets/myFolder/myFile.uss or project://database/Assets/myFolder/myFile.uss.
Relative paths start from the current file and exclude the /. For example, ../myFolder/myFile.uss.

Note: To reference a file from packages, use the absolute path of the package file that starts from the Packages folder. For example, /Packages/com.unity.package.name/file-name.uss or project://database/Packages/com.unity.package.name/file-name.uss. you must use the format of com.unity.package.name rather than package name for the package name.

その他の参考資料

UXML の概要

UXML ファイルの再利用

マニュアル

UXML にスタイルを加える

その他の参考資料