Caution

お使いのブラウザはJavaScriptが無効になっております。
当サイトでは検索などの処理にJavaScriptを使用しています。
より快適にご利用頂くため、JavaScriptを有効にしたうえで当サイトを閲覧することをお勧めいたします。

CSS辞典

text-transform

英字などのテキストの大文字小文字を指定します。

p.test { text-transform: none;}
p.test1 { text-transform: lowercase;}
p.test2 { text-transform: uppercase;}
p.test3 { text-transform: capitalize;}

値	概要
none	テキストを入力した通りに表示します。この『none』が初期値です。
lowercase	テキストを全て小文字で表示します。
uppercase	テキストを全て大文字で表示します。
capitalize	テキストの単語の先頭文字を大文字で表示します。

<p style="text-transform: none;">ここはp要素です。this is a pen.</p>

<p style="text-transform: lowercase;">ここはp要素です。this is a pen.</p>

<p style="text-transform: uppercase;">ここはp要素です。this is a pen.</p>

<p style="text-transform: capitalize;">ここはp要素です。this is a pen.</p>

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

1 以降 ○

Edge

12 以降 ○

全バージョンで対応しています

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

7 以降 ○

6 以前 ×

モバイル

iOS Safari

1 以降 ○

Android Browser

4.4 以降 ○

3 以前 ×

Chrome Android

英字などのテキストの大文字小文字を指定します。

日本語には大文字小文字という概念がありませんので日本語のテキストにこのプロパティを指定しても何も起こりません。ご注意ください。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ