text-transform

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

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

text-transformプロパティとは

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

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

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

値の説明

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

none
変換しません。
capitalize
単語の先頭を大文字にします。
uppercase
すべての文字を大文字にします。
lowercase
すべての文字を小文字にします。

利用例

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

【text-transformの利用例を示すためのHTML】
<p>This is a pen.</p>

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

【capitalizeの利用例】
p {
  text-transform: capitalize;
}

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

「This Is A Pen.」と、単語の先頭がすべて大文字で表示されています。

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

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

「THIS IS A PEN.」と、すべて大文字で表示されています。

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

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

「this is a pen.」と、すべて小文字で表示されています。

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

ブラウザのサポート状況

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

【パソコン】
項目 IE Ed Fx Ch Sa Op
text-transform
【スマートフォン】
項目 Sa An Op Ch Fx Sm
text-transform
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

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

CSSプロパティ一覧」に戻る