このページでは、共通の USS プロパティ、その構文と受け入れ可能な値、そして CSS との違いを紹介します。USS プロパティの全リストは、USS プロパティリファレンス を参照してください。
width: <length> | auto
height: <length> | auto
min-width: <length> | auto
min-height: <length> | auto
max-width: <length> | none
max-height: <length> | none
width
と height
は要素のサイズを指定します。width
が指定されない場合、幅は要素の内容の幅にもとづいて決定されます。height
が指定されない場合、高さは要素のコンテンツの高さに基づきます。
margin-left: <length> | auto;
margin-top: <length> | auto
margin-right: <length> | auto
margin-bottom: <length> | auto
/* Shorthand */
margin: [<length> | auto]{1,4}
border-left-width: <length>
border-top-width: <length>
border-right-width: <length>
border-bottom-width: <length>
/* Shorthand */
border-width: <length>{1,4}
padding-left: <length>
padding-top: <length>
padding-right: <length>
padding-bottom: <length>
/* Shorthand */
padding: <length>{1,4}
USS が使用する代替ボックスモデルは、標準の CSS ボックスモデル とは異なります。標準的な CSS のボックスモデルでは、 width
と height
がコンテンツボックスのサイズを定義します。要素のレンダリングサイズは、padding
、border-width
、width
/ height
の値の合計です。
Unityのモデルは、CSSの box-sizing
プロパティを border-box
に設定することと同じです。詳細は、MDNドキュメント を参照してください。
UI Toolkit には レイアウトエンジン が含まれ、レイアウトやスタイリングのプロパティに基づいてビジュアル要素を配置します。レイアウトエンジンは、HTML/CSS レイアウトシステムの 1 つである Flexbox のサブセットを実装しています。
デフォルトでは、すべてのアイテムは垂直にコンテナに配置されます。
/* Items */
flex-grow: <number>
flex-shrink: <number>
flex-basis: <length> | auto
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
align-self: auto | flex-start | flex-end | center | stretch
/* Containers */
flex-direction: row | row-reverse | column | column-reverse
flex-wrap: nowrap | wrap | wrap-reverse
align-content: flex-start | flex-end | center | stretch
/* The default value is `stretch`.
`auto` sets `align-items` to `flex-end`. */
align-items: auto | flex-start | flex-end | center | stretch
justify-content: flex-start | flex-end | center | space-between | space-around
/* The default value is `relative` which positions the element based on its parent.
If sets to `absolute`, the element leaves its parent layout and values are specified based on the parent bounds.*/
position: absolute | relative
/* The distance from the parent edge or the original position of the element. */
left: <length> | auto
top: <length> | auto
right: <length> | auto
bottom: <length> | auto
background-color: <color>
background-image: <resource> | <url> | none
-unity-background-scale-mode: stretch-to-fill | scale-and-crop | scale-to-fit
-unity-background-image-tint-color: <color>
背景画像を割り当てるとき、簡略化された 9 スライス仕様に基づいて描画されます。
-unity-slice-left: <integer>
-unity-slice-top: <integer>
-unity-slice-right: <integer>
-unity-slice-bottom: <integer>
-unity-slice-scale: <length>
border-color: <color>
border-top-left-radius: <length>
border-top-right-radius: <length>
border-bottom-left-radius: <length>
border-bottom-right-radius: <length>
/* Shorthand */
border-radius: <length>{1,4}
ボーダー半径プロパティは、USS と CSS でほとんど同じ働きをします。border-radius
の詳細については、MDN ドキュメント を参照してください。
ただし、2 つの大きな違いがあります。
Unity では、楕円形の角を作るのに使われる第 2 半径の略記法 (border-radius: (第1の半径の値) / (第2の半径の値);
) をサポートしません。
* Unity は、ボーダー半径の値を要素のサイズ (ピクセル) の半分に縮小します。例えば、100px x 100px の要素では、border-radius
の値が 50px より大きい場合、50px に縮小されます。ボーダー半径のプロパティにパーセント値 (%
) を使用する場合、Unity はまずパーセントをピクセルに解決し、次に border-radius
の値を解決されたピクセル値の半分に縮小します。2 つ以上の角で異なる半径の値を指定する場合、Unity は要素のサイズの半分より大きい値を要素のサイズの半分に縮小します。
overflow: hidden | visible
-unity-overflow-clip-box: padding-box | content-box
-unity-paragraph-spacing: <length>
opacity: <number>
visibility: visible | hidden
display: flex | none
-unity-overflow-clip-box
は要素 コンテンツのクリップ面の矩形を定義します。デフォルトは padding-box
で、 パディングエリアの外側の矩形 (上のボックスモデルの画像の緑の矩形) です。content-box
はパディングエリア (上のボックスモデルの画像の青い矩形) 内の値を表します。
display
のデフォルト値は flex
です。display
を none
に設定すると、 要素が UI から削除されます。visibility
を hidden
に設定すると要素は非表示になりますが、要素はレイアウトのスペースを占めます。
USS display
プロパティは、CSS display
プロパティの利用可能なキーワード値のごく一部にしか対応していません。USSバージョンでは、Yogaレイアウトエンジンで動作するキーワードをサポートしています。
display
プロパティの詳細については、MDN documentation を参照してください。テキストプロパティは、フォント、フォントサイズ、フォントリソースの Unity 特有のプロパティ、フォントスタイル、整列、ワードラップ、クリッピングを設定します。
color: <color>
-unity-font: <resource> | <url>
-unity-font-definition: <resource> | <url>
font-size: <number>
-unity-font-style: normal | italic | bold | bold-and-italic
-unity-text-align: upper-left | middle-left | lower-left | upper-center | middle-center | lower-center | upper-right | middle-right | lower-right
-unity-text-overflow-position: start | middle | end
white-space: normal | nowrap
-unity-text-outline-width: <length>
-unity-text-outline-color: <color>
/* Shorthand */
-unity-text-outline: <length> | <color>
ノート: UI Builder でフォントを設定する場合、Inspector の Font コントロールは -unity-font
を設定し、Font Asset コントロールは -unity-font-definition
を設定します。-unity-font-definition
は -unity-font
よりも優先されるため、Font リストのフォントを使用したい場合は、Font Asset から None を選択する必要があります。そうしないと、選択したフォントが有効になりません。
cursor
プロパティは、マウスポインターが要素上にあるときに表示されるマウスカーソルを指定します。
cursor: [ [ <resource> | <url> ] [ <integer> <integer>]? , ] [ arrow | text | resize-vertical | resize-horizontal | link | slide-arrow | resize-up-right | resize-up-left | move-arrow | rotate-arrow | scale-arrow | arrow-plus | arrow-minus | pan | orbit | zoom | fps | split-resize-up-down | split-resize-left-right ]
ノート: cursor キーワードはエディター UI でのみ使用可能です。cursor キーワードはランタイム UI では機能しません。ランタイム UI では、カスタムカーソル用のテクスチャを使用する必要があります。
CSSでは、1つの cursor
スタイル宣言で、複数のオプションのカスタムカーソルと必須キーワードを指定することができます。複数のカーソルを指定するとこれらはフォールバックの連鎖を形成します。ブラウザが最初のカスタムカーソルを読み込めない場合、他のカスタムカーソルを順に試します。ブラウザは最初のカスタムカーソルを読み込めない場合、他のカスタムカーソルを順番に試し、いずれかが読み込まれるか、試すカスタムカーソルがなくなるまで試します。ブラウザがどのカスタムカーソルも読み込めない場合。キーワードを使用します。
USSでは、カスタムカーソルとキーワードは相互に排他的です。 カーソル
スタイル宣言は、1つのカスタムカーソルまたは1つのキーワードしか持つことができません。
CSS cursor
プロパティの詳細については、MDN documentation を参照してください。
opacity: <number>
USS の opacity (不透明度) は、CSS opacity に似ています。親要素の opacity は、子要素の 不透明感の知覚 に影響します。USS の不透明度と CSS の不透明度では、知覚度が異なります。
以下の USS の例では、青い正方形は赤い正方形の子です。赤い正方形は opacity
の値は 0.5
です。
.red {
background-color: red;
opacity: 0.5;
}
.blue {
background-color: blue;
left: 20px;
top: 20px;
}
青い正方形は不透明度の値を持っていませんが、赤い正方形からは 0.5
の不透明感を知覚します。青い正方形を通して赤い正方形を見ることができます。
CSS では、同じスタイルを適用すると、赤と青の正方形は両方とも 50% 透過になります。ただし、青の opacity
も 1
より小さくしないと、青の正方形を通して赤の正方形を見ることができません。
Did you find this page useful? Please give it a rating:
Thanks for rating this page!
What kind of problem would you like to report?
Thanks for letting us know! This page has been marked for review based on your feedback.
If you have time, you can provide more information to help us fix the problem faster.
Provide more information
You've told us this page needs code samples. If you'd like to help us further, you could provide a code sample, or tell us about what kind of code sample you'd like to see:
You've told us there are code samples on this page which don't work. If you know how to fix it, or have something better we could use instead, please let us know:
You've told us there is information missing from this page. Please tell us more about what's missing:
You've told us there is incorrect information on this page. If you know what we should change to make it correct, please tell us:
You've told us this page has unclear or confusing information. Please tell us more about what you found unclear or confusing, or let us know how we could make it clearer:
You've told us there is a spelling or grammar error on this page. Please tell us what's wrong:
You've told us this page has a problem. Please tell us more about what's wrong:
Thank you for helping to make the Unity documentation better!
Your feedback has been submitted as a ticket for our documentation team to review.
We are not able to reply to every ticket submitted.