「text-transform」プロパティについて

CSSの「text-transform」は、アルファベットの文字列を大文字にするか小文字にするか、その表示方法を指定するプロパティです。
「テキスト・トランスフォーム」と読みます。

「text-transform」プロパティでは以下の6つの値を設定することができます。

値 変換方法
none（初期値） 文字は変換されません
capitalize 単語の先頭文字だけ大文字に変換
lowercase すべての文字を小文字に変換
uppercase すべての文字を大文字に変換
full-width すべての文字を全角形式に変換（対応する全角形式がない場合はそのまま表示）
full-size-kana ruby要素を使用した場合にフリガナの小文字を大文字に変換

しばしば「対象は英単語のみで、日本語には大文字・小文字の区別がないのでtext-transformを指定しても効果はありません」と説明するブログサイトが存在しますが、それは誤り、または古い情報で、CSSレベル3では「text-transform:full-width;」と「text-transform:full-size-kana;」が追加され、それぞれ日本語にも対応しています。

※「full-size-kana」は対応しているブラウザが少ないので要注意。

「text-transform」の使い方

「text-transform」の使い方は以下のとおり。

例：capitalize

//HTML
<p class="sample">the quick brown fox jumps over the lazy dog.</p>

// CSS
.sample {text-transform:capitalize;}
表示結果
The Quick Brown Fox Jumps Over The Lazy Dog.

例：uppercase

//HTML
<p class="sample">the quick brown fox jumps over the lazy dog.</p>

// CSS
.sample {text-transform:uppercase;}
表示結果
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.

「text-transform:capitalize;」の補足

text-transform:capitalize;は単語の先頭の文字を大文字に変換しますが、残りの文字については影響を与えません。
残りの文字が小文字に変換されるわけではないので、たとえば「onZe」という文字に対してtext-transform:capitalize;を指定すると「OnZe」と表示されます。