【入門編】インライン要素のtext-transform制御 – HTML実践ガイド

CSSでテキストを「魔法のように」操る！`text-transform`でデザインの質を一段上げよう

こんにちは！フロントエンドの世界へようこそ。

HTMLで文章を書いていて、「あれ、ここ全部大文字にしたいな」「数字だけちょっと雰囲気を変えたいな」なんて思ったことはありませんか？わざわざテキストエディタで打ち直したり、JavaScriptで無理やり書き換えたり……そんな苦労、実はCSSの「text-transform」という魔法の杖を使えば、一瞬で解決できるんです。

今日は、Web制作の現場で「かゆいところに手が届く」このプロパティについて、一緒に紐解いていきましょう。

—

「text-transform」ってどんな道具？

一言で言うと、「HTMLの元データはそのままで、見た目だけをガラッと変える」ためのツールです。

例えるなら、「デジタルな服の着せ替え」ですね。中身の体（テキスト）は同じなのに、着せる服（CSS）を変えるだけで、スーツにもカジュアルにも見せられる。そんなイメージです。

さっそく、一番よく使う「英字の大文字・小文字変換」から見ていきましょう。

1. 英字の見た目をコントロールする

英語のタイトルなどで、あえてすべて大文字にしてカッコよく見せたいときってありますよね。

.uppercase {
text-transform: uppercase; / すべて大文字に！ /
}

.lowercase {
text-transform: lowercase; / すべて小文字に！ /
}

.capitalize {
text-transform: capitalize; / 単語の先頭だけ大文字に！ /
}

• uppercase: どんなに小文字で書いても、ブラウザ上では「HELLO」と表示されます。
• lowercase: 逆に「hello」と表示させます。
• capitalize: 英文のタイトルなどで、単語の頭文字だけをピシッと揃えたい時に便利です。

「打ち直さなくていい」というのが最大のメリットです。後から「やっぱり小文字がいい」と言われても、CSSを一行書き換えるだけで済みます。これぞ、効率的なWeb制作の第一歩ですよ！

—

「全角・半角」のちょっと深い話

さて、ここからが少し現場のリアルな話です。CSSで「全角・半角」を直接操作するプロパティは、実は存在しません。

「えっ、じゃあどうするの？」と不安になりましたか？大丈夫、安心してください。

Web開発の現場では、「フォントの設定（font-variant-numeric）」という別の魔法を使います。特に数字を扱うとき、プロっぽい仕上がりにするにはこれが欠かせません。

.price-tag {
/ 数字を「等幅（テーブル数字）」にして、桁を揃える設定 /
font-variant-numeric: tabular-nums;
}

お買い物のレシートを想像してみてください。数字がバラバラだと合計金額が読みづらいですよね？この設定をすると、数字の幅が均一になり、きれいに縦に並ぶようになります。こういう小さなこだわりが、サイトの「信頼感」に繋がるんです。

—

実践！インライン要素で個性を出す

``や``といったインライン要素に、この魔法をかけてみましょう。