text-transform：テキストの大文字・小文字の表記を指定する

text-transformプロパティの説明

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プロパティの書き方を見ていきましょう。以下の例は、英語と日本語のテキストに対して同じ値を指定した場合の挙動です。対応しているブラウザであれば、ソースコード上の大文字・小文字と関係なく、期待する文字の大きさに変換してくれます。対応していないブラウザでは何も起こりません。

.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;
}

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