text-transform（テキストの大文字/小文字変換）プロパティ
最終更新：2026-09-13
text-transform text-transform（テキストの大文字/小文字変換）プロパティ
text-transform プロパティは、元の内容を変更せずに、テキストを大文字・小文字・単語の先頭大文字で表示する方法を変更します。HTML 内の元のテキストはそのままなので、スクリーンリーダーやコピーしたテキストには影響しません。変換は純粋に視覚的なものです。
| カテゴリ | |
|---|---|
| 初期値 | none |
| 継承 | はい |
| 適用対象 | all |
| アニメーションタイプ | discrete |
| CSS バージョン | CSS1 |
| 状態 | 標準 |
📝 構文
text-transform: none | capitalize | uppercase | lowercase | full-width;⚙️ 値
| 値 | タイプ | 説明 |
|---|---|---|
none | capitalize | uppercase | lowercase | full-width | キーワード | テキストの大文字/小文字変換の値 |
▶ 例
以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：
🌐 ブラウザーサポート
| ブラウザー |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| text-transform | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザーでサポート | |||||
ヒント： capitalize は各単語の先頭文字を大文字にしますが、中国語や日本語のように大小文字の区別がない文字体系には効果がありません。
注意： uppercase は一部の言語（ギリシャ語、トルコ語）で特別な大小文字規則を適用するため、結果が予想と異なる場合があります。
❓ よくある質問
Qtext-transform は DOM 内の実際のテキスト内容を変更しますか？
Aいいえ。視覚的な描画にのみ影響します。DOM やソースのテキストは変わらず、ユーザーがコピーするのは元のテキストです。統一感のある大文字の見出しやボタンのラベル整形に最適です。
Qtext-transform の full-width 値は何に使われますか？
A半角文字（ラテン文字、数字、句読点）を全角形式に変換し、中国語の段落内で西文字が均等に並ぶようにします。日本語や中国語の組版でよく使われ、漢字のようなすでに全角の文字には影響しません。
Qcapitalize が中国語のテキストに効果がないのはなぜですか？
Acapitalize は各単語の先頭文字を大文字にするだけで、中国語には単語も大小文字の概念もないため変化しません。混在テキストでは英語部分だけに影響します。またギリシャ語やトルコ語などには特別な大小文字規則があり、結果が予想と異なる場合があります。
🏷️ 関連プロパティ
💡 関連事例
📚 関連チュートリアル
