UXML にスタイルを加える

In UI Toolkit, you use Unity Style Sheets (USS) to customize the appearance of visual elements. The suggested workflow for USS is that you visually style an element in UI Builder, extract the style to a USS file, and then reference it in UXML.

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

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

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

例えば、UXML ファイルと同じフォルダーに styles.uss という USS ファイルがあり、以下の内容になっているとします。

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

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

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

その他の参考資料

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