にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

スモールキャップ(先頭は大きな大文字・続く文字は小さな大文字)を作るfont-variantプロパティ [テキスト]

英語には「先頭だけを大きな大文字」で掲載し、続く文字を(小文字ではなく)「小さな大文字」で表示する「スモールキャップ」というデザイン方法があります。このような「スモールキャップ」は、CSSのfont-variantプロパティを使うことでフォントサイズを自力で調整することなく簡単に実現できます。

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

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

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

変換: [Navi] Home / Info / Products / Tips / Blog / About / Link

通常: [Navi] Home / Info / Products / Tips / Blog / About / Link

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

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

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

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

font-variant: small-caps;

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

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

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

CSSソース

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

HTMLソース

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

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

MainMenu: FreeSoftwares / PC-Tips / CompanyInfo / AboutUs

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

HTMLソース

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

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

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


()

スタイルシートTipsふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)

--- 当サイト内を検索 ---