contents

CSS リファレンス編

フォント

font-family

【説 明】

フォントファミリ名を指定します。指定したフォントファミリがインストールされていない環境を想定して、複数のフォントファミリを「,」で区切って指定することができます。その場合は、より左側に記述されたフォントファミリで、インストールされているものが採用されます。インストールされているフォントに該当するものが無い場合には、デフォルトのフォントで表示されます。フォントの種類については、Appendix の「フォント名とサンプル(Mac・Win)」を参照してください。

「フォントファミリ」とは、同じタイプフェイスでデザインされているが、異なるフォントスタイルやサイズ、太さのフォントも含むフォントセットのことを言います。
例えば、Macintosh の「Times」はフォントファミリ名で、「Times」「Times 9」「Times 10」「Times 12」「Times 14」「Times italic」「Times bold」などのそれぞれにデザインされたフォントが含まれています。

名前にスペースを含むフォントファミリを指定する場合には、必ず「"」または「'」で囲って指定します。


【 値 】

●フォントファミリの名前で指定

フォントファミリの名前で直接指定します。

●一般的な種類で指定

一般的なフォントファミリの種類として、以下の5つが定義されています。指定した種類に属する、インストールされているフォントファミリが採用されます。

・serif     例)Times

・sans-serif   例)Helvetica

・cursive    例)Zapf-Chancery

・fantasy    例)Western

・monospace   例)Courier


【使用例】

以下の例では、最初の2つにフォントファミリ名、最後に一般的な種類(serif)を指定しています。「New York」は、名前にスペースを含んでいますので、「"」で囲って記述します。

この場合、「New York」がインストールされていなければ「Times」を、それもなければ「serif」を、という順序で採用されます。

P { font-family: "New York", Times, serif }


font-style

【説 明】

フォントのスタイルを指定します。「normal」「italic」「oblique」の3種類のスタイルが定義されています。


【 値 】

normal

標準のフォントを指定します。現在のフォントファミリ中の標準のもの(種類によっては「roman」または「upright」)が採用されます。

italic

イタリックのフォントを指定します。現在のフォントファミリの中の「italic」が採用されます。フォントファミリ中に「italic」が無い場合は「oblique」が指定されたことになります。

oblique

斜体のフォントを指定します。現在のフォントファミリの中の「oblique」が採用されます。フォントファミリ中に「oblique」が無い場合は、「normal」のフォントを斜体に変形して表示します。


【使用例】

以下の例では「H1」に「italic」を指定しています。「H1」の範囲で「EM」タグを使用すると、その部分だけが標準のフォントで表示されます。

H1 { font-style: italic }
H1 EM { font-style: normal }


font-variant

【説 明】

フォントのバリエーションを指定します。現在のところ「normal」か「small-caps」のみが指定可能です。


【 値 】

normal

標準のフォントを指定します。現在のフォントファミリ中の標準のものが採用されます。

small-caps

「small-caps」のフォントを指定します。「small-caps」とは、小文字が大文字のように(少し小さい)表示されるタイプのフォントです。フォントファミリ中に「small-caps」が無い場合は、そのフォントの大文字で表示されます。


【使用例】

以下の例では、「H2」が「small-caps」で表示されます。

H2 { font-variant: small-caps }


font-weight

【説 明】

フォントの太さを指定します。「normal」「bold」の他に、相対的な指定や9種類の絶対的な指定をすることもできます。


【 値 】

normal

標準のフォントを指定します。現在のフォントファミリ中の標準の太さのものが採用されます。「400」を指定した場合も同様の結果になります。

bold

「bold」のフォントを指定します。「700」を指定した場合も同様の結果になります。

bolder

現在のフォントの太さより、フォントファミリ中で一段階太いフォントを指定します。

lighter

現在のフォントの太さより、フォントファミリ中で一段階細いフォントを指定します。

100 200 300 400 500 600 700 800 900

フォントの太さを100〜900の数字で指定します。「400」は「normal」と同様の太さ、「700」は「bold」と同様の太さになります。実際にそのフォントファミリに9種類の太さのフォントがない場合には、「100〜300」は「lighter」、「400, 500」は「normal」、「600〜900」は「bold」または「bolder」として扱われます。


【使用例】

以下の例では「P」タグに「標準」、「STRONG」タグに「bold」を指定しています。

P { font-weight: normal }
STRONG { font-weight: bold }


font-size

【説 明】

フォントのサイズを指定します。


【 値 】

●絶対サイズで指定

以下の7種類のサイズが指定できます。「medium」が標準のサイズです。「xx-small」から「xx-large」へ、それぞれ約1.5倍の大きさになっています。

・xx-small
・x-small
・small
・medium
・large
・x-large
・xx-large

●相対サイズで指定

以下の2種類のサイズが指定できます。現在有効なサイズより「大きく」または「小さく」表示します。例えば、現在のサイズが「medium」の場合、「larger」を指定すると「large」の大きさになります。

・larger
・smaller

●数値で直接指定

ポイントやミリメートルなどの単位をつけて、数値でサイズを直接指定します。指定できる数値と単位については、「CSS解説編 数値の単位」を参照してください。

●パーセントで指定

現在有効なサイズに対するパーセントで指定します。「Internet Explorer 3.0」は、デフォルトのフォントサイズに対するパーセントで表示されるようですが、これは「CSS1」の仕様とは異なります。

Example


【使用例】

以下の例では、「H1」を標準の約1.5倍の「large」サイズで、「EM」をそこで有効なサイズの120%のサイズで、「P」を12ポイントで表示します。

H1 { font-size: large }
EM { font-size: 120% }
P { font-size: 12pt }


font

【説 明】

「font」プロパティを使用すると、フォントに関連する様々な指定を一度に行うことができます。以下に記述するプロパティが指定できます。


【 値 】

以下の順(最初の3つのみ任意の順序可)にそれぞれのプロパティの値をスペースで区切って指定します。「font-size」と「font-family」以外は省略することができます。「line-height」を指定する場合には、前に「/」をつけて指定しますが、それ以外はそれぞれのプロパティの指定方法と同様に記述することができます。

・font-style  [省略可]

・font-variant [省略可]

・font-weight  [省略可]

・font-size

・/line-height [省略可]

・font-family


【使用例】

以下の例では、「P」タグに12ポイントで「serif」のフォントを指定しています。

P { font: 12pt serif }


以下の例では、「P」タグにフォントサイズが12ポイントで行間は14ポイント、フォントファミリに「Times」「serif」のフォントを指定しています。

P { font: 12pt/14pt Times, serif }


以下の例では、「P」タグにイタリックでボールド、フォントサイズが12ポイントで行間は15ポイント、フォントファミリに「serif」のフォントを指定しています。

P { font: italic bold 12pt/15pt serif }