CSS `text-transform` を使いこなす：見た目の「揺らぎ」をコードで制圧する技術
現場でコードレビューをしていると、ときどき「UIデザイン上の大文字表記」をHTMLのテキスト自体を書き換えて実装しているケースを見かけます。例えば、デザインカンプで「ALL CAPS」と書かれているからといって、HTMLソースに `HELLO WORLD` と直打ちしてしまう。
これ、実はアクセシビリティや保守性の観点から見ると、あまり推奨されるアプローチではありません。
今回は、インライン要素における `text-transform` の制御に焦点を当て、「なぜCSSで制御すべきなのか」「ブラウザは裏側で何をしているのか」という深掘りから、明日から使える実践的なテクニックまでを解説します。
—
1. なぜ「CSS制御」が正解なのか
結論から言えば、「テキストの『意味（セマンティクス）』と『装飾（プレゼンテーション）』を分離するため」です。
例えば、ユーザーのメールアドレスやIDを大文字で表示したい場合、HTMLに `USER_ID` と書いてしまうと、スクリーンリーダーがそれをそのまま「ユー・エス・イー・アール…」と読み上げてしまうリスクがあります。また、将来的にデザイン変更で「やっぱり小文字がいい」となった際、HTMLを全置換するのは骨が折れますよね。
CSSの `text-transform` を使えば、HTMLのソースは清潔に保ったまま、見た目だけを安全に操作できます。
—
2. `text-transform` の標準仕様とブラウザの裏側
`text-transform` プロパティには主に以下の値を指定します。
- `uppercase`: すべて大文字に変換
- `lowercase`: すべて小文字に変換
- `capitalize`: 単語の最初の文字を大文字に変換
- `none`: 変換しない（初期値）
ブラウザはどう処理しているのか？
ブラウザはレンダリングの最終段階（レイアウト計算後、ペイント直前）でこの変換を行います。DOMツリー上のテキストノード自体が書き換わるわけではありません。つまり、JavaScriptの `textContent` や `innerText` で取得すると、変換前の元の文字列がそのまま取得できるのです。
これは非常に重要です。コピー＆ペーストしたときに、画面上の見た目ではなく「元のソースのテキスト」がクリップボードに入るため、ユーザーの利便性を損なうことがありません。
—
3. 実践！現場で使える「垢抜けた」コード例
単に大文字にするだけなら誰でもできますが、プロとして意識したいのは「読みやすさ」と「多言語対応」です。
以下のコードは、インライン要素（`span`, `time`, `strong`）に適した、実務でそのまま使える実装パターンです。
/ 1. 見出しやラベルに最適な「大文字のキレ」を出す /
.c-label–upper {
text-transform: uppercase;
/ 大文字にすると文字の間隔が詰まって見えるため、少しだけ空けるのがコツ /
letter-spacing: 0.05em;
}
/ 2. 日時表示など、情報を整列させる際のテクニック /
.c-time {
text-transform: lowercase;
font-variant-numeric: tabular-nums; / 数値を等幅にして、縦の並びを揃える /
}
/ 3. ユーザーの入力値を尊重しつつ、デザインを適用する /
.c-code {
text-transform: none; / コードの可読性を保つため変換はOFF /
font-family: ‘Courier New’, monospace;
background: #f4f4f4;
padding: 2px 4px;
}
ステータス:
active
更新日時:
—
4. 注意点：ここだけは避けるべき「地雷」
`text-transform` を使う上で、一点だけ気をつけてほしいことがあります。それは「言語ごとの変換ルール」です。
特にトルコ語など、一部の言語では `i` を大文字にすると `İ` になるという特殊な仕様があります。CSSには `text-transform: uppercase` を適用した際に、HTMLの `lang` 属性を考慮して自動で変換ルールを切り替える機能が備わっています。
istanbul
インライン要素にこれらを適用する際は、必ずルート要素や親要素に適切な `lang` 属性を付けておくこと。これができるかできないかで、グローバルサイト構築時のクオリティが大きく変わります。
—
まとめ：CSSの力で、HTMLを「意味の塊」にする
インライン要素の制御は、一見すると地味な作業ですが、ここを疎かにするとCSSのメンテナンス性は一気に低下します。
- テキストの装飾は可能な限りCSSに任せる
- コピー＆ペースト時の体験（アクセシビリティ）を考慮する
- `lang` 属性とセットで考え、言語ごとの例外に対処する
この3点を押さえておけば、後輩から「どうしてこんなに堅牢なCSSが書けるんですか？」と聞かれること間違いありません。ぜひ、次のプロジェクトで意識して取り入れてみてください。
コメント