UI Toolkit の USS プロパティの一覧は以下の通りです。
この表は、どのプロパティが継承されるかと、そのアニメーション化可能度を示しています。継承されたプロパティでは、値を指定しない場合、要素はその親要素から値を取得します。以下の例では、継承されたプロパティを使用して、すべての要素のフォントを設定します。
:root {
-unity-font: resource("Font/consola.ttf");
}
プロパティ名をクリックすると、そのプロパティの詳細情報が表示されます。
ノート: CSS プロパティと同様の USS プロパティの使い方は、Mozillaの開発者向けドキュメントにリンクしています。
| プロパティ | 継承か | アニメーション化可能度 | 説明 |
|---|---|---|---|
align-content |
なし | Discrete (一気に変化) | 子がこのコンテナ内の複数の行にまたがる場合、子の領域全体を交差軸上に配置します。 |
align-items |
なし | Discrete (一気に変化) | このコンテナの交差軸上の子の配置。 |
align-self |
なし | Discrete (一気に変化) | align-items と似ていますが、この特定の要素に対してのみ適用されます。 |
all |
なし | 完全なアニメーション化可能 | initial キーワードを持つすべてのプロパティをリセットできます。USS のカスタムプロパティには適用されません。 |
background-color |
なし | 完全なアニメーション化可能 | 要素のボックスに塗る背景色。 |
background-image |
なし | Discrete (一気に変化) | 要素のボックス内に描く背景画像。 |
border-bottom-color |
なし | 完全なアニメーション化可能 | 要素の下の境界線の色。 |
border-bottom-left-radius |
なし | 完全なアニメーション化可能 | 要素のボックスに角が丸みを帯びた矩形を描く場合の左下の角の半径を指定します。 |
border-bottom-right-radius |
なし | 完全なアニメーション化可能 | 要素のボックス内に角が丸みを帯びた矩形を描く場合の右下の角の半径を指定します。 |
border-bottom-width |
なし | 完全なアニメーション化可能 | レイアウト時に境界の下辺に確保されるスペース。 |
border-color |
なし | 完全なアニメーション化可能 | border-top-color、border-right-color、border-bottom-color、border-left-color の略記。 |
border-left-color |
なし | 完全なアニメーション化可能 | 要素の左境界線の色。 |
border-left-width |
なし | 完全なアニメーション化可能 | レイアウト時に境界の左辺に確保されるスペース。 |
border-radius |
なし | 完全なアニメーション化可能 | border-top-left-radius、 border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius の略記。 |
border-right-color |
なし | 完全なアニメーション化可能 | 要素の右境界線の色。 |
border-right-width |
なし | 完全なアニメーション化可能 | レイアウト時に境界の右辺に確保されるスペース。 |
border-top-color |
なし | 完全なアニメーション化可能 | 要素の上境界線の色。 |
border-top-left-radius |
なし | 完全なアニメーション化可能 | 要素のボックスに角が丸みを帯びた矩形を描く場合の左上の角の半径を指定します。 |
border-top-right-radius |
なし | 完全なアニメーション化可能 | 要素のボックスに角が丸みを帯びた矩形を描く場合の右上の角の半径を指定します。 |
border-top-width |
なし | 完全なアニメーション化可能 | レイアウト時に境界の上辺に確保されるスペース。 |
border-width |
なし | 完全なアニメーション化可能 | border-top-width、border-right-width、border-bottom-width、border-left-width の略記。 |
bottom |
なし | 完全なアニメーション化可能 | レイアウト時の要素のボックスからの下方距離。 |
color |
はい | 完全なアニメーション化可能 | 要素のテキストを描画する際に使用する色。 |
cursor |
なし | アニメーション化不可 | マウスポインターが要素上にあるときに表示するマウスカーソル。 |
display |
なし | Discrete (一気に変化) | レイアウト上での要素の表示方法を定義します。 |
flex |
なし | 完全なアニメーション化可能 | flex-grow、flex-shrink、flex-basis の略記。 |
flex-basis |
なし | 完全なアニメーション化可能 | メイン可変軸上の可変アイテムの初期メインサイズ。 最終的なレイアウトは、他の可変プロパティによって決定される可変の縮小と拡大に応じて、小さくなったり大きくなったりする可能性があります。 |
flex-direction |
なし | Discrete (一気に変化) | コンテナ内の子を配置するための主軸の方向。 |
flex-grow |
なし | 完全なアニメーション化可能 | 同じコンテナ内の残りの可変アイテムに対してアイテムがどのように縮小するかを指定します。 |
flex-shrink |
なし | 完全なアニメーション化可能 | 同じコンテナ内の残りの可変アイテムに対してアイテムがどのように縮小するかを指定します。 |
flex-wrap |
なし | Discrete (一気に変化) | このコンテナに十分なスペースがない場合、複数の行に渡って子を配置します。 |
font-size |
はい | 完全なアニメーション化可能 | 要素のテキストを描画するためのフォントサイズ。 |
height |
なし | 完全なアニメーション化可能 | レイアウトに使用する要素の高さを固定します。 |
justify-content |
なし | Discrete (一気に変化) | このコンテナの主軸にある子の位置揃え。 |
left |
なし | 完全なアニメーション化可能 | レイアウト時の要素のボックスからの左側の距離。 |
letter-spacing |
はい | 完全なアニメーション化可能 | 文字間のスペースを増減します。 |
margin |
なし | 完全なアニメーション化可能 | margin-top、margin-right、margin-bottom、margin-left の略記。 |
margin-bottom |
なし | 完全なアニメーション化可能 | レイアウト時にマージンの下辺に確保されるスペース。 |
margin-left |
なし | 完全なアニメーション化可能 | レイアウト時にマージンの左辺に確保されるスペース。 |
margin-right |
なし | 完全なアニメーション化可能 | レイアウト時にマージンの右辺に確保されるスペース。 |
margin-top |
なし | 完全なアニメーション化可能 | レイアウト時にマージンの上辺に確保されるスペース。 |
max-height |
なし | 完全なアニメーション化可能 | 要素が可変である場合、またはそれ自体のサイズを測定する場合の最大の高さ。 |
max-width |
なし | 完全なアニメーション化可能 | 要素が可変である場合、またはそれ自体のサイズを測定する場合の最大の幅。 |
min-height |
なし | 完全なアニメーション化可能 | 要素が可変である場合、またはそれ自体のサイズを測定する場合の最小の高さ。 |
min-width |
なし | 完全なアニメーション化可能 | 要素が可変である場合、またはそれ自体のサイズを測定する場合の最小の幅。 |
opacity |
なし | 完全なアニメーション化可能 | 要素およびその子の透明度を指定します。 |
overflow |
なし | Discrete (一気に変化) | コンテナのコンテンツがそれ自体のボックスからあふれる (オーバーフロー) 場合のコンテナの動作。 |
padding |
なし | 完全なアニメーション化可能 | padding-top、padding-right、padding-bottom、padding-left の略記。 |
padding-bottom |
なし | 完全なアニメーション化可能 | レイアウト時にパディングの下辺に確保されるスペース。 |
padding-left |
なし | 完全なアニメーション化可能 | レイアウト時にパディングの左辺に確保されるスペース。 |
padding-right |
なし | 完全なアニメーション化可能 | レイアウト時にパディングの右端として確保されるスペース。 |
padding-top |
なし | 完全なアニメーション化可能 | レイアウト時にパディングの上辺に確保されるスペース。 |
position |
なし | Discrete (一気に変化) | 親コンテナ内の要素の位置。 |
right |
なし | 完全なアニメーション化可能 | レイアウト時の要素のボックスからの右側の距離。 |
rotate |
なし | 完全なアニメーション化可能 | 回転変換。 |
scale |
なし | 完全なアニメーション化可能 | スケール変換。 |
text-overflow |
なし | Discrete (一気に変化) | 要素のテキストオーバーフローモード。 |
text-shadow |
はい | 完全なアニメーション化可能 | テキストのドロップシャドウ。 |
top |
なし | 完全なアニメーション化可能 | レイアウト時の要素のボックスから上の距離。 |
transform-origin |
なし | 完全なアニメーション化可能 | 変換の原点は、変換を適用する中心となる点です。 |
transition |
なし | アニメーション化不可 | transition-delay、transition-duration、transition-property、transition-timing-function の略記。 |
transition-delay |
なし | アニメーション化不可 | 値が変化したときに、プロパティの遷移効果を開始する前に待機する時間。 |
transition-duration |
なし | アニメーション化不可 | 遷移アニメーションが完了するまでの時間。 |
transition-property |
なし | アニメーション化不可 | 遷移効果を適用するプロパティ。 |
transition-timing-function |
なし | アニメーション化不可 | 遷移効果によって変更されたプロパティに対する中間値の計算方法を決定します。 |
translate |
なし | 完全なアニメーション化可能 | 移動変換。 |
-unity-background-image-tint-color |
なし | 完全なアニメーション化可能 | 要素の backgroundImage の色合い。 |
-unity-background-scale-mode |
なし | Discrete (一気に変化) | 要素のボックス内の背景画像のスケーリング。 |
-unity-font |
はい | Discrete (一気に変化) | 要素のテキストを描画するためのフォントで、Font オブジェクトとして定義されます。 |
-unity-font-definition |
はい | Discrete (一気に変化) | FontDefinition 構造体として定義される、要素のテキストを描画するためのフォント。-unity-font よりも優先されます。 |
-unity-font-style |
はい | Discrete (一気に変化) | 要素のテキストを描画するフォントのスタイルとウェイト (通常、太字、斜体)。 |
-unity-overflow-clip-box |
なし | Discrete (一気に変化) | 要素のコンテンツに関し、どのボックスに対してクリップ面の定義をするかを指定します。 |
-unity-paragraph-spacing |
はい | 完全なアニメーション化可能 | 段落間のスペースを増減します。 |
-unity-slice-bottom |
なし | 完全なアニメーション化可能 | 要素の背景画像を描画する場合の 9 スライスの下辺のサイズ。 |
-unity-slice-left |
なし | 完全なアニメーション化可能 | 要素の背景画像を描画する場合の 9 スライスの左辺のサイズ。 |
-unity-slice-right |
なし | 完全なアニメーション化可能 | 要素の背景画像を描画する場合の 9 スライスの右辺のサイズ。 |
-unity-slice-scale |
なし | 完全なアニメーション化可能 | 要素のスライスに適用されるスケール。 |
-unity-slice-top |
なし | 完全なアニメーション化可能 | 要素の背景画像を描画する場合の 9 スライスの上辺のサイズ。 |
-unity-text-align |
はい | Discrete (一気に変化) | 要素のボックス内のテキストの水平方向と垂直方向の配置。 |
-unity-text-outline |
なし | 完全なアニメーション化可能 | アウトラインの幅とテキストの色。 |
-unity-text-outline-color |
はい | 完全なアニメーション化可能 | テキストのアウトライン色。 |
-unity-text-outline-width |
はい | 完全なアニメーション化可能 | テキストのアウトライン幅。 |
-unity-text-overflow-position |
なし | Discrete (一気に変化) | 要素のテキストオーバーフロー位置。 |
visibility |
はい | Discrete (一気に変化) | 要素の表示非表示を指定します。 |
white-space |
はい | Discrete (一気に変化) | Word wrapping over multiple lines if not enough space is available to draw the text of an element. |
width |
なし | 完全なアニメーション化可能 | レイアウトに使用する要素の固定幅。 |
word-spacing |
はい | 完全なアニメーション化可能 | 単語間のスペースを増減します。 |