Version: 2022.3
言語: 日本語
UI のスタイル設定
USS セレクター

USS とは

Unity スタイルシート (USS) は、アセットとして認識される、スタイル規則をサポートするテキストファイルです。USS テキストファイルには拡張子 .uss が必要です。

USS ファイルは、ゲームやアプリケーションの UI 要素の見た目とスタイルの定義に使用できます。USS は、UI 要素の見た目とスタイルを他のコードから分離する方法を提供し、アプリケーションの見た目や印象の管理をより簡単にします。

USS を使用すると、ボタンやラベル、画像などの UI 要素のスタイルを別の USS ファイルで定義し、それをゲームやアプリケーションのコードに適用することができます。このため、コードに変更を加えずに、USS ファイルを変更してアプリケーションの見た目を変更することが可能です。

USS は以下によって構成されます。

  • スタイル規則。これはセレクターと宣言ブロックから構成されます。
  • セレクター。これはスタイル規則がどの要素に影響するかを指定します。
  • 中括弧 {} で囲まれた宣言ブロック。これには 1 つ以上のスタイル宣言が含まれます。それぞれのスタイル宣言は、プロパティと値で構成され、セミコロンで終わります。

構文

以下は、スタイル規則の基本的な構文です。

selector {
  property1: value;
  property2: value;
}

規則によるスタイルの照合

スタイルシートを定義したら、それを ビジュアルツリー に適用することができます。セレクターは、要素を照合し、USS ファイルからどのプロパティが当てはまるかを解決します。セレクターが一致する要素を見つけると、その要素にスタイル宣言が適用されます。

例えば、以下のルールは全ての Button オブジェクトに適合します。

Button {
  width: 200px;
}

対応するセレクターのタイプ

USS は、以下のような各種の基準に基づいて要素を照合する、いくつかのタイプのシンプルセレクターおよび複合セレクターをサポートしています。

  • 要素の C# タイプ名
  • 割り当てられた name プロパティ
  • USS クラスのリスト
  • ビジュアルツリー における要素の位置と、他の要素との関係

また USS は、疑似クラス もサポートしています。これをセレクターに使用することで、特定の状態にある要素をターゲットにしたり、:root 要素を選択することができます。

要素が複数のセレクターに一致する場合、USS は 優先される 方のセレクターのスタイルを適用します。

ノート: セレクターは全て大文字と小文字を区別します。

単純セレクター

USS は一式のシンプルセレクターをサポートしています。これは CSS のsh人プルセレクターと類似していますが全く同じではありません。以下の表は、USS のシンプルセレクターの簡単なリファレンスです。

セレクタータイプ 構文 マッチ
タイプセレクター Type {...} 特定の C# タイプあるいはビジュアル要素タイプを持つ要素
クラスセレクター .class {...} 特定の USS クラスが割り当てられた要素
名前セレクター #name {..} 特定の name 属性が割り当てられた要素
ユニバーサルセレクター * {...} 任意の要素

複合セレクター

USS は、CSS の複合セレクターのサブセットをサポートしています。以下の表は、USS の複合セレクターの簡単なリファレンスです。

セレクタータイプ 構文 マッチ
子孫セレクター selector1 selector2 {...} ビジュアルツリー内の別の要素の子孫である要素
子セレクター selector1 > selector2 {...} ビジュアルツリー内の別の要素の子要素
複数セレクター selector1selector2 {...} 全てのシンプルセレクターに一致する要素

スタイルを要素に結び付ける

スタイルと要素は、以下の方法で結びつけることができます。

  • UI Builderでは、インラインスタイルまたは USS セレクターを使って要素のスタイル設定を行います。詳細は UI Builder による UI のスタイル設定 を参照してください。
  • UXML では、インラインスタイルで要素のスタイル設定を行うか、要素に一致するセレクターを持つスタイルシートをアタッチします。詳細は UXML へのスタイルの追加 を参照してください。
  • C# スクリプトでは、スタイルを直接 style プロパティに設定するか、要素に一致するセレクターを持つ USS スタイルシートを styleSheet プロパティに追加します。詳細は、C# スクリプトでスタイルを適用する を参照してください。

その他の参考資料

UI のスタイル設定
USS セレクター