CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － text-transform活用

Web APP CSS
スポンサーリンク

text-transform は「文字の見せ方を一瞬で変える」タイポグラフィのスイッチ

大文字化・小文字化・単語の頭だけ大文字など、
文章の“印象”を一瞬で変える強力なプロパティ が text-transform です。

特に UI デザインでは、
ボタン・ラベル・ナビゲーション・タグなどで頻繁に使われます。

ここでは、CSS と Tailwind CSS の両方で、
初心者でも迷わないように例題を交えて丁寧に解説します。

text-transform の基本種類とイメージ

capitalize

単語の頭文字だけ大文字にする
→ 見出しやタイトルでよく使う

uppercase

すべて大文字にする
→ ボタン・ラベル・タグで強調したいときに使う

lowercase

すべて小文字にする
→ 英字の柔らかい印象を出したいときに使う

none

変換しない（リセット用）

例1：見出しの頭文字だけ大文字にする（capitalize）

CSS 版

h2 {
  text-transform: capitalize;
}
CSS
<h2>section title example</h2>
HTML

→ 表示：Section Title Example

Tailwind 版

<h2 class="capitalize text-2xl font-semibold">
  section title example
</h2>
HTML

深掘りポイント
capitalize は「単語の区切り」を見て頭文字を変換します。
英語の見出しで自然な印象を作るのに最適です。

例2：ボタンをすべて大文字にして“押しやすい印象”にする（uppercase）

CSS 版

.button {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75em 1.5em;
}
CSS
<button class="button">submit</button>
HTML

→ 表示：SUBMIT

Tailwind 版

<button class="uppercase tracking-wider px-6 py-3 bg-blue-600 text-white rounded">
  submit
</button>
HTML

深掘りポイント
大文字は視認性が高く、
「アクション要素（ボタン・タグ）」と相性が抜群です。
ただし、本文で使うと読みにくくなるので注意。

例3：タグやカテゴリーを“ラベルっぽく”見せる（uppercase + spacing）

CSS 版

.tag {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  background: #e5e7eb;
  padding: 0.25em 0.75em;
  border-radius: 9999px;
}
CSS
<span class="tag">design</span>
HTML

Tailwind 版

<span class="uppercase tracking-widest text-xs bg-gray-200 px-3 py-1 rounded-full">
  design
</span>
HTML

深掘りポイント
uppercase × tracking-widest は
「タグ・カテゴリー・ステータス表示」の鉄板コンビです。

例4：英字の小文字で“柔らかい印象”を作る（lowercase）

CSS 版

.note {
  text-transform: lowercase;
  font-size: 0.9rem;
  color: #6b7280;
}
CSS
<p class="note">IMPORTANT NOTICE</p>
HTML

→ 表示：important notice

Tailwind 版

<p class="lowercase text-sm text-gray-500">
  IMPORTANT NOTICE
</p>
HTML

深掘りポイント
lowercase は英字の“優しい印象”を作るのに向いています。
UI の補足説明や注釈でよく使われます。

例5：フォームのプレースホルダーを自然に見せる（lowercase）

CSS 版

input::placeholder {
  text-transform: lowercase;
}
CSS

Tailwind 版

<input
  class="placeholder:lowercase border px-3 py-2 rounded"
  placeholder="ENTER YOUR EMAIL"
/>
HTML

→ 表示：enter your email

深掘りポイント
プレースホルダーは大文字だと強すぎるため、
lowercase で柔らかくするのが UI 的に自然です。

例6：文章の一部だけ uppercase にして強調（アクセント）

CSS 版

p strong {
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
CSS
<p>この機能は <strong>beta</strong> 版です。</p>
HTML

→ 表示：BETA

Tailwind 版

<p class="text-base">
  この機能は <strong class="uppercase tracking-[0.03em]">beta</strong> 版です。
</p>
HTML

深掘りポイント
文章の中で uppercase を使うと
「キーワードだけ強調」でき、読みやすさが向上します。

text-transform を使うときの設計ポイント（ここが一番大事）

1. 本文には使いすぎない

uppercase は読みづらくなるため、
本文では避けるのが基本。

2. UI 要素には積極的に使う

ボタン、タグ、ラベルなどは uppercase が効果的。

3. 英語の見出しは capitalize が自然

Title Case のような見た目になり、読みやすい。

4. 日本語には基本的に使わない

日本語は text-transform の対象外なので、
英字部分だけに使うのが正しい。

5. letter-spacing とセットで調整すると美しい

uppercase は字間が詰まりやすいので、
tracking-wider などで広げるとバランスが良い。

実務テンプレート：UI タイポグラフィセット

Tailwind 版

<!-- 見出し -->
<h2 class="capitalize text-2xl font-semibold tracking-tight">
  section title example
</h2>

<!-- ボタン -->
<button class="uppercase tracking-wider px-6 py-3 bg-blue-600 text-white rounded">
  submit
</button>

<!-- タグ -->
<span class="uppercase tracking-widest text-xs bg-gray-200 px-3 py-1 rounded-full">
  design
</span>

<!-- 補足テキスト -->
<p class="lowercase text-sm text-gray-500">
  IMPORTANT NOTICE
</p>
HTML

まとめ

text-transform は
文字の印象を一瞬で変えるタイポグラフィのスイッチ です。

ポイントは次の通りです。

  • capitalize → 見出しを自然に
  • uppercase → ボタン・タグを強調
  • lowercase → 補足テキストを柔らかく
  • 日本語には基本的に使わない
  • letter-spacing と組み合わせると美しい

スポンサーリンク
タイトルとURLをコピーしました