FEVDES BLOG

自分の経験をシェアしたい。Webデザインのテクニック&効率化。

CSSで大文字/小文字を変換するtext-transformプロパティ

   

5896353044_295ef72579_z

コーディングの案件で、グローバルメニューをデザイン通り、
英語の小文字で作成していたのですが、
最後に大文字にしてほしいという要望がきました。

すでに数十ページ作成したこともあり、
CSSのtext-transformで変換しました。

SPONSORED LINK

text-transform

text-transform: none; 変換なし(初期値)
text-transform: capitalize; 単語の先頭文字を大文字に変換
text-transform: uppercase; 全ての文字を大文字に変換
text-transform: lowercase; 全ての文字を小文字に変換

表示例

capitalize
uppercase
LOWERCASE

で変換されます。

まとめ

最終的なデザイン面での変更を対応が必要な場面はよくあると思います。
(本来このようなデザインの変更は、デザイン上のチェックの問題ですが・・・)
大文字に置換し、チェックすれば30分ほどかかりますが、CSSの調整だと1分ですみます。
CSSで調整できる場合には、text-transformが便利です。

参考

スタイルシート[CSS]/テキスト・フォント/大文字と小文字を変換する – TAG index Webサイト

 - コーディング