[ HTML CSS ] 英小文字をサイズの小さな英大文字に変換する ( スモールキャピタル )

Pocket

英文字をスモールキャピタルにするには font-variantsmall-capsを指定します。言葉だけでは説明しにくいのですが、スモールキャピタルとは、”abc” といった英小文字を小さな英大文字 “abc” に変換して出力することをいいます。

ここでは、スモールキャピタルがどのような文字に影響するかサンプルを掲載して確認しています。

スポンサーリンク


スモールキャピタル( font-variant: small-caps )の出力例

<div style="font-variant: small-caps;">ABCabcABCabcあおいうえか012012</div>

出力結果

ABCabcABCabcあおいうえか012012

上記のように、英小文字以外はそのまま出力されていることが確認できます。半角および全角でも英小文字であれば、小さなサイズの大文字になっています。

なお、少々古い情報ですが、Opera12 では全角文字や数値についても小さく表示されるようですので、ブラウザによっても出力結果は異なる可能性があります。

管理人が珍しく読んだ本の紹介

本も良いですが、やはり実践あるのみだと思います。とにかく実績で感覚を覚えましょう。そして、ちゃんと考えるようにすることで大きく伸びると思います。スポーツも、勉強も、プログラミングも何でも同じです。

また、電子書籍も良いとは思いますが、わたしは目がかすみます。「 老眼だね 」 って眼科で言われました。気分だけは若いつもりですが、肉体的な衰えは日に日に感じます。残念です。

スポンサーリンク

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>