【text-transform】大文字・小文字に変換する

text-transformプロパティではアルファベットなどの単語の表示方法を変換することができます。

例えばアルファベットなど、大文字と小文字がある言語の場合に、単語の最初の文字だけを大文字で表示したり、全体を大文字、または小文字にして表示することが可能です。 ただし表示する文字が日本語の場合は、text-transformプロパティを指定しても文字が変化する事はありません。

書式

  • text-transform : ……… アルファベットを大文字・小文字に変換

★:capitalize、inheritなど、他下記参照

none
標準の状態で表示(初期値)
capitalize
各単語の1文字目を大文字に変換して表示
uppercase
すべての文字を大文字に変換して表示
lowercase
すべての文字を小文字に変換して表示

使用した時の例

.sample1 {text-transform: none;}
.sample2 {text-transform: capitalize;}
.sample3 {text-transform: uppercase;}
.sample4 {text-transform: lowercase;}
<div class="sample1">text-transform: none / CONVERT characters</div>
<div class="sample2">text-transform: capitalize / CONVERT characters</div>
<div class="sample3">text-transform: lowercase / CONVERT characters</div>
<div class="sample4">text-transform: lowercase / CONVERT characters</div>

ブラウザ上の表示例

text-transform: none / CONVERT characters
text-transform: capitalize / CONVERT characters
text-transform: lowercase / CONVERT characters
text-transform: lowercase / CONVERT characters

対応ブラウザなどのデータ

初期値 none 値の継承 継承する
適用可能な要素 すべての要素
メディア visual / text
対応ブラウザ Internet Explorer6~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~