text-transform：テキストの大文字表示・小文字表示を指定する

適用対象	全ての要素
継承	する

text-transformプロパティは、英語テキストの大文字表示、小文字表示を指定する際に使用します。単語の先頭文字だけを大文字で表示することもできます。

text-transformに与えられる値

text-transform: none;: 記述した通りに表示します。これが初期値です。
text-transform: capitalize;: 単語の先頭文字を大文字で表示します。
text-transform: lowercase;: 全てを小文字で表示します。
text-transform: uppercase;: 全てを大文字で表示します。

text-transformの使用サンプル

CSS

.text_sample01 {
 text-transform: none;
 border: 1px solid #666666;
 padding: 5px;
 margin-bottom: 10px;
}
.text_sample02 {
 text-transform: capitalize;
 border: 1px solid #666666;
 padding: 5px;
 margin-bottom: 10px;
}
.text_sample03 {
 text-transform: lowercase;
 border: 1px solid #666666;
 padding: 5px;
 margin-bottom: 10px;
}
.text_sample04 {
 text-transform: uppercase;
 border: 1px solid #666666;
 padding: 5px;
}

XHTML

<div class="text_sample01">
AaBbCcDdEeFfGg<br />
text_sample01<br />
[text-transform: none;]<br />
</div>

<div class="text_sample02">
AaBbCcDdEeFfGg<br />
text_sample02<br />
[text-transform: capitalize;]<br />
</div>

<div class="text_sample03">
AaBbCcDdEeFfGg<br />
text_sample03<br />
[text-transform: lowercase;]<br />
</div>

<div class="text_sample04">
AaBbCcDdEeFfGg<br />
text_sample04<br />
[text-transform: uppercase;]<br />
</div>

表示確認

AaBbCcDdEeFfGg
text_sample01
[text-transform: none;]

AaBbCcDdEeFfGg
text_sample02
[text-transform: capitalize;]

AaBbCcDdEeFfGg
text_sample03
[text-transform: lowercase;]

AaBbCcDdEeFfGg
text_sample04
[text-transform: uppercase;]

text-transformに関連するCSSプロパティ

テキスト関連
text-align	内包する要素に対して横位置の揃え方を指定する
text-align-last	内包する要素の最終行に対して横位置の揃え方を指定する
text-autospace	アルファベット等との間隔を指定
text-combine-horizontal	文字を縦書き表示にした際に縦中横のレイアウトにする
text-combine-mode	縦書き表示で縦中横のレイアウトにした文字の表示方法を指定する
text-decoration	文字列に装飾線や点滅を指定する
text-decoration-color	文字の装飾線の色を指定する
text-decoration-line	文字の装飾線の位置を指定する
text-decoration-skip	文字の装飾線について除外する対象を指定する
text-decoration-style	文字の装飾線の種類を指定する
text-emphasis	要素内のテキストに付与する強調マークに関する指定を行う
text-emphasis-color	要素内のテキストに付与する強調マークの色を指定する
text-emphasis-position	要素内のテキストに付与する強調マークの位置を指定する
text-emphasis-style	要素内のテキストに強調マークを付与する
text-height	テキストの高さを指定する
text-indent	文章のインデント幅を指定する
text-justify	行の両端揃えの方法を指定する
text-orientation	縦書き文章の文字の表示方向に関して指定する
text-overflow	要素からはみ出した文字を省略する
text-shadow	文字に影（ドロップシャドウ）を付ける
text-transform	テキストの大文字表示・小文字表示を指定する
text-underline-position	テキストのアンダーラインの位置を指定する