スモールキャップ(先頭は大きな大文字・続く文字は小さな大文字)のデザインを作るCSS

英語には「スモールキャップ」というデザイン方法があります。これは、「先頭だけを大きな大文字」で掲載し、続く文字を（小文字ではなく）「小さな大文字」で表示するデザインです。すべてのアルファベットが大文字なのですが、2文字目以降の文字には小さく(背を低く)した大文字を使うデザインです。メニュー項目や見出しにアルファベットを使う場合に、たまに見かける気がします。

このような「スモールキャップ」は、単純に先頭1文字のフォントサイズを大きくするだけでも実現できますが、もっとストレートにCSSのfont-variantプロパティを使うことで直接実現できます。例えば以下のようにです。

上記のサンプルでは、以下のように表示されているはずです。

• 上段は、font-variantプロパティを使ってスモールキャップで表示（＝「小文字」を「小さな大文字」に置き換え。つまり全部大文字で表記）
• 下段は、通常の表示（大文字は大文字、小文字は小文字で表示）

スモールキャップを作るfont-variantプロパティの書き方

このように、ソースに記述された「アルファベットの小文字」を「小さな大文字(スモールキャップ)」で表示させるには、CSSのfont-variantプロパティを以下のように記述します。

font-variant: small-caps;

値は「small-caps」なので、そのままです。とても簡単です。
上記の1行を指定するだけで、「小文字」がすべて「小さな大文字」で表示されます。
このfont-variantプロパティは、CSS1から存在するプロパティなので、かなり古いブラウザでも対応しています。例えば、IE6でも表示可能です。

スモールキャップ表示例を作るHTML＋CSSサンプルソース

先の表示例は、以下のようなHTML＋CSSソースで実現できます。

p {
   font-variant: small-caps;
   font-family: Verdana, sans-serif;
   font-size: 1.2em;
}

<p>
   [Navi] Home / Info / Products / Tips / Blog / About / Link
</p>

先にも述べましたが、似たようなデザインを作る方法として「先頭1文字だけのフォントサイズを大きくする」という手もあります。
しかし、その方法だと実際のソース内でも大文字で記述しておく必要があります。
font-variantプロパティなら、「ソース上に小文字で記述した箇所」がすべて変化するので、「先頭以外の場所」でも対象にできます。例えば以下のようにです。

上記は、以下のHTMLソースを表示したものです。

<p>
   MainMenu: FreeSoftwares / PC-Tips / CompanyInfo / AboutUs
</p>

このように、「小文字」だけが「小さな大文字」に変換されて表示されるため、先頭以外の場所でも大文字で記述されていれば大きいままで表示されます。

アルファベットを使って、メニュー項目や見出しを作る際などに便利に活用できそうです。

(更新日：2016年03月05日)