「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>

<!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>

<!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!

英文テキストが全て大文字に変換 CODING CHANGES THE WORLD ARKGAME.COM! 英文テキストが全て小文字に変換 coding changes the world arkgame.com!

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

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

coding changes the world arkgame.com!

CSS

Posted by arkgame

関連投稿: