CSS - text-transform

概要

属性名 text-transform
none | [ [ capitalize | uppercase | lowercase ] || full-width || full-size-kana ]
初期値none
適用可能要素すべての要素
継承継承する
メディアVisual / Text
サポートC1 / e6 / N6 / Fx1 / Ch1 / Op3.5 / Sa1

説明

テキストに影をつけます。

説明
none変換しません。
capitalize各単語の先頭文字を大文字にします。(C1/e6/N6/Fx1/Ch1/Op3.5/Sa1)
uppercaseすべての文字を大文字にします。(C1/e6/N6/Fx1/Ch1/Op3.5/Sa1)
lowercaseすべての文字を小文字にします。(C1/e6/N6/Fx1/Ch1/Op3.5/Sa1)
full-widthすべての文字を全角文字にします。(C3)
full-size-kana半角カナを全角カナに変換します。(C3)

使用例

HTML
<h3>none</h3>
<div style="text-transform:none">
I have a dream that one day this nation will rise up and ...
</div>

<h3>capitalize</h3>
<div style="text-transform:capitalize">
I have a dream that one day this nation will rise up and ...
</div>

<h3>uppercase</h3>
<div style="text-transform:uppercase">
I have a dream that one day this nation will rise up and ...
</div>

<h3>lowercase</h3>
<div style="text-transform:lowercase">
I have a dream that one day this nation will rise up and ...
</div>

<h3>full-width</h3>
<div style="text-transform:full-width">
I have a dream that one day this nation will rise up and ...
</div>

<h3>full-size-kana</h3>
<div style="text-transform:full-size-kana">
アイハブアドリーム ザットワンディ ディスネイション ウィル レイズアップ...
</div>
表示
none
I have a dream that one day this nation will rise up and ...
capitalize
I have a dream that one day this nation will rise up and ...
uppercase
I have a dream that one day this nation will rise up and ...
lowercase
I have a dream that one day this nation will rise up and ...
full-width
I have a dream that one day this nation will rise up and ...
full-size-kana
アイハブアドリーム ザットワンディ ディスネイション ウィル レイズアップ...