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

Pocket

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

スポンサーリンク


text-transform に設定できる値

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

キーワード表示内容
none通常表示
capitalize単語の先頭一文字のみ大文字に変換
uppercase大文字に変換
lowercase小文字にする

出力内容を確認するサンプル 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>

出力結果

i love you, OK
i love you, OK
i love you, OK
i love you, OK
小文字(日本語): あいうえお, OK

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

ぁぃぅぇぉ, ok?

スポンサーリンク

Pocket

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>