Version: 2023.1
言語: 日本語
USS 遷移
USS カラーキーワード

USS プロパティリファレンス

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 (一気に変化) 要素のボックス内に描く背景画像。
background-position なし 完全なアニメーション化可能 背景画像の位置の値。
background-position-x なし Discrete (一気に変化) 背景画像の X 位置の値。
background-position-y なし Discrete (一気に変化) 背景画像の Y 位置の値。
background-repeat なし Discrete (一気に変化) 背景画像の繰り返し値。
background-size なし 完全なアニメーション化可能 背景画像のサイズ値。
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 (一気に変化) 要素のテキストを描画するのに十分なスペースがない場合は、複数行にわたってワードラップを行います。
width なし 完全なアニメーション化可能 レイアウトに使用する要素の固定幅。
word-spacing はい 完全なアニメーション化可能 単語間のスペースを増減します。
USS 遷移
USS カラーキーワード