「CSS」text-transformプロパティで英字の大文字と小文字を変換するサンプル
環境
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!