Version: 2022.2
言語: 日本語
USS でテキストのスタイルを設定する
サポートされるリッチテキストタグ

リッチテキストタグでテキストをスタイル設定する

USS でテキストのスタイルを設定する ことができますが、テキスト文字列の 1 単語だけにスタイルを設定したい場合はどうすればいいでしょうか。これは、USS では難しいですが、リッチテキストタグを使えば簡単です。

リッチテキストタグとは、テキスト文字列の中に配置するタグのことで、タグの間に挟まったテキストのスタイル設定をすることができます。

サポートされているすべてのタグについては、サポートされているタグ を参照してください。

ノート: このリリースでは、リッチテキストタグは TextField ではサポートされていません。

リッチテキスト構文

リッチテキストタグは HTML や XML のタグに似ていますが、それほど厳密な構文ではありません。

単純なタグはその名前だけで、追加の値や属性を持ちません。例えば、<b> タグはテキストを太字にします。

タグの中には、以下のように追加の値や属性を持つものもあります。

  • <tag="value">
  • <tag attribute="value">

例:

  • <color="red">: テキストを赤くします
  • <sprite index=3>: デフォルトのスプライトアセットから 4 番目のスプライトを挿入します

ノート: UXML ファイルでは、以下の文字に HTML コードを使用する必要があります。

  • <: (&lt;)
  • >: (&gt;)
  • ": (&quot;)

以下の表に、可能な属性値のタイプと値の例を示します。

値のタイプ 値の例
小数 0.5
比率 25%
ピクセル値 21px
フォント単位 1.5em
Hex カラー値 #FFFFFF (RGB)
#FFFFFFFF (RGBA)
#FF (A)
名前 <link="ID"><link=ID> はどちらも有効です。

タグのスコープとネストされたタグ

タグにはスコープがあり、それがテキストのどの範囲に影響するかを定義します。たいていの場合、テキスト内の指定された位置に追加されたタグは、その位置から先のテキストすべてに影響します。

例えば、<color="red"> というタグをテキストの先頭に加えると、全体のテキストブロックに影響します。<color="red">このテキストは赤です

同じタグをテキストブロックの途中に加えると、タグとブロックの末尾の間のテキストにのみ影響します。このテキストは<color="red">赤くなります

テキストブロック内で同じタグを複数回使用すると、最後のタグがそれ以前の同じタイプのタグに優先します。<color="red">このテキストは赤から<color="green">緑になります

また、終了タグを使ってタグの範囲を限定したり、別のタグの中でネストにしたタグを使用することもできます。<color=red>このテキストは<color=green>ほとんど</color>赤です

最初の <color> タグの範囲はテキストブロック全体です。2 番目の <color> タグには、その範囲を 1 つの単語に限定する終了タグがあります。

タグをネスト状にする場合、タグを開始したのと同じ順番でスコープを閉じる必要はありません。

リッチテキストタグを有効/無効にする

リッチテキストタグはデフォルトで有効になっています。

リッチテキストタグを無効にするには、以下のいずれかを行います。

  • UI Builder でコントロールを選択し、Inspector ウィンドウの Enable Rich Text チェックボックスをオフにします。
  • UXML では、enable-rich-text 属性を false に設定します。

その他の参考資料

USS でテキストのスタイルを設定する
サポートされるリッチテキストタグ