この記事の要点

text-transform はテキストの大文字・小文字変換を行う CSS プロパティ uppercase（全て大文字）/ lowercase（全て小文字）/ capitalize（単語の先頭を大文字）/ none（変換しない） 表示だけが変わる。HTML や DOM の元テキストは変わらない（コピー時は元の文字） full-width（半角→全角）/ full-size-kana（小書きかなを通常サイズに）も使える 日本語の漢字・ひらがな・カタカナは uppercase / lowercase の影響を受けない

text-transform プロパティとは

CSS の text-transform プロパティは、テキストの大文字・小文字を変換して表示する CSS プロパティです。見た目だけが変わるのがポイントで、HTML 上の元テキストや DOM の textContent は変化しません（コピーすると元の文字がコピーされる）。

基本構文

.upper      { text-transform: uppercase; }
.lower      { text-transform: lowercase; }
.cap        { text-transform: capitalize; }
.none       { text-transform: none; }
.full-width { text-transform: full-width; }

値の一覧

値	挙動	例
none	変換しない（デフォルト）	Hello World → Hello World
uppercase	全て大文字	Hello World → HELLO WORLD
lowercase	全て小文字	Hello World → hello world
capitalize	各単語の先頭を大文字	hello world → Hello World
full-width	全角に変換（半角英数 → 全角）	abc → ａｂｃ
full-size-kana	小書きかなを通常サイズに	ャ → ヤ

使用例

見出しを全部大文字に

h1 {
  text-transform: uppercase;
  letter-spacing: 0.05em;  /* 大文字の窮屈感を緩和 */
}

ナビゲーションを大文字に

.nav a {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 0.9em;
}

capitalize で英語タイトル整形

<style>
.title { text-transform: capitalize; }
</style>

<p class="title">the quick brown fox</p>
<!-- 表示: The Quick Brown Fox -->

注意: capitalize は単語の先頭文字を大文字にしますが、英語のタイトルケース規約（小さな前置詞・冠詞は小文字）には従いません。タイトル表記を厳密にしたいなら HTML 側で正しく書きます。

text-transform は「表示だけ」

CSS の text-transform は見た目を変換しているだけで、元の HTML / テキストは変わりません。これは重要な特徴です。

<p id="hello" style="text-transform: uppercase">hello</p>

<script>
  // CSS で HELLO に見えていても、textContent は元のまま
  console.log(document.getElementById('hello').textContent);
  // → 'hello'
</script>

SEO クローラ・スクリーンリーダー・コピー操作は変換後ではなく元のテキストを扱います。

JavaScript の toUpperCase との違い

項目	CSS text-transform	JS toUpperCase
変更対象	表示のみ	文字列そのもの
DOM	変わらない	書き換わる
コピー時	元の文字	変換後の文字
SEO	元の文字でインデックス	変換後でインデックス

「表示のみ大文字にしたい」なら CSS、「データそのものを変える」なら JS（または HTML 側で書き換える）を使い分けます。

full-width — 半角を全角に

半角英数を全角に揃えたいとき（縦書きレイアウトなど）に便利です。

<style>
.fw { text-transform: full-width; }
</style>

<p class="fw">abc 123</p>
<!-- 表示: ａｂｃ　１２３ -->

日本語と text-transform

uppercase / lowercase / capitalize は日本語の漢字・ひらがな・カタカナには影響しません。混在する文字列でも、英字だけが変換されます。

<style>
.x { text-transform: uppercase; }
</style>

<p class="x">こんにちは Hello 世界</p>
<!-- 表示: こんにちは HELLO 世界 -->

継承

text-transform は継承されるプロパティです。親要素に指定すると子要素にも適用されます。

.section { text-transform: uppercase; }
/* .section 内の h2, p, span 等すべてが大文字表示に */

letter-spacing と組み合わせ

大文字は元々文字幅が広くやや窮屈に見えやすいので、letter-spacing で字間を少し空けるのがデザイン的な定石です。ラベルや見出しを大文字化するときは letter-spacing: 0.05em〜0.1em くらいを足すとバランスが整います。

.label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85em;
}

アクセシビリティ上の注意

テキストを視覚的に全て大文字に見せるのは便利ですが、長文を uppercase にすると読みづらくなると知られています。次のような配慮が望ましいです。

• 長文は uppercase にしない — ラベル・ボタン・ナビ程度に留める
• ディスレクシア（識字困難）の読者には全大文字は読みにくい場合がある
• スクリーンリーダーは元のテキストを読むため、聴覚的影響はないが、uppercase された略語（例: NASA）は 1 文字ずつ読み上げる音声合成エンジンもある — 単語として読みたい時は HTML 側で正しく書く
• 多言語サイトで言語によっては大文字化のルールが英語と異なる — トルコ語の I 問題等

font-variant との違い

似た機能に font-variant: small-caps があります。これは小文字を小型の大文字で表示します。完全な大文字化ではなくロゴ・タイトル向きの装飾です。

.smallcaps {
  font-variant: small-caps;
}
/* "Hello World" → "Hᴇʟʟᴏ Wᴏʀʟᴅ" 風の表示 */

ブラウザ対応

none / uppercase / lowercase / capitalize は全ブラウザで完全対応。full-width / full-size-kana は Safari 等で未対応のブラウザがあり、利用時はフォールバックを検討します。

FAQ

Q: 「文字を大文字に変換した状態でコピーさせたい」
A: CSS では不可能。JavaScript で toUpperCase() を使い HTML 自体を書き換える必要があります。

Q: capitalize で頭文字が大文字にならない
A: 既に小文字以外（数字や記号）から始まる単語は対象外です。また、半角スペース区切りが基準のため、全角スペースや句読点では区切られないことがあります。

関連

• font-variant — 小型大文字（small-caps）
• letter-spacing — 字間
• word-spacing — 単語間
• writing-mode — 縦書き
• text-decoration — 装飾線