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

初期値 none
適用対象 全ての要素、::first-letterおよび::first-line
継承 する
アニメーション 離散値
対応ブラウザ caniuseで確認

text-transformプロパティの説明

text-transformは、テキストの大文字・小文字の表記を指定します。大文字と小文字が区別される文字列がマークアップされていた場合に、それを全て大文字や小文字に統一したり、単語の先頭だけを大文字にすることが可能です。

text-transformに指定できる値

none
文字の変換を行いません。これが初期値です。
capitalize
単語の頭文字を大文字に変換します。単語の先頭にある句読点や記号は無視されます。
uppercase
全ての文字を大文字に変換します。
lowercase
全ての文字を小文字に変換します。
full-width
東アジアの文字(中国語や日本語など)で書かれている場合、記号やラテン文字を強制的に正方形の枠内に揃えて全角で表示する値です。
full-size-kana
小文字のカナを全て大文字のカナに変換します。これは主に、<ruby>で振られたフリガナの読みやすさを維持する目的の機能です。

text-transformの使い方とサンプル

text-transformプロパティの構文は以下の通りです。

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

表示確認
CSS
.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;
}
HTML
<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>

text-transformに関連するCSSプロパティ

テキスト関連
text-align ボックスに含まれる内容の横位置の揃え方を指定する
text-align-last ボックスに含まれる内容の最後の行を揃える位置を指定する
text-combine-upright 一文字分の空間に挿入する文字の組み合わせを指定する
text-decoration 文字の装飾線に関する値を一括で指定する
text-decoration-color 文字に加えられた装飾線の色を指定する
text-decoration-line 文字に加えられた装飾線の種類を指定する
text-decoration-skip-ink 装飾線が文字を通過する祭の処理を指定する
text-decoration-style 文字に加えられた装飾線の形状を指定する
text-decoration-thickness 文字に加えられた装飾線の太さを指定する
text-emphasis テキストに付加する圏点、傍点、脇点に関する値を一括で指定する
text-emphasis-color テキストに付加する圏点、傍点、脇点の色を指定する
text-emphasis-position テキストに付加する圏点、傍点、脇点の位置を指定する
text-emphasis-style テキストに付加する圏点、傍点、脇点の記号を指定する
text-indent テキストの一行目に挿入するインデントの幅を指定する
text-justify テキストの行端揃えに対して均等割り付けの方法を指定する
text-orientation 縦書きモードの文字の向きを指定する
text-overflow 行からテキストが溢れている状態の表現方法を指定する
text-shadow 文字に影(ドロップシャドウ)を付ける
text-transform テキストの大文字・小文字の表記を指定する
text-underline-position 文字の下に引かれる装飾線の位置を指定する