text-transformプロパティの説明
CSSのtext-transformプロパティは、テキストの大文字・小文字の表記を指定します。大文字と小文字が区別される文字列がマークアップされていた場合に、それを全て大文字や小文字に統一したり、単語の先頭だけを大文字にすることが可能です。
text-transformに指定できる値
none- 文字の変換を行いません。これが初期値です。
capitalize- 単語の頭文字を大文字に変換します。単語の先頭にある句読点や記号は無視されます。
uppercase- 全ての文字を大文字に変換します。
lowercase- 全ての文字を小文字に変換します。
full-width- 東アジアの文字（中国語や日本語など）で書かれている場合、記号やラテン文字を強制的に正方形の枠内に揃えて全角で表示する値です。
full-size-kana- 小文字のカナを全て大文字のカナに変換します。これは主に、
<ruby>で振られたフリガナの読みやすさを維持する目的の機能です。
text-transformの使い方とサンプルコード
text-transformプロパティの構文は以下の通りです。
/* キーワード値 */
text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: full-width;
text-transform: full-size-kana;
/* グローバル値 */
text-transform: inherit;
text-transform: initial;
text-transform: revert;
text-transform: unset;
text-transformの実例
それでは実際にtext-transformプロパティの書き方を見ていきましょう。以下の例は、英語と日本語のテキストに対して同じ値を指定した場合の挙動です。対応しているブラウザであれば、ソースコード上の大文字・小文字と関係なく、期待する文字の大きさに変換してくれます。対応していないブラウザでは何も起こりません。
<div class="samp_box">
<section class="tt_1">
<h1>text-transform: none;</h1>
<p>I have an Apple.</p>
<p><ruby>戦車前へ<rt>パンツァーフォー</rt></ruby></p>
</section>
<section class="tt_2">
<h1>text-transform: capitalize;</h1>
<p>I have an Apple.</p>
<p><ruby>戦車前へ<rt>パンツァーフォー</rt></ruby></p>
</section>
<section class="tt_3">
<h1>text-transform: uppercase;</h1>
<p>I have an Apple.</p>
<p><ruby>戦車前へ<rt>パンツァーフォー</rt></ruby></p>
</section>
<section class="tt_4">
<h1>text-transform: lowercase;</h1>
<p>I have an Apple.</p>
<p><ruby>戦車前へ<rt>パンツァーフォー</rt></ruby></p>
</section>
<section class="tt_5">
<h1>text-transform: full-width;</h1>
<p>I have an Apple.</p>
<p><ruby>戦車前へ<rt>パンツァーフォー</rt></ruby></p>
</section>
<section class="tt_6">
<h1>text-transform: full-size-kana;</h1>
<p>I have an Apple.</p>
<p><ruby>戦車前へ<rt>パンツァーフォー</rt></ruby></p>
</section>
</div>
.samp_box {
overflow: auto;
padding: 0 1rem 1rem;
background: #eee;
}
.samp_box > section {
overflow: auto;
margin: 1rem 0 0;
padding: 0 1rem 1rem;
background: #fff;
}
section > h1 {
margin: 1rem 0 0;
font-size: 1rem;
}
section > p {
margin: 1rem 0 0;
}
.tt_1 p {
text-transform: none;
}
.tt_2 p {
text-transform: capitalize;
}
.tt_3 p {
text-transform: uppercase;
}
.tt_4 p {
text-transform: lowercase;
}
.tt_5 p {
text-transform: full-width;
}
.tt_6 p {
text-transform: full-size-kana;
}