概要
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>