初級篇★ページ作りの基礎知識２. スタイルシートを使ってみよう

VOL７. フォントに関する設定　その2 ★ 太さと斜体、スモールキャピタルと大文字小文字の切替え

１．太さ

font-weight: <値>;

文字の太さは一般的にはキーワードで指定しますが、CSS仕様上では特定の数値を<値>に用いることもできます。

�@）キーワードで指定する

normal ... 標準の太さ

bold ... 太字

bolder ... 一段階太く

lighter ... 一段階細く

�A）数値で指定する

CSS仕様上では、太さに<値>として指定できる数値は「100、200、300、400、500、600、700、800、900」の9種類です。ただし、どのフォントでも詳細に反映されるわけではなく、現在のブラウザでは指定した値に応じて太さが変わらない場合も多いようです。キーワード「normal」に相等するのは「400」で、「bold」では「700」相等の太さになります。なお、「bolder」、「lighter」は理論上ではその部分だけ一段階太く、もしくは細く表示されることになっていますが、これも正しく反映されないことが多いのは数値の場合と同じです。このため、通常は「標準」か「太字」かの2通りで指定しておくのが無難でしょう。

ex. 

font-weight: bold;

font-weight: 400;

２．斜体

font-style: <値>;

文字を斜体で表示するためのプロパティには、「italic、oblique、normal」の3つが指定可能ですが、現在のブラウザでは一般に「italic」と「oblique」の間に厳密な区別はないようです。なお、デフォルトは「normal」なので、特に斜体で表示したい時のみ、このプロパティを書き込めば良いでしょう。

３．スモールキャピタル

font-variant: <値>;

スモールキャピタルとは、HTML上のテキストが小文字で書かれていてもサイズの小さい大文字で表示されることを言います。例えば、HTML上では記述が「roxy music」となっていても、スモールキャピタルが指定されていれば「ROXY MUSIC」と、通常の大文字の大きさよりもやや小さい文字で表示されることになります。

<値>として指定できるキーワードは「small-caps」と「normal」で、デフォルトは「normal」ですので、文字をスモールキャピタルに変換したい部分のみ、このプロパティを指定すれば良いでしょう。

４．大文字と小文字

text-transformation: <値>;

HTML上での入力状態に関わらず、画面上の表示を大文字、小文字で任意に切替えることができます。<値>に指定できるのは、以下の4つのキーワードです。

capitalize ... 各単語の1文字めを大文字で表示

uppercase ... 全ての文字を大文字で表示

lowercase ... 全ての文字を小文字で表示

none ... 入力されたままで表示（デフォルト）

初級篇2.VOL7. フォントに関する設定・その1 <<

>> 初級篇2.VOL7. フォントに関する設定・その3