FEVDES BLOG

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

コーディング

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

投稿日:

SPONSORED LINK

5896353044_295ef72579_z

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

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

SPONSORED LINK

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が便利です。

参考

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

-コーディング

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

MacでAndroid環境をブラウザ検証できる「Genymotion」が超便利

SPONSORED LINK iPhoneしか持ってない場合、Androidの検証に困ります。 そんな場合、 「Genymotion(ジェニーモーション)」を使うと MacでAndroidの検証が手軽 …

HHKBのCtrlのみで英語・日本語に切り替える方法

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ページ以上はコーディングをしてきましたが、未だに些細なことで予想外に時間をとられることはよ …

KIYOTA
KIYOTA
Webデザイナー / ウェブ解析士
デザインとコーディングと制作現場が大好きなWebデザイナー(Webデザイナー歴13年)
コーポレートサイトを中心に、官公庁・公共施設・メディア・商業施設・不動産など多岐のジャンルのWebサイトを数百件制作。
モットーは「Speed & Quality」。
広範囲な知識・技術・経験を活かした素早い制作が得意。 WACA上級ウェブ解析士。