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にはまだまだ活用していない便利なプロパティがあるんですね。

この記事へのコメント

  • まだ書き込みはありません

コメントを残す



このサイトの表示速度はどうですか?

当サイトはレンタルサーバーにConoHa WING(コノハウイング)を使っていますよ。

ページの先頭に戻る