CSS text-transform：uppercase, lowercase, capitalize

CSS text-transform：大文字、小文字、頭文字大文字の指定方法

「CSSで大文字を小文字にする方法」を探している開発者の多くは、テキストの実際の値を変更することを期待しています。しかし、CSSは見た目を変更するだけで、文字列の実際の値は変更しません。このガイドでは、なぜその違いが重要なのかを解説します。

目次：

text-transform: lowercase

テキストを小文字で表示しますが、ソースデータ（HTML内）は変更されません。

.selector { text-transform: lowercase; }

元の文字列を変更せずに、テキストを大文字で表示します。

.selector { text-transform: uppercase; }

各単語の最初の文字を大文字で表示します。これも見た目のみの変化です。

.selector { text-transform: capitalize; }

ニーズに最適な技術を判断するために、この比較表を参考にしてください。

（コピー＆ペースト用やフォーム保存用に）テキストデータそのものを変更する必要がある場合は、JavaScriptを使うか、変換ツールを使用してください。

CSSと大文字・小文字の関係について疑問があるなら、これが重要な回答です。

いいえ。あくまで視覚的な変換のみです。

テキスト文字列の実際の値を変更する必要がある場合は、JSを使用してください。

はい。オンラインの変換ツールを使えば解決します。

ソーステキストそのものを変更したいですか？

見た目だけでなく、データの形式を実際に変更したい場合は、コンバーターをご利用ください。