text-transformで英字の大文字・小文字を指定【CSS】

text-transformは英文字の大文字や小文字の表示、全角表示を指定するプロパティ。

text-transformプロパティを使うことで、単語の先頭のアルファベットだけ大文字にしたり、すべての文字を全角で表示したりすることもできます。

text-transformの指定方法

text-transformプロパティで指定できる表示方法には以下のようなものがあります。

下の英文で大文字・小文字の表示指定をしてみました。

If you can dream it, you can do it.
If you can dream it, you can do it.
If you can dream it, you can do it.

ウォルト・ディズニーの名言「If you can dream it, you can do it.（夢見ることができれば、それは実現できる。）」を拝借。

一番上が「capitalize」を指定して、英単語の先頭文字を大文字にしています。

2番目の英文は「uppercase」を指定しているので、全て大文字で表示されており、3番目の英文は「lowercase」を指定しているので、全て小文字表示となっています。

このように、text-transformプロパティを使い、英語などのテキストで大文字や小文字の表示指定ができるということです。