text-transform

HTMLに書いた文字列を保ったまま、表示上の大文字・小文字を切り替えるプロパティ。短い英語の見出しで、4つの代表値を比べます。

CSSの`text-transform`とは？

元の文字列を変えずに、英字を大文字・小文字・単語先頭の大文字へ表示変換する違いをライブプレビューで比べながら、none・uppercase・lowercase・capitalizeを初学者向けに解説します。

遊んでみよう

元の文字列を保ったまま、表示だけを変換

ORIGINAL TEXTDesign for EveryoneCSS lessons made friendly.

none：HTMLに書いた大文字・小文字をそのまま表示します

CSS

.element text-transform: none;

値のパターン

英字の表示方法 text-transform

text-transformの構成要素

01none

元の表記をそのまま使う

初期値です。HTMLに書いた大文字・小文字を変換せず、そのままの組み合わせで表示します。

02uppercase / lowercase

英字を同じケースへ揃える

uppercaseは大文字、lowercaseは小文字へ表示を揃えます。変換結果には言語ごとの規則も使われます。

03capitalize

各単語の先頭を大文字にする

単語の最初の文字を大文字へ変換し、残りの文字は元の表記を保ちます。文章の正しいタイトル表記を自動生成する機能ではありません。

早見表

初期値はnoneです。短い英語ラベルではuppercase・lowercase・capitalizeの違いが見えやすく、元の文字列はHTML側に残ります。

01noneHTMLに書いた表記をそのまま表示する初期値

02uppercaseすべての文字を大文字で表示する大文字

03lowercaseすべての文字を小文字で表示する小文字

04capitalize各単語の最初の文字を大文字にする単語先頭

05full-width文字を全角として表示する対応差を確認

06full-size-kanaルビの小書き仮名を通常の大きさにする用途限定

07inherit親の指定値を受け継ぐグローバル

よくある使い方

短いボタンラベルを大文字へ揃える

HTMLでは読みやすい表記を保ち、短い英語の操作ラベルだけを視覚的に大文字へ揃えられます。

.button-label { text-transform: uppercase; }

入力済みの識別子を小文字で見せる

表示上のユーザー名などを小文字へ揃えられます。ただし保存値や照合用データは別途処理します。

.user-handle { text-transform: lowercase; }

英語カテゴリの単語先頭を揃える

単純な英単語ラベルならcapitalizeで先頭を揃えられます。固有名詞や文章では元の表記を優先します。

.category-label { text-transform: capitalize; }

ポイント

見た目の変換は、文字データの書き換えではない。

text-transformの初期値はnoneで、すべての要素と::first-letter・::first-lineに適用でき、子要素へ継承されます。変換は表示上のもので、DOMの文字列やフォームの保存値を正規化する機能ではありません。uppercaseの長い文章は単語の形を見分けにくくなるため、短いラベルに留めます。capitalizeは各言語の正しいタイトル表記を保証せず、文字変換もlang属性と言語規則の影響を受けます。値の切り替えは離散的に変化します。