CSSで大文字/小文字を変換するtext-transformプロパティ
コーディングの案件で、グローバルメニューをデザイン通り、
英語の小文字で作成していたのですが、
最後に大文字にしてほしいという要望がきました。
すでに数十ページ作成したこともあり、
CSSのtext-transformで変換しました。
SPONSORED LINK
text-transform
| text-transform: none; | 変換なし（初期値） |
|---|---|
| text-transform: capitalize; | 単語の先頭文字を大文字に変換 |
| text-transform: uppercase; | 全ての文字を大文字に変換 |
| text-transform: lowercase; | 全ての文字を小文字に変換 |
表示例
|
1 2 3 4 5 6 7 8 9 |
.cap { text-transform: capitalize; } .up { text-transform: uppercase; } .low { text-transform: lowercase; } |
|
1 2 3 |
<span class="cap">capitalize</span> <span class="up">uppercase</span> <span class="low">LOWERCASE</span> |
capitalize
uppercase
LOWERCASE
で変換されます。
まとめ
最終的なデザイン面での変更を対応が必要な場面はよくあると思います。
（本来このようなデザインの変更は、デザイン上のチェックの問題ですが・・・）
大文字に置換し、チェックすれば30分ほどかかりますが、CSSの調整だと1分ですみます。
CSSで調整できる場合には、text-transformが便利です。