軽くハマったのでメモ。

WordPressでサイトを作っていて、メニューを表示させようとしていたのですが、小文字で設定した文字がなぜか大文字で表示されているという現象がありました。

これはいったい何だろう？と思って調べてみたら、CSSのtext-transformプロパティで設定できるみたいですね。知りませんでした。

text-transformプロパティの値

text-transformにはこんな値が設定できます。

• none：記述通りに表示、何も設定しなければこれが初期値となる。
• capitalize：先頭文字を大文字にする
• lowercase：全て小文字で表示
• uppercase：全て大文字で表示

原因は「text-transform : uppercase」になっていたからでした。

もっと突き詰めると、サンプルコードをそのまま利用して深く見ていなかったからですね。

サンプルコードはすぐに思いを実現できるので、便利です。でも、その分コードを理解することがなくなりがちなので、気をつけないな〜と思いました。