文字の装飾
text-transform
text-transform は、英字の大文字・小文字や、半角・全角を見た目の上だけ変換します。
構文none …
none
| [ capitalize | uppercase | lowercase ]
|| full-width || full-size-kana
| math-autoプレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
text-transform: uppercase;
}コントロール
text-transformuppercase
full-width / full-size-kana
full-widthFirefox・Safari のみ対応（Chrome・Edge では効きません）
full-size-kanaFirefox・Safari のみ対応（Chrome・Edge では効きません）
解説
変わるのは見た目だけ
HTML に書いた文字はそのままなので、ページ内の検索やフォームから送る値は元の文字です。見出しを大文字で見せたいときも、HTML は普通に書いておき、CSS で uppercase にするのが定番です。
それぞれの値
uppercaseはすべて大文字に、lowercaseはすべて小文字にします。capitalizeは単語の最初の文字だけを大文字にし、ほかの文字は変えません。プレビューの「Aa」はもともと先頭が大文字なので変わりません。full-widthは半角の英数字や記号を全角にします。縦書きで英数字を立てて並べたいときに使えます。full-size-kanaは「ぁ」「ャ」「ッ」などの小書きの仮名を普通の大きさにします。小さなルビを読みやすくするためのものです。
full-width と full-size-kana は Firefox と Safari が対応していますが、Chrome と Edge では効かず、見た目は変わりません。
言語で結果が変わる
大文字・小文字の対応は要素の言語（lang 属性）に従います。たとえばトルコ語では i が点付きの İ になります。