最終更新日

text-transformプロパティ

text-transformは、HTMLファイルに関係なく、テキストを大文字・小文字・全角で表示させるプロパティです。capitalize、uppercase、lowercaseのキーワードに加えて、CSS3では「full-width」が新しく追加されました。

full-widthは、すべての文字を全角で表示します。全角の形式に対応していない文字の場合は変更されません。

capitalize、uppercase、lowercaseのいずれかとfull-widthは、半角スペースで区切って指定することもできます。full-widthを指定すると、日本語の半角カナ文字を全角カナ文字へ変更することが可能です。

CSS3での変更点
・値に「full-width」が追加されました。
初期値 適用先 継承
none すべての要素 あり
説明
none 記述した通りに表示されます。(初期値
capitalize 単語の先頭の文字のみ大文字で表示します。
uppercase すべての文字を大文字で表示します。
lowercase すべての文字を小文字で表示します。
full-width すべての文字を全角で表示します。全角の形式に対応していない文字の場合は変更されません。
サンプルコード
text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: full-width;
text-transform: capitalize full-width;
text-transform: uppercase full-width;
text-transform: lowercase full-width;
参考文献:CSS Text Level 3外部リンク
HOME