ほんっとにはじめての HTML5 と CSS3

text-transformプロパティは、テキストを大文字・小文字に変換できます。
このプロパティは欧文テキスト専用。日本語テキストは大文字小文字の区別無いから。

テキストをすべて大文字、または小文字で表示したり、単語の最初の文字だけ大文字にしたりできます。
「transform」は「変換」の意味です。

CSS 2 からあるプロパティで、ほとんどのブラウザが対応しています。
ただし、Text Module Level 3 の草案で「full-width」値（半角英数字を全角にする）が追加されましたが、この値は at-risk（リスクが有るので勧告候補で削除されるかも）扱いになっていて、対応しているのは Firefox だけです。

参考：
・CSS Text Module Level 3 | W3C Working Draft
・text-transform - CSS | MDN

text-transformプロパティの値

text-transformプロパティの値はすべてキーワードです 。

text-transformプロパティの値
キーワード	noneがデフォルト値。 capitalize、uppercase、lowercase、full-width
グローバル値	text-transform: inherit; 親の値を継承（コレ書かなくても継承するけど） text-transform: initial; 継承した親の値を解消しデフォルト値に戻す text-transform: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	あり	適用できる要素	すべての要素

それぞれのキーワードは、以下の意味があります。

none

文字を変換させません。

capitalize

単語の最初の文字を大文字に変換させます。
単語の先頭に「句読点」や「記号」がある場合は無視する仕様です。

uppercase

すべての文字を大文字に変換させます。

lowercase

すべての文字を小文字に変換させます。

full-width

半角英数字を全角にします。
（＊ただし、この値は W3C で at-risk（リスクが有るので勧告候補で削除されるかも）扱いになっています）

text-transformプロパティの使用サンプル

text-transformプロパティの値をぜんぶ使ってみます。
ほとんどのブラウザで実装していますが、「full-width」は Firefox くらいしか実装していないようです。（勧告時には無くなるかもね。需要がなさそうだし）

サンプルのソースコードはこちら。
text-transformプロパティは <div>要素に直接書いています。

<div class="mihon">
<b>text-transform: 指定なし（ = none）</b>
This property transforms text for styling purposes.1234567890<br> 
(This) "is" [a] -short- *test*
</div>

<div class="mihon" style="text-transform:capitalize">
<b>text-transform: capitalize</b>
This property transforms text for styling purposes. 1234567890<br> 
(This) "is" [a] -short- *test*
</div>

<div class="mihon" style="text-transform:uppercase">
<b>text-transform: uppercase</b>
This property transforms text for styling purposes. 1234567890<br> 
(This) "is" [a] -short- *test*
</div>

<div class="mihon" style="text-transform:lowercase">
<b>text-transform: lowercase</b>
This property transforms text for styling purposes. 1234567890<br> 
(This) "is" [a] -short- *test*
</div>

<div class="mihon" style="text-transform:full-width">
<b>text-transform: full-width</b>
This property transforms text for styling purposes. 1234567890<br> 
(This) "is" [a] -short- *test*
</div>

<style>
.mihon {
	color:black;
	font-size:1rem;
	line-height:1.6;
	background:#ffc;
	margin:1em 0;
	border:solid 1px #ccc;
	padding:.6em}
.mihon b {
	display:block;
	color:#579961;
	text-transform:none}
</style>

次回予告

さて次回は、tab-sizeプロパティを使おう。
これは、文字通り「タブ（Tabキーを押してできるスペース）」の「幅」を指定できるプロパティです。

関連記事

• 【47-1】テキストのライン装飾の種類を決める text-decoration-line
• 【46】テキストの方向性を操作する unicode-bidi と direction
• （ちょっとメモ）縦書きでの字下げ・下線・リストなどを試してみた
• 【45-3】縦書きで「縦中横」ができる text-combine-upright
• 【45-2】縦書きでの文字の向きを決める text-orientation
• 【45-1】日本語の縦書きもできちゃう writing-modeプロパティ
• 【44】タブ文字の幅を決める tab-sizeプロパティ
• 【43】テキストを大文字・小文字に変換する text-transform
• 【42】句読点などをボックス外にぶら下がらせる hanging-punctuation
• 【41】句読点などが行頭に来るかどうか決める line-break
• 【40】文字間の間隔を指定する letter-spacingプロパティ
• 【39】単語間の間隔を指定する word-spacingプロパティ
• 【38】インデント（字下げ）を指定する text-indentプロパティ
• 【37】空白を詰めるかどうか決める white-spaceプロパティ
• 【36】単語の途中で改行するとき自動でハイフンを付ける hyphens