text-transform

CSSでは、大文字と小文字の変換を自動で行うことができます。

本ページでは、text-transformプロパティについて説明します。

text-transformプロパティとは

text-transformプロパティは、テキストの大文字と小文字の変換を行います。例えば、すべての文字を大文字にしたり、小文字にしたり、単語の先頭だけ大文字にしたりできます。

text-transformの定義は、以下のとおりです。

【text-transformの定義】
値	none \| capitalize \| uppercase \| lowercase
初期値	none
適用対象	すべての要素
継承	する

以下は、text-transformで使える値と説明です。

利用例を示すために、以下のHTMLを使います。

【text-transformの利用例を示すためのHTML】

<p>This is a pen.</p>

capitalizeの利用例は、以下のとおりです。

【capitalizeの利用例】

p {
  text-transform: capitalize;
}

これは、以下のように表示されます。

各単語の先頭が大文字になっています。

uppercaseにすると、以下のように表示されます。

すべて大文字になっています。

lowercaseにすると、以下のように表示されます。

すべて小文字になっています。

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目	IE	Ed	Fx	Ch	Sa	Op
text-transform	〇	〇	〇	〇	〇	〇

【スマートフォン】
項目	Sa	An	Op	Ch	Fx	Sm
text-transform	〇	〇	〇	〇	〇	〇

※スマートフォンのFirefoxとChromeは、Android版です。