【CSS】text-transformプロパティの使い方と注意

こんな便利なプロパティがあるの知りませんでした。

ただ、こちらの記事を書くにあたって使用したのですが、思わぬところでハマったので覚え書きします。

 

text-transformとは

text-transformプロパティは大文字、小文字を設定できるもので、単語の先頭だけ大文字にすることもできます。

 

初期値 none
適用対象 すべて
継承 あり

 

none 初期値。指定なし
lowercase 全て小文字
uppercase 全て大文字
capitalize 先頭だけ大文字
full-width 全て大文字全角

 

サンプル

・表示例

style = “text-transform : none;”

this is sample code.
style = “text-transform : lowercase;”

this is sample code.
style = “text-transform : uppercase;”

this is sample code.
style = “text-transform : capitalize;”

this is sample code.
style = “text-transform : full-width;”

this is sample code.

 

・表示例2

<p style = “text-transform:lowercase”;>THIS IS SAMPLE CODE.</p>

THIS IS SAMPLE CODE.
<p style = “text-transform:capitalize”;>THIS IS SAMPLE CODE.</p>

THIS IS SAMPLE CODE.
<p style = “text-transform:capitalize”;>ThiS iS SaMpLe cODe.</p>

ThiS iS SaMpLe cODe.
<p style = “text-transform:uppercase”;>ThiS iS SaMpLe cODe.</p>

ThiS iS SaMpLe cODe.
<p style = “text-transform:lowercase”;>これはサンプルです。</p>

これはサンプルです。

uppercaseで大文字から小文字はできるのですが、capitalizeは頭文字以外を小文字にしてくれないようです。
尚バラバラにすると、該当箇所だけ拾って変換してくれます。
また、言語による影響ももちろん受けます。

 

気をつけること

javascriptからCSSを変更しようとした時、hoge.style.text-transformとすると動きません。

hoge.style.textTransformとする必要があるようです。

知らずに別の箇所を疑って苦労しました。。。