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

2017.07.05

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

サンプルコード

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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

1
2
3
4
5
6
7
8
9
10
11
12
.none {
    text-transform: none;
}
.capitalize {
    text-transform: capitalize;
}
.uppercase {
    text-transform: uppercase;
}
.lowercase {
    text-transform: lowercase;
}

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

text-transform: none; 初期値。変換しないでそのまま表示。
text-transform: capitalize; 各単語の一文字目を大文字に変換して表示
text-transform: uppercase; 全ての文字を大文字に変換して表示。
text-transform: lowercase; 全ての文字を小文字に変換して表示。

　

【参考サイト】

　

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2025年4月
日 月 火 水 木 金 土
 12345
6789101112
13141516171819
20212223242526
27282930