text-transform - 英字の大文字と小文字を調節する

投稿日:2016/02/22 / 更新日:2016/02/22

スタイルシートのtext-transformは、テキストに含まれる英文の小文字と大文字を調整するためのプロパティです。

サンプルコード

text-transformを指定したサンプルコードです。

p {
	text-transform: uppercase ;
}

text-transformにuppercase(大文字)を指定したデモです。英文テキストが全て大文字に変換されているのを確認して下さい。CSSタブを編集して、どのように変化があるのかを試してみて下さいね。

<code>text-transform</code>を適用 This website is SYNCER. Thank you very much! 元のテキスト This website is SYNCER. Thank you very much!

#element-1 { text-transform: uppercase ; } #element-1 , #element-2 { margin-top: 0 ; font-weight: 700 ; } p { margin-top: 25px ; }

値の説明は下記の通りです。リンクをクリックするとデモを確認できます。

項目	説明
inherit	親要素の値を引き継ぐ。例の場合、`div`要素の`text-transform`には、`body`に指定された値(`uppercase`)が引き継がれる。
initial	プロパティの初期値が適用される。この場合、`none`(調節なし)が適用される。
none	初期値。大文字、小文字の調整をしない。
capitalize	各単語の最初の1文字だけ大文字にして、後は小文字のまま。
uppercase	英文全てを大文字にする。
lowercase	英文全てを小文字にする。

2016年7月現在の、ブラウザのサポート状況は次の通りです。全ての主要ブラウザで、ベンダープレフィクスなど気にすることなく利用できます。