CSSで小文字を大文字に変える方法
2021/10/25
2021/10/25
1113 views
小文字を大文字 CSS3
これまで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;とすれば変換表示を行いません。初期値。
まとめ
CSS3にはまだまだ活用していない便利なプロパティがあるんですね。
この記事へのコメント
- まだ書き込みはありません