【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とする必要があるようです。
知らずに別の箇所を疑って苦労しました。。。
