# text-transform

> テキストの大文字・小文字を変換するプロパティです。uppercase（全て大文字）、lowercase（全て小文字）、capitalize（各単語の先頭を大文字）などがあり、HTMLを変更せずに表示を制御できます。

- カテゴリ: テキスト・フォント
- URL: https://www.css-dictionary.com/property/text-transform/

## 構文

```css
text-transform: none | capitalize | uppercase | lowercase
```

## Tailwindでは

- `uppercase` → text-transform: uppercase
- `lowercase` → text-transform: lowercase
- `capitalize` → text-transform: capitalize
- `normal-case` → text-transform: none

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 1+ / Firefox 1+ / Safari 1+ / Edge 12+

## コード例

### 例1: すべて大文字に変換

```css
text-transform: uppercase;
```

### 例2: すべて小文字に変換

```css
text-transform: lowercase;
```

### 例3: 各単語の先頭を大文字に変換

```css
text-transform: capitalize;
```

### 例4: 変換しない（デフォルト）

```css
text-transform: none;
```

## TIPS

ナビゲーションメニューやボタンでよく使われる。HTMLの内容を変更せずにスタイルだけで変換できる。

## よくある間違い

日本語には効果がない。capitalizeは各単語の先頭のみ（全角スペースでは動作しない場合がある）。

## AIがよく間違えるポイント

text-transformは見た目だけの変換で、コピーされるテキストやスクリーンリーダーが読む内容は元のままです（略語が大文字化で1字ずつ読まれる等の影響はあり得ます）。「データ自体を大文字にしたい」ならJSやサーバー側の仕事で、この責任分界をAIは曖昧にしがちです。日本語には効果がないため英字UIラベル向けです。

## AIへの依頼文例

- ナビラベルを英字大文字表示にしたい。データは変えずCSSだけで、字間調整もセットで

## 関連プロパティ

- [letter-spacing](https://www.css-dictionary.com/property/letter-spacing.md)