テキストを大文字や小文字で表示する

CSSのtext-transformプロパティを使って、半角英字を大文字・小文字に変更してみます。

サンプルコード

HTML

<h2>text-transform: none;</h2>
<p>apple and banana → <span class="none">apple and banana</span></p>
<p>Web → <span class="none">Web</span></p>
<p>MYTH & ROID → <span class="none">MYTH & ROID</span></p>

<h2>text-transform: capitalize;</h2>
<p>apple and banana → <span class="capitalize">apple and banana</span></p>
<p>Web → <span class="capitalize">Web</span></p>
<p>MYTH & ROID → <span class="capitalize">MYTH & ROID</span></p>

<h2>text-transform: uppercase;</h2>
<p>apple and banana → <span class="uppercase">apple and banana</span></p>
<p>Web → <span class="uppercase">Web</span></p>
<p>MYTH & ROID → <span class="uppercase">MYTH & ROID</span></p>

<h2>text-transform: lowercase;</h2>
<p>apple and banana → <span class="lowercase">apple and banana</span></p>
<p>Web → <span class="lowercase">Web</span></p>
<p>MYTH & ROID → <span class="lowercase">MYTH & ROID</span></p>

CSS

.none {
	text-transform: none;
}
.capitalize {
	text-transform: capitalize;
}
.uppercase {
	text-transform: uppercase;
}
.lowercase {
	text-transform: lowercase;
}

text-transformのデモページ
今回は半角英字を対象にしましたが、英語以外でも大文字と小文字の区別がある言語には適用されます。

【参考サイト】

• text-transform – CSS | MDN