text-transformを使ってCSSの力でテキストを大文字にしたり小文字にしたりする 📝

f:id:kimizuka:20210106235659p:plain

アルファベットのユーザー名をデータベースには小文字で収納しつつ、HTMLに表示する際は大文字で表示したい。
最近そんな感じのケースがありまして、

ReactやVueを使って、

<p className="username">{ username.toUpperCase() }</p>

<p class="username">{{ username.toUpperCase() }}</p>

といった感じにバインディングしちゃおうと考えたんですが、デザイン上の問題だったので、あえてCSSで対応してみました。

text-transformを使えば、大文字にしたり小文字にしたりすることができます。

.username {
  text-transform: uppercase;
}

uppercaseを指定すれば、見た目上は大文字になります。

username

👆

これが、

<p style="text-transform: uppercase;">username<p>

のレンダリング結果です。

ソースコード上では小文字のままですが、ブラウザでレンダリングされたテキストをドラッグで選択してコピーすると、しっかり大文字でコピーされます。

みかづきブログ・カスタム