Webデザインでは、テキストの見た目を調整することが重要です。text-transform プロパティを使えば、大文字や小文字の変換を簡単にコントロールできます。本記事では text-transform の基本的な使い方から応用まで詳しく解説します。
Contents
text-transformとは？
text-transform は テキストの大文字・小文字の変換 を行うCSSプロパティです。
基本構文:
selector {
text-transform: 値;
}text-transform の主な値
| 値 | 説明 |
|---|---|
none | 変換なし（デフォルト） |
uppercase | すべて大文字に変換 |
lowercase | すべて小文字に変換 |
capitalize | 各単語の先頭を大文字に変換 |
full-width | 半角文字を全角に変換（日本語には影響なし） |
実際の使用例
すべて大文字（uppercase）
.uppercase {
text-transform: uppercase;
}HTML:
<p class="uppercase">hello world</p>表示結果:
HELLO WORLDすべて小文字（lowercase）
.lowercase {
text-transform: lowercase;
}HTML:
<p class="lowercase">HELLO WORLD</p>表示結果:
hello world各単語の先頭を大文字（capitalize）
.capitalize {
text-transform: capitalize;
}HTML:
<p class="capitalize">hello world</p>表示結果:
Hello World（単語の先頭だけが大文字になります）
text-transformの活用例
＜ボタンのテキストを大文字に統一＞
button {
text-transform: uppercase;
}➡ ボタンのラベルを強調したいときに便利。
＜タイトルの見た目を統一＞
h1 {
text-transform: capitalize;
}➡ 記事タイトルを自動で見やすく。
＜入力フォームの自動変換＞
input {
text-transform: uppercase;
}➡ 入力データを統一したい場合に役立つ（例: ユーザー名をすべて大文字に統一）。
text-transformの注意点
言語によって挙動が異なる
capitalizeは単語の先頭を大文字にしますが、hello-worldのような単語の区切りには適用されません。uppercase/lowercaseは、日本語や中国語などの言語には影響しません。
入力フォームの変換は注意
inputフィールドでtext-transform: uppercase;を適用しても、送信されるデータ自体は変換されません（サーバー側での処理が必要）。
まとめ
text-transformは テキストの大文字・小文字変換を行うCSSプロパティ。uppercase、lowercase、capitalizeを使うと、テキストの見た目を統一できる。- ボタンやタイトルのスタイル統一、フォームの入力補助などに活用できる。
- 言語による影響やフォーム入力時の挙動に注意。
text-transform を適切に活用して、デザインをより統一感のあるものにしましょう！
コメント