CSS で英語テキストを大文字表示や小文字表示にする方法

CSS で英語テキストを大文字表示や小文字表示にする方法

CSS で英語テキストを大文字表示や小文字表示にする方法を紹介します。
例えば、WordPress などで入力された値を、入力内容を変更せずに大文字表示や小文字表示にしたいときに便利な方法です。

  1. CSS で英語テキストを大文字表示や小文字表示にする方法
    1. 単語の先頭の文字を大文字表示
    2. すべてのテキストを小文字表示
    3. すべてのテキストを大文字表示

CSS で英語テキストを大文字表示や小文字表示にする方法

CSS で英語テキストを大文字表示小文字表示にする場合、CSS のセレクター text-transform を使用します。
英語テキスト TAKUMI hirashima を、先頭の文字を大文字表示、すべてを小文字表示、すべてを大文字表示にした場合の表示結果は次の通りです。

初期値:none
TAKUMI hirashima
単語の先頭の文字を大文字表示:capitalize
TAKUMI hirashima
すべてのテキストを小文字表示:lowercase
TAKUMI hirashima
すべてのテキストを大文字表示:uppercase
TAKUMI hirashima

CSS セレクター text-transform で指定できる値は次の通りです。

none
初期値
capitalize
単語の先頭の文字を大文字で表示
lowercase
すべてのテキストを小文字で表示
uppercase
すべてのテキストを大文字で表示

単語の先頭の文字を大文字表示

単語の先頭の文字を大文字表示にする場合は、CSS セレクター text-transform: capitalize; を使用します。

text-transform: capitalize;

すべてのテキストを小文字表示

すべてのテキストを小文字表示にする場合は、CSS セレクター text-transform: lowercase; を使用します。

text-transform: lowercase;

すべてのテキストを大文字表示

すべてのテキストを大文字表示にする場合は、CSS セレクター text-transform: uppercase; を使用します。

text-transform: uppercase;

まとめ

CSS で英語テキストを大文字表示や小文字表示にする方法を紹介しました。
WordPress などの CMS 系のコンテンツで、入力された値が決まっているような場合に便利な方法です。