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

text-transform

text-transform はテキストの表示上の大文字小文字を変更するプロパティです。uppercase で全て大文字、lowercase で全て小文字、capitalize で各単語の先頭を大文字にできます。HTMLソースを変更せずに表示上の変換を行うため、多言語対応やスタイルの一貫性維持に役立ちます。

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

概要

text-transform はテキストの表示上の大文字小文字を変更するプロパティです。uppercase で全て大文字、lowercase で全て小文字、capitalize で各単語の先頭を大文字にできます。HTMLソースを変更せずに表示上の変換を行うため、多言語対応やスタイルの一貫性維持に役立ちます。

対応ブラウザ

デスクトップ

Chrome 1+
Edge 12+
Safari 1+
Firefox 1+

モバイル

Chrome Android 18+
Safari iOS 1+
Firefox Android 4+

基本構文

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

実務での使いどころ

  • 見出しの大文字表示

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

注意点

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

アクセシビリティ

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

参考リンク