「CSS」text-transformプロパティで英字の大文字と小文字を変換するサンプル

2022年7月30日

環境
Google Chrome　 103.0.5060.134

構文
text-transform: uppercase ;
英文テキストが全て大文字に変換されています。
text-transform: lowercase;
英文テキストが全て小文字に変換されています。

使用例

<!DOCTYPE html>
<html>
<head>
<style>
#cfA {
      text-transform: uppercase ;
}

#cfB {
      text-transform: lowercase ;
}

#cfA ,
#cfB {
      margin-top: 0 ;
}

div {
      margin-top: 25px ;
}
</style>
</head>
<body>

<p>英文テキストが全て大文字に変換</p>
<div id="cfA">Coding Changes the World arkgame.com!</div>

<p>英文テキストが全て小文字に変換</p>
<div id="cfB">Coding Changes the World arkgame.com!</div>

</body>
</html>

実行結果

英文テキストが全て大文字に変換

CODING CHANGES THE WORLD ARKGAME.COM!
英文テキストが全て小文字に変換

coding changes the world arkgame.com!

CSS

Posted by arkgame