HOME
text-transformプロパティとは？
text-transformは文字の大文字と小文字を変換することができるプロパティです。
次のような値を指定することで、すべて大文字や小文字にしたり、頭文字だけ大文字にすることが可能です。
| none | 変換しない |
|---|---|
| lowercase | すべて小文字に変換する（例:this is a pen.） |
| uppercase | すべて大文字に変換する（例:THIS IS A PEN.） |
| capitalize | 頭文字だけ大文字に変換する（例:This is a pen.） |
text-transformの書き方
text-transformは次のように記述して使用します。
日本語には適用させても意味がない？
日本語にはそもそも大文字と小文字の区別がありませんので、日本語のテキストに対してtext-transformを指定しても何も変化はありません。
text-transformを使用する場面は英語が主になります。
指定できる値の種類と特徴
ここではそれぞれの値の特徴について説明していきます。
none
text-transformによる変換を行わないときは、noneを指定します。
HTMLに記述したテキストがそのまま表示されます。
なお、text-transformを指定していない場合（デフォルトの状態）では、noneが適用されています。
HTML
<p>this is a pen.</p>
CSS
p{
text-transform:none;/*変換しない*/
}
プレビュー
lowercase
lowercaseを指定すると、テキストはすべて小文字に変換されて表示されます。（元々小文字の場合は変化なし）
HTML
<p>THIS IS A PEN.</p>
CSS
p{
text-transform:lowercase;/*すべて小文字*/
}
プレビュー
uppercase
uppercaseを指定すると、テキストはすべて大文字に変換されて表示されます。（元々大文字の場合は変化なし）
商品名や見出しなど大文字で表示したいときに予め指定しておけば、入力の際に間違って小文字で入力してしまっても変換してくれるので便利です。
HTML
<p>this is a pen.</p>
CSS
p{
text-transform:uppercase;/*すべて大文字*/
}
プレビュー
capitalize
uppercaseを指定すると、テキストの頭文字だけを大文字に変換して表示してくれます。
英文は頭文字を大文字にする決まりがありますので、予め指定しておけば入力の際に意識する必要が無くて済みます。
HTML
<p>this is a pen.</p>
CSS
p{
text-transform:capitalize;/*頭文字だけ大文字*/
}
プレビュー
text-transformが効かない時は？
text-transformを指定したのに思い通りに反映されない場合は、次のような点を確認してみましょう。
- コードに記述ミスはないかどうか？
- 同じセレクターで重複して指定していないか？
- セレクターの優先順位は正しいかどうか？
コードに記述ミスはないかどうか？
CSSはスペルミスやコロン・セミコロンを付け忘れているだけで反映されなくなりますので今一度確認してみてください。text-transformの箇所以外が間違っていても同様ですので遡ってチェックしましょう。
同じセレクターで重複して指定していないか？
CSSは同じセレクターの場合、後から記述したものが優先されます。同じセレクターでtext-transformを指定していないか確認してみてください。
セレクターの優先順位は正しいか？
同じ要素でもCSSのセレクターには優先順位があり、基本としてはタグよりもクラス、クラスよりもIDに指定した値が優先されます。以前に別のセレクターを使ってtext-transformを指定していないかなど確認してみてください。
CSSのセレクターとは？【種類と使い方をわかりやすく解説】
CSSのセレクタ―は、スタイルを適用させたいHTML要素の特定に使います。このページではセレクターの種類と使い方を解説します。セレクタ―を使ってスタイルを指定することで...【もっと読む】
まとめ
以上がtext-transformプロパティの使い方です。
日本語サイトにおいては使用頻度が少ないかもしれません。しかし、例えば商品や作品など固有名詞で大文字で表示させるものが多い場合は、予めセレクターにuppercaseを指定しておくことで入力作業をスムーズにできるのではないでしょうか？
