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> 要素を追加します

例えば、以下のようなコンテンツの styles.uss という名前の USS ファイルがあるとします。

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

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

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

相対パスまたは絶対パスを使用できます。

• 絶対パスは、プロジェクトの Assets フォルダーから開始し、先頭に / または project://database/ が付加されています。例えば /Assets/myFolder/myFile.uss または project://database/Assets/myFolder/myFile.uss です。
• 相対パスは現在のファイルから開始し、/ を除外します。例えば ../myFolder/myFile.uss です。

ノート: パッケージからファイルを参照するには、Packages フォルダーから始まるパッケージファイルの絶対パスを使用します。例えば、/Packages/com.unity.package.name/file-name.uss または project://database/Packages/com.unity.package.name/file-name.uss です。パッケージ名には package name 形式ではなく、com.unity.package.name 形式を使用する必要があります。

追加リソース

• UI のスタイル設定
• 要素管理のベストプラクティス