テキストを大文字・小文字変換 text-transformの使い方例

テキストをすべて大文字にする、すべて小文字にする、頭文字のみ大文字にするといった変換が出来るtext-transformの使い方例を紹介します。

ここでは英語のテキスト（アルファベット）の変換方法を取り扱います。
その他言語のtext-transformの仕様はこちら（text-transform）をご参照下さい。

text-transformプロパティまとめ

uppercase

すべて大文字にする

lowercase

すべて小文字にする

capitalize

頭文字のみ大文字にする

大文字へ変換

コード

.to-upper {
  text-transform: uppercase;
}

デモ

See the Pen text-transform: uppercase; by yoshi (@mikanbako) on CodePen.

小文字へ変換

コード

.to-lower {
  text-transform: lowercase;
}

デモ

See the Pen text-transform: lowercase; by yoshi (@mikanbako) on CodePen.

頭文字のみ大文字へ変換

コード

.to-capitalize {
  text-transform: capitalize;
}

デモ

See the Pen text-transform: capitalize; by yoshi (@mikanbako) on CodePen.