text-transform CSS3

text-transform は、テキストの大文字・小文字を指定する時に使います。

名前:text-transform
値: none | capitalize | uppercase | lowercase | full-width
初期値:none
適用対象:全ての要素
継承:する
パーセンテージ:n/a
メディア:visual（視覚的）
計算値:As specified（指定通り）
正規順序:n/a
アニメーション:discrete（離散的）

Value（値）

none
初期値 入力されたまま表示
capitalize
単語の１文字目を大文字で表示
uppercase
全て大文字で表示
lowercase
全て小文字で表示
full-width
全て全角文字で表示（全角がない場合は変換なし） CSS3

HTML source

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <style>
   p.test1 { text-transform: none; }
   p.test2 { text-transform: capitalize; }
   p.test3 { text-transform: uppercase; }
   p.test4 { text-transform: lowercase; }
   p.test5 { text-transform: full-width; }
  </style>
 </head>
 <body>
   <p class="test1">none none</p>
   <p class="test2">capitalize capitalize</p>
   <p class="test3">uppercase uppercase</p>
   <p class="test4">owercase owercase</p>
   <p class="test5">full-width ｱｲｳｴｵ</p>
 </body>
</html>

display

none none

capitalize capitalize

uppercase uppercase

owercase owercase

full-width ｱｲｳｴｵ

※ Google Chrome 64.0.3282.186（full-widthは×）、Firefox58.0.2にて表示確認（2018/3/18）

上に戻る