[ HTML ] 文字を全て大文字（小文字）に変換する ( text-transform )

Tweet

Pocket

HTML のスタイルに text-transform を設定することで、表示する文字列を全て大文字に、または小文字に変換することができます。ここでは、実際にブラウザで出力させて確認しています。

text-transform に設定できる値

text-transform に設定できる値と、出力される内容の一覧になります。

出力内容を確認するサンプル HTML

<div style="text-transform: none;">none : i love you, OK</div>
<div style="text-transform: capitalize;">capitalize : i love you, OK</div>
<div style="text-transform: lowercase;">lowercase : i love you, OK</div>
<div style="text-transform: uppercase;">uppercase : i love you, OK</div>
<div style="text-transform: lowercase;">小文字（日本語）: あいうえお, OK</div>

出力結果

上記の結果より、英字に関しては期待する動作となっていることがわかります。念のため日本語でも試してみましたが、予想を裏切られることなく効果がないことが確認できました。

ぁぃぅぇぉ, ok?

Tweet

Pocket