説明
text-transformプロパティを使うと英字を大文字で揃える、小文字で揃える、単語の先頭だけ大文字に変換するといった設定が出来ます。

text-transformプロパティは大文字と小文字の変換の指定が出来ます。
text-transformプロパティを使うと英字を大文字で揃える、小文字で揃える、単語の先頭だけ大文字に変換するといった設定が出来ます。
text-transformプロパティの構文は以下の通りです。
text-transform: 指定;
指定は以下の設定が出来ます。
指定 | 説明 |
---|---|
none | 変換しない(デフォルト) |
capitalize | 単語の先頭を大文字に変換 |
uppercase | 全て大文字に変換 |
lowercase | 全て小文字に変換 |
text-transformでcapitalizeを指定した利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。
p {
text-transform: capitalize;
}
<p>This is a pen.</p>
上記を表示すると以下になります。
This is a pen.
単語の先頭が大文字に変換されています。
次はuppercaseを指定した時の表示です。
This is a pen.
全て大文字に変換されています。
lowercaseを指定した時の表示です。
This is a pen.
全て小文字に変換されています。
capitalizeは単語の先頭を大文字に変換するだけで、単語の途中を小文字には変換しません。
例えば、tHiS iS a pEn.という文章であれば、以下のように単語の途中は大文字のままになります。
tHiS iS a pEn.
検索付「CSSプロパティ早見表」に戻る
スマホ向け「CSSプロパティ一覧」に戻る
★上ページに含まれるプロパティ