CSS で英語テキストを大文字表示や小文字表示にする方法
最終更新日 - 公開日 2017.07.16
by
CSS で英語テキストを大文字表示や小文字表示にする方法を紹介します。
例えば、WordPress などで入力された値を、入力内容を変更せずに大文字表示や小文字表示にしたいときに便利な方法です。
CSS で英語テキストを大文字表示や小文字表示にする方法
CSS で英語テキストを大文字表示や小文字表示にする場合、CSS のセレクター text-transform
を使用します。
英語テキスト TAKUMI hirashima を、先頭の文字を大文字表示、すべてを小文字表示、すべてを大文字表示にした場合の表示結果は次の通りです。
初期値:none
TAKUMI hirashima
TAKUMI hirashima
単語の先頭の文字を大文字表示:capitalize
TAKUMI hirashima
TAKUMI hirashima
すべてのテキストを小文字表示:lowercase
TAKUMI hirashima
TAKUMI hirashima
すべてのテキストを大文字表示:uppercase
TAKUMI hirashima
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 系のコンテンツで、入力された値が決まっているような場合に便利な方法です。