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

投稿日: / 更新日:

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

サンプルコード

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

p {
	text-transform: uppercase ;
}

デモ

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

値の指定

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

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

ブラウザのサポート

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

  • Chrome

    -

    時期不明

  • Firefox

    -

    時期不明

  • Safari

    -

    時期不明

  • Ie

    -

    時期不明

  • Edge

    -

    時期不明

  • Opera

    -

    時期不明

  • Safari(iOS)

    -

    時期不明

  • Ie Mobile

    -

    時期不明

  • Chrome

    -

    時期不明

  • Android

    -

    時期不明

  • FF Mobile

    -

    時期不明

  • Opera Mobile

    -

    時期不明