2021/10/25

2021/10/25

1161 views

これまでHTMLで、英文字の大文字を使いたい場合わざわざ大文字に変換するなどして記述していました。
ところが、CSSで自動で英文字の小文字を大文字に変えて表示してくれる方法があることを知りメモとして残しておきます。
text-transformというプロパティを使います。以下解説になります。

text-transform: uppercase;を使う

text-transform: uppercase;というプロパティを要素に指定するだけで小文字の英文字を大文字に変えてくれます。

HTML

<p class="oomoji">sample text</p>

CSS

.oomoji {
    text-transform: uppercase;
}

その他のtext-transform

lowercase

text-transform: lowercase;とすれば、大文字を小文字として表示します。

capitalize

text-transform: capitalize;とすれば、単語の最初の文字だけ大文字で表示します。

none

text-transform: none;とすれば変換表示を行いません。初期値。

まとめ

CSS３にはまだまだ活用していない便利なプロパティがあるんですね。