text-transform

text-transformは、大文字や小文字などに変換して表示するスタイルです。

解説

テキストを強制的に大文字や小文字にして表示します。

構文

構文は以下になります。

値

text-transformには以下の値が指定できます。

サンプル

すべてのテキストを大文字に変換する

.sample01{
  text-transform:uppercase;
}

<div class="sample01">HeLlO wOrLd!!</div>

すべてのテキストを小文字に変換する

.sample02{
  text-transform:lowercase;
}

<div class="sample02">HeLlO wOrLd!!</div>

単語の先頭のみ大文字にする

.sample03{
  text-transform:capitalize;
}

<div class="sample03">HeLlO wOrLd!!</div>

先頭以外の文字は何も変換されません。

変換しない

.sample04{
  text-transform:none;
}

<div class="sample04">HeLlO wOrLd!!</div>

備考

• 日本語のテキストは変換対象になりません。

Tweet