「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」と表示されます。
