コーディングの案件で、グローバルメニューをデザイン通り、
英語の小文字で作成していたのですが、
最後に大文字にしてほしいという要望がきました。
すでに数十ページ作成したこともあり、
CSSのtext-transformで変換しました。
text-transform
| text-transform: none; | 変換なし（初期値） |
|---|---|
| text-transform: capitalize; | 単語の先頭文字を大文字に変換 |
| text-transform: uppercase; | 全ての文字を大文字に変換 |
| text-transform: lowercase; | 全ての文字を小文字に変換 |
表示例
.cap {
text-transform: capitalize;
}
.up {
text-transform: uppercase;
}
.low {
text-transform: lowercase;
}
<span class="cap">capitalize</span> <span class="up">uppercase</span> <span class="low">LOWERCASE</span>
capitalize
uppercase
LOWERCASE
で変換されます。
まとめ
最終的なデザイン面での変更を対応が必要な場面はよくあると思います。
（本来このようなデザインの変更は、デザイン上のチェックの問題ですが・・・）
大文字に置換し、チェックすれば30分ほどかかりますが、CSSの調整だと1分ですみます。
CSSで調整できる場合には、text-transformが便利です。
参考
執筆者：KIYOTA
関連記事
-
-
MacでAndroid環境をブラウザ検証できる「Genymotion」が超便利
SPONSORED LINK iPhoneしか持ってない場合、Androidの検証に困ります。 そんな場合、 「Genymotion（ジェニーモーション）」を使うと MacでAndroidの検証が手軽 …
-
-
SPONSORED LINK PFU Happy Hacking Keyboard Lite2 for Macの英語配列を購入しました。 それまで、Apple純正キーボードの日本語配列を利用していまし …
-
-
【新人向け】簡単にできた！Webサイトでよくみる技術のまとめ
SPONSORED LINK 4月から新たにデザイナーになる人も多いのではないかと思います。 クライアントやディレクターから、「あのサイトのような動きにしたい」と依頼されることも多いかと思います。 そ …
-
-
SPONSORED LINK Responsive Image Breakpoints Generator レスポンシブWebデザインで、マルチデバイスに対応させる際、読み込む画像のサイズを複数設定し …
-
-
思ったより時間がかかった…初心者がコーディングで時間をロスしない方法
SPONSORED LINK 簡単に見えて以外と奥が深いのがHTML/CSSのコーディング。 今まで5,000ページ以上はコーディングをしてきましたが、未だに些細なことで予想外に時間をとられることはよ …
