USS 共通プロパティ
このページでは、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}
CSS との相違点
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
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>
ノート: スプライトの場合、Unity はパネルの reference sprite pixels per unit value に対するスプライトの pixels-per-unit 値 (デフォルトでは 100) によって -unity-slice-scale を調整します。例えば、スプライトの pixels-per-unit が 16 の場合、スケールは 16/100 = 0.16 で調整されます。したがって、スケールを 2px に設定すると、最終スケールは 2px * 0.16px = 0.32px になります。テクスチャとベクトル画像の場合、Unity は設定したスライススケール値に追加の調整を行いません。
9 スライスの詳細については、UI Toolkit による 9 スライス画像 を参照してください。
ボーダーカラー
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}
CSS との相違点
ボーダー半径プロパティは、USS と CSS でほとんど同じ働きをします。border-radius の詳細は、MDN ドキュメント を参照してください。
ただし、2 つの主な違いがあります。
- Unity は、楕円形の角を作るのに使われる第 2 半径の略記法 (
border-radius: (first radius values) / (second radius values);) をサポートしません。 - Unity は、ボーダー半径の値を要素のサイズ (ピクセル) の半分に縮小します。例えば、100px × 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>
visibility: visible | hidden
display: flex | none
-unity-overflow-clip-box は、要素のコンテンツのクリッピング矩形を定義します。デフォルトは padding-box で、 パディングエリアの外側の矩形 (上のボックスモデルの画像の緑の矩形) です。content-box はパディングエリア (上のボックスモデルの画像の青い矩形) 内の値を表します。
display のデフォルト値は flex です。display を none に設定すると、UI から要素を削除します。visibility を hidden に設定すると要素は非表示になりますが、要素はレイアウトのスペースを占有します。
overflow プロパティは、要素のコンテンツのクリッピングを制御します。デフォルト値は visible で、要素のコンテンツは要素の境界にクリッピングされません。overflow を hidden に設定すると、要素のコンテンツは要素の境界にクリッピングされます。overflow は マスキング効果の作成 に使用できます。
CSS との相違点
USSの display プロパティは、CSS の display プロパティの利用可能なキーワード値のごく一部にしか対応していません。USS バージョンでは、Yoga レイアウトエンジンで動作するキーワードをサポートしています。
- Yoga については、Yoga を使ったフレキシブルなレイアウト を参照してください。
- CSS の
displayプロパティの詳細は MDN ドキュメント を参照してください。
テキストプロパティ
テキストプロパティは、色、フォント、フォントサイズ、フォントリソースの 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>
-unity-text-generator: standard | advanced
/* The text overflow mode. */
/* clip: Trims any text that extends beyond the boudaries of its container. */
/* ellipsis: Truncates any text that extends beyong the boudaries of its container with an ellipsis. */
text-overflow: clip | ellipsis
text-shadow-offset-x: <length>
text-shadow-offset-y: <length>
text-shadow-color: <color>
text-shadow-blur-radius: <length>
/* Shorthand */
text-shadow: <x-offset> <y-offset> <blur-radius> <color>;
letter-spacing: <length>
word-spacing: <length>
-unity-paragraph-spacing: <length>
ノート: 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 ]
ノート: カーソルキーワードは、Editor UI でのみ使用できます。カーソルキーワードはランタイム UI では機能しません。ランタイム UI では、カスタムカーソルにテクスチャを使用する必要があります。
CSS との相違点
CSS では、1 つの cursor スタイル宣言に複数の任意のカスタムカーソルと必須キーワードを指定できます。複数のカーソルを指定すると、フォールバックチェーンを形成します。ブラウザーが最初のカスタムカーソルをロードできない場合、他のカスタムカーソルのいずれかがロードされるか、試すカスタムカーソルがなくなるまで順番に試します。カスタムカーソルをロードできない場合、 ブラウザーはキーワードを使用します。
USS では、カスタムカーソルとキーワードは相互に排他的です。cursor スタイル宣言は、1 つのカスタムカーソルまたは 1 つのキーワードしか持つことができません。
CSS の cursor プロパティの詳細は、MDN ドキュメント を参照してください。
不透明度
opacity: <number>
CSS との相違点
USS の不透明度は CSS の不透明度 に似ています。親要素の不透明度は、子要素の 不透明度 に影響します。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 未満に設定しない限り、青い正方形を通して赤い正方形を見ることはできません。
