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

最終更新日 2017.07.17 - 公開日 2017.07.16

by Takumi Hirashima

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

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

初期値：none
TAKUMI hirashima

単語の先頭の文字を大文字表示：capitalize
TAKUMI hirashima

すべてのテキストを小文字表示：lowercase
TAKUMI hirashima

すべてのテキストを大文字表示：uppercase
TAKUMI hirashima

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

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

text-transform: capitalize;

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

text-transform: lowercase;

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

text-transform: uppercase;

まとめ

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