CSSのtext-transformでテキストの大文字・小文字を変換する方法をわかりやすく解説

text-transformプロパティは、テキストの大文字・小文字の変換方法を指定します。このプロパティを使用すると、テキストの表示スタイルを簡単に変更することができます。文字を動かしたり変形させるプロパティではありません。

text-transformの値とその効果の一覧

• none: 変換を行いません。元のテキストがそのまま表示されます。
• uppercase: すべての文字を大文字に変換します。
• lowercase: すべての文字を小文字に変換します。
• capitalize: 各単語の最初の文字を大文字に変換します。

注意点と関連情報

text-transformプロパティは、テキストの表示方法を変更するだけで、HTMLの実際の内容を変更するわけではありません。そのため、SEOやデータの一貫性に影響を与えることなく、視覚的なスタイルを調整できます。

text-transformが効かない時の原因と対策

インライン要素に適用していない

text-transformは、インライン要素やインライン要素を含むブロックレベル要素に対して効果を発揮します。ブロック要素には適用しても効果が見えにくいことがあります。

対策: インライン要素（<span>, <a>, <em>など）やその中に含まれる要素にtext-transformを適用します。例えば、<span style="text-transform: uppercase;">のように指定し、テキストを大文字に変換することができます。

フォントが影響している

一部のフォントでは、大文字や小文字の変換が効果的に表示されないことがあります。特殊なフォントが適用されていると、text-transformの効果が反映されにくいことがあります。

対策: 使用しているフォントを確認し、標準的なフォント（例: Arial, Times New Roman, Verdanaなど）でテストしてみます。問題が解決しない場合、別のフォントを選ぶか、CSSでフォントを再設定してみてください。

inputやtextareaに適用されない

text-transformはinputやtextareaのようなフォーム要素には直接効果を発揮しません。これらの要素に対しては、テキストが入力される際に変換が適用されない場合があります。

対策: JavaScriptを使用して、入力値を自動的に変換するロジックを追加します。例えば、入力フィールドで大文字に変換するには、JavaScriptを使ってリアルタイムでテキストを変換します。

共通するCSSコード

.css-sample-container {
  padding: 20px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  background-color: #f9f9f9;
}

.css-sample-text {
  font-size: 24px;
  border: 1px solid #999;
  padding: 10px;
}

text-transform: none

テキストの変換を行いません。元のテキストがそのまま表示されます。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-none">
    これはtext-transform: none; の表示例です。
  </div>
</div>

CSSコード

.css-sample-text-none {
  text-transform: none;
}

表示結果

text-transform: uppercase

すべての文字を大文字に変換します。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-uppercase">
    これはtext-transform: uppercase; の表示例です。
  </div>
</div>

CSSコード

.css-sample-text-uppercase {
  text-transform: uppercase;
}

表示結果

text-transform: lowercase

すべての文字を小文字に変換します。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-lowercase">
    これはText-Transform: Lowercase; の表示例です。
  </div>
</div>

CSSコード

.css-sample-text-lowercase {
  text-transform: lowercase;
}

表示結果

text-transform: capitalize

各単語の最初の文字を大文字に変換します。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-capitalize">
    これはtext-transform: capitalize; の表示例です。
  </div>
</div>

CSSコード

.css-sample-text-capitalize {
  text-transform: capitalize;
}

表示結果

まとめ

• text-transformは、テキストの大文字・小文字の変換を行うためのプロパティです。
• 「none」はテキストを変換せず、そのまま表示します。
• 「uppercase」はすべての文字を大文字に変換します。
• 「lowercase」はすべての文字を小文字に変換します。
• 「capitalize」は各単語の最初の文字を大文字に変換します。
• text-transformプロパティは、テキストの表示を変更するだけで、HTMLの内容そのものには影響しません。