text-transform/大小文字変換

説明

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

構文

　text-transformプロパティの構文は以下の通りです。

text-transform: 指定;

　指定は以下の設定が出来ます。

利用例

　text-transformでcapitalizeを指定した利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。

p {
text-transform: capitalize;
}

<p>This is a pen.</p>

　上記を表示すると以下になります。

　単語の先頭が大文字に変換されています。

　次はuppercaseを指定した時の表示です。

　全て大文字に変換されています。

　lowercaseを指定した時の表示です。

　全て小文字に変換されています。

留意点

　capitalizeは単語の先頭を大文字に変換するだけで、単語の途中を小文字には変換しません。

　例えば、tHiS iS a pEn.という文章であれば、以下のように単語の途中は大文字のままになります。

関連ページ

・ホームページ作成「スタイルシートの定義方法」

　外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る