アルファベットの大文字/小文字の表示方法を指定する

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; }

段落要素に含まれる英単語の表記を変換する サンプル

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSS、Webデザインを体系的に学ぶなら

CSSを駆使したモダンなWebデザインを学ぶなら

最新情報をチェックしよう!