CSSリファレンス

実践向けCSSリファレンス

英文字の大文字・小文字を設定する text-transform

概要

CSSプロパティ「text-transform」を使用すると、テキスト表記を大文字や小文字にすることができます。日本語ではあまり馴染みがないかもしれませんが、英語のような大文字と小文字が混在する場合に有用です。例えば、ページ全体で英語のパターンを統一させたい場合など、このプロパティで定義しておくことによって、もし間違って記述されていた場合でも自動的に変換されるようになります。

ちなみに、大文字は uppercase、小文字はlowercase、各単語の先頭文字のみを大文字にすることをcapitalizeといいます。CSSやJavascriptを学ぶ時にみられる単語なので一緒に覚えておくとよいでしょう。

説明
capitalize先頭文字のみを大文字にします
uppercase全て大文字にします
lowercase全て小文字にします
full-width主に表意文字などを一般的な日本語や中国語に揃えられるようにします
none初期値

使用例

<p class="capitalize">ごきげんようを英語でいうと、Have a nice day です。</p>
<p class="lowercase">ごきげんようを英語でいうと、Have a nice day です。</p>
<p class="uppercase">ごきげんようを英語でいうと、Have a nice day です。</p>
<style>
p {
  background-color: #def;
  margin-bottom: 10px;
}
.capitalize {
 text-transform: capitalize;
}
.lowercase {
 text-transform: lowercase;
}
.uppercase {
 text-transform: uppercase;
}
</style>

仕様書

関連CSSプロパティ

閉じる