text-transform
CSSの書き方
text-transform:値 ;
CSSの詳細情報 | |||||
---|---|---|---|---|---|
プロパティ名 | text-transform | 読み方 | テキスト・トランスフォーム | ||
初期値 | none | 意味 | 大文字小文字の表示制御 | ||
値 | none/capitalize/uppercase/lowercase | ||||
対象 | すべての要素 | ||||
CSSレベル | CSSレベル1 | 対応ブラウザ | Windows | MAC | |
継承 | する | IE 5.0以上/FF1.0/NS7.1/OP8.0 | SF/IE5.0 |
解説
「text-transform」プロパティは、単語ごとのアルファベットの文字列(英単語)の表示方法を指定するスタイルシートです。
日本語などの文字列は対象となりません。
値には、以下の表の4つを入力することができます。
設定できる値 | 表示の仕方 |
---|---|
none(初期値) | 文字は変更されず、通常の表示 |
capitalize | 単語の先頭文字だけ大文字に変換 |
uppercase | すべての文字列を大文字に変換 |
lowercase | すべての文字列を小文字に変換 |
capitalizeの補足
「text-transform」プロパティの値「capitalize」は、単語の先頭の文字を大文字に変換しますが、残りの文字についてはそのままです。
残りの文字が強制的に小文字になるわけではありません。
従って、例えば「tRansForm」という文字を「capitalize」で変換すると「TRansForm」と表示されます。
CSS/HTMLサンプル
p.cap { text-transform:capitalize; }
p.up { text-transform:uppercase; }
p.low { text-transform:lowercase; }
段落要素に含まれる英単語の表記を変換する サンプル