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-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}

CSS との相違点

ボーダー半径プロパティは、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 に設定すると要素は非表示になりますが、要素はレイアウトのスペースを占めます。

CSS との相違点

USS display プロパティは、CSS display プロパティの利用可能なキーワード値のごく一部にしか対応していません。USSバージョンでは、Yogaレイアウトエンジンで動作するキーワードをサポートしています。

• Yoga についての詳細は、Flexible Layouts with Yoga を参照してください。
• CSS 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 との相違点

CSSでは、1つの cursor スタイル宣言で、複数のオプションのカスタムカーソルと必須キーワードを指定することができます。複数のカーソルを指定するとこれらはフォールバックの連鎖を形成します。ブラウザが最初のカスタムカーソルを読み込めない場合、他のカスタムカーソルを順に試します。ブラウザは最初のカスタムカーソルを読み込めない場合、他のカスタムカーソルを順番に試し、いずれかが読み込まれるか、試すカスタムカーソルがなくなるまで試します。ブラウザがどのカスタムカーソルも読み込めない場合。キーワードを使用します。

USSでは、カスタムカーソルとキーワードは相互に排他的です。 カーソル スタイル宣言は、1つのカスタムカーソルまたは1つのキーワードしか持つことができません。

CSS cursor プロパティの詳細については、MDN documentation を参照してください。

透明度

opacity: <number>

CSS との相違点

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 より小さくしないと、青の正方形を通して赤の正方形を見ることができません。

その他の参考資料

• USS トランスフォーム
• USS 遷移
• USS プロパティのリファレンス