Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

text-transform

text-transform は CSS のプロパティで、要素のテキストを大文字表記する方法を指定します。テキストをすべて大文字にしたり、すべて小文字にしたり、各単語の先頭を大文字にしたりすることを指定します。フリガナの読みやすさを向上するのにも役立ちます。

テキスト変換大文字小文字

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
text-transform
1
12
1
1
18
1
capitalize
1
12
1
1
18
1
dutch ij digraph

オランダ語の「IJ」ダイグラフ
14
full-size-kana
64
17
17
full-width
19
17
17
greek accented characters

ギリシャ語のアクセント付き文字
34
79
15
34
lowercase
1
12
1
1
18
1
lowercase sigma

`Σ` → `σ` または語末 `ς`
30
12
14
6
30
6
none
1
12
1
1
18
1
turkic is

「i」→「İ」および「ı」→「I」
31
12
14
8
31
8
uppercase
1
12
1
1
18
1
uppercase eszett

`ß` → `SS`
1
18
1
1
18
1
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • `text-transform` プロパティは、`::first-line` 疑似要素に対しては機能しません (ワンコロン構文にも)。 バグ 40214861 を参照してください。
注釈 1件
実装メモ
  • `text-transform` プロパティは、`::first-line` 疑似要素に対しては機能しません (古い 1 コロン構文に対しても機能しません)。 バグ 3409 を参照してください。
注釈 1件
実装メモ
  • `text-transform` プロパティは、`::first-line` 疑似要素に対しては機能しません (ワンコロン構文にも)。 バグ 40214861 を参照してください。
注釈 1件
実装メモ
  • `text-transform` プロパティは、`::first-line` 疑似要素に対しては機能しません (古い 1 コロン構文に対しても機能しません)。 バグ 3409 を参照してください。
注釈 1件
実装メモ
  • Firefox 14 より前では、一部の句読点文字が正しい大文字化を妨げる可能性がありました。 バグ 731536 を参照してください。

基本構文

CSS 
.uppercase { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }
.lowercase { text-transform: lowercase; }

ライブデモ

Uppercase(uppercase)

CSS Uppercase(uppercase) demo.

プレビュー全画面表示

Capitalize(startuppercase)

CSS Capitalize(startuppercase) demo.

プレビュー全画面表示

Lowercase(lowercase)

CSS Lowercase(lowercase) demo.

プレビュー全画面表示

実務での使いどころ

  • 見出しの大文字表示

    ナビゲーションやボタンのラベルを全て大文字で表示し、視覚的なインパクトと一貫性を与えます。

注意点

  • スクリーンリーダーによっては uppercase のテキストを頭字語と解釈して一文字ずつ読み上げることがあります。

アクセシビリティ

  • text-transform で表示を変更しても、コピー＆ペーストやスクリーンリーダーの読み上げはソースのテキストに基づきます。意味が変わらないことを確認してください。

参考リンク