text-transform/大小文字変換

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.

関連ページ

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

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

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

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

  • このエントリーをはてなブックマークに追加

★上ページに含まれるプロパティ

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)