TOP ＞ スタイルシートで文字をデザイン ＞ スモールキャップでアルファベットを表示する。
スモールキャップでアルファベットを表示する。
アルファベットをサイト上に表現する場合、大文字（ABCD）と小文字（abcd）があります。 基本的にはこの２つを利用することになります。
しかし、デザイン上、大文字を利用したいが、全文大文字では見難いといったケースもあります。
こんなとき、小文字の変わりに小さな大文字を表示することで問題を解決することが出来ます。これをスモールキャップと呼びます。
CSSではfont-variantプロパティを指定することで、スモールキャップ表示が可能になります。
スモールキャップでアルファベットを表示する。
【書き方】
スモールキャップにする： font-variant : small-caps;
スモールキャップを解除： font-variant : normal;
"スモールキャップでアルファベットを表示する"のサンプルはコチラをクリック
- サンプルページのコードは以下の通りです。
|
<html> <head> <title>スモールキャップでアルファベットを表示するのサンプル</title> <meta http-equiv="content-type" content="text/html"> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> <!-- .s1{ font-variant: small-caps; background-color: #ff9999;} .s2{ font-variant: normal; background-color: #9999ff;} --> </style> </head> <body bgcolor="silver"> <p>通常の設定であれば、My name is Taro.という風に小文字で表現されます。</p> <p>ところが、スモールキャップ属性を指定すると、<span class="s1">My name is Taro.</span>という風に表示されます。</p> <p>スモールキャップ属性を途中で解除することも出来ます。<span class="s1">My name is <span class="s2">Taro</span>.</span><br /> 上の例では、Taroの所だけスモールキャップを解除しています。</p> </body> </html> |
[
スタイルシートで文字をデザイン ]
