【CSS Modules】text-transformプロパティの使い方

text-transformプロパティは、HTML要素内のテキストにおけるアルファベット文字の表記方法を視覚的に変換するプロパティです。このプロパティがテキストに適用する変換は、あくまで表示上の変更であり、基になるHTMLコンテンツの実際のテキストデータ自体には影響を与えません。

主な値としては、以下のものがあります。noneは、テキストに何の変換も適用せず、記述された通りの表示を保つ初期値です。capitalizeは、各単語の最初の文字を大文字に変換し、それ以外の文字を小文字にします。これにより、見出しのように各単語の先頭を大文字で始めたい場合に便利です。uppercaseは、適用された要素内のすべてのアルファベット文字を大文字に変換します。例えば、ボタンや特定のラベルのテキストを全て大文字で強調したい場合などに使用されます。一方、lowercaseは、すべてのアルファベット文字を小文字に変換します。

このプロパティを活用することで、Webページのコンテンツのテキストデータを変更することなく、視覚的な表現を柔軟に調整し、デザインの一貫性を保つことが可能になります。例えば、ユーザー入力されたテキストを特定のスタイルに合わせて自動的に変換して表示するといった用途に利用できます。また、このプロパティは親要素から子要素へと継承されるため、スタイルシートで一度設定すれば、その範囲内のテキストに対して一括で変換ルールを適用できます。特定の言語（例えばトルコ語の「I」と「i」など）における大文字・小文字の変換ルールにも対応しており、多言語環境での正確な表示にも寄与します。システムエンジニアを目指す上で、ユーザーインターフェースの表現力を高めるための基本的なプロパティの一つとして、その活用方法を理解することは重要です。

Copy
1p {
2  text-transform: uppercase;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません