CSSの「魔法の杖」で文字を大変身！`text-transform`でタイポグラフィを自在に操ろう
こんにちは！Web制作の第一線で毎日コードと格闘していると、時々「あ、しまった…！」という瞬間に遭遇しませんか？
例えば、せっかくオシャレなデザインを作ったのに、後からクライアントさんから「やっぱり英語の部分、全部大文字で統一してほしいんだよね」なんて言われること。HTMLを一つひとつ書き直すなんて、考えただけでも腰が重くなってしまいますよね。
そんな時、CSSには「文字の見た目を一瞬で変えてしまう魔法の杖」があるんです。それが今回ご紹介する`text-transform`というプロパティです。
難しいことは一切ありません。一緒に少しずつ紐解いていきましょう！
—
そもそも「text-transform」って何？
`text-transform`は、HTMLのタグの中にあるテキストを、「表示上だけ」大文字や小文字に変換してくれるCSSの機能です。
一番のポイントは、「HTMLの元データは書き換えない」ということ。CSSを外せば元の姿に戻るから、安心して色々なパターンを試せるんです。お買い物の時に、試着室で服を着替えるような感覚ですね。
では、代表的な3つの呪文（値）を見ていきましょう。
—
1. uppercase：すべて大文字でキリッとさせる
`uppercase`は、その名の通り「全部大文字にする」呪文です。見出しやボタンなど、強調したい場面でよく使われます。
hello world
.all-upper {
/ これだけで「HELLO WORLD」と表示されます /
text-transform: uppercase;
}
「全部大文字だと少し窮屈かな？」と感じたら、`letter-spacing`（文字の間隔）を少し広げてあげると、一気に洗練されたプロっぽい見た目になりますよ。
—
2. lowercase：すべて小文字で落ち着いた印象に
逆に、全部小文字にするのが`lowercase`です。デザインのアクセントとして、あえてすべて小文字で統一すると、少しレトロで大人っぽい雰囲気が出せます。
EVERYTHING IS FINE
.all-lower {
/ 大文字で書いてあっても、強制的に「everything is fine」になります /
text-transform: lowercase;
}
—
3. capitalize：単語の頭だけ大文字にする
これが意外と便利なんです。「capitalize」は、「それぞれの単語の最初の1文字だけを大文字にする」というもの。名前やタイトルを表示する時に大活躍します。
web design is fun
.head-upper {
/ 「Web Design Is Fun」のように、単語の先頭が自動で大文字になります /
text-transform: capitalize;
}
—
現場で役立つ「ちょっとした注意点」
ここで一つだけ、現場の知恵として覚えておいてほしいことがあります。
それは、「検索エンジンや読み上げソフトへの配慮」です。
`text-transform`はあくまで「見た目」を変える魔法です。もし、本当に重要なキーワードで、読み上げソフトにしっかり「大文字として強調してほしい」といった意図がある場合は、CSSに頼りすぎず、HTML側で最初から大文字で入力しておくのが正解です。
「見た目の演出はCSS、大切な意味はHTML」。このバランスを意識できると、あなたの書くコードは一気にプロのクオリティに近づきますよ。
—
さあ、あなたも試してみましょう！
Web制作を始めたばかりの頃は、「これってどうやって直せばいいんだろう？」と悩むことばかりだと思います。でも大丈夫。こうして少しずつ、便利な道具を自分のツールボックスに入れていけば、いつの間にか複雑なデザインもスイスイ作れるようになります。
まずは、お気に入りのテキストに`text-transform`を当ててみて、「おお、変わった！」という小さな驚きを楽しんでみてください。
その「楽しい！」という感覚こそが、最高のエンジニアへの第一歩です。また一緒に、Webの面白い世界を探索していきましょうね！
コメント