HTMLで小文字と大文字に変換する方法【現役エンジニアが解説】

PROGRAM

今回は、HTMLで小文字と大文字に変換する方法について、それぞれに分け、簡単に解説していきます。

小文字に変換する方法

小文字に変換するには、スタイルのtext-transformプロパティの値を変えます。

スタイルのtext-transformプロパティの値をlowercaseにするとタグ内の文字が小文字になります。

<span style="text-transform:lowercase;">HELLO</span>

上記のコードでは、spanタグ内のHELLOという文字が、ブラウザ閲覧時にhelloと全て小文字で表示されます。

大文字に変換する方法

大文字に変換する場合にも、スタイルのtext-transformプロパティの値を変えます。

スタイルのtext-transformプロパティの値をuppercaseに変えるとタグ内の文字が大文字になります。

<span style="text-transform:uppercase;">hello</span>

上記のコードでは、spanタグ内のhelloという文字が、ブラウザ閲覧時にはHELLOと全て大文字で表示されます。

頭を大文字にする方法

頭文字のみを大文字に変換する際にも、スタイルのtext-transformプロパティで対応可能です。

スタイルのtext-transformプロパティの値をcapitalizeに変更するとタグ内の頭文字のみ大文字になります。

<span style="text-transform:capitalize;">hello</span>

上記のコードでは、spanタグ内のhelloという文字が、ブラウザ閲覧時にはHelloと先頭の文字のみ大文字で表示されます。