Text styles

この文書ではテキストスタイルについて、いくつかのサンプルを提示します。

サンプルスタイルシートを、異なるフォントを利用するように編集することになります。

解説: テキストスタイル

CSS はテキストのスタイルについていくつかのプロパティーを定義しています。

短い名前で簡単に利用できる font といういくつかの値を設定可能なプロパティーがあります。たとえば以下のものを設定できます。

• 太字、斜体、小さな大文字
• 文字サイズ
• 行間隔
• フォントフェース

p {font: italic 75%/125% "Comic Sans MS", cursive;}

フォントフェース

文書を読む人がどのようなフォントを持っているかを予測する必要があります。 つまり、フォントフェースを指定する場合、優先したい順に代替リストを指定するのがよいアイデアです。

そして、リストの最後をビルトインのデフォルトフェースのうちの一つにしましょう。: serif, sans-serif, cursive, fantasy や monospace (これらのいくつかはあなたのブラウザオプションの設定にあるものと一致するでしょう。)

もしフェースが文書中のいくつかの文字をサポートしていなければ、ブラウザは異なるフェースから借りてきます。たとえば、文書がフォントがサポートしていない特殊な文字を利用している場合などです。もし、ブラウザがそれらの文字をもつ他のフォントを発見した場合、そのフォントが利用されます。

フォントフェースのみを指定する場合、font-family プロパティーが利用できます。

フォントサイズ

Mozilla ブラウザの利用者は既定のフォントサイズをオプションで指定でき、また読んでいる途中にもサイズ変更が可能です。このため、どの部分でも相対サイズを指定する方がいいでしょう。

フォントサイズにはいくつかの既定値が利用可能です。small, medium そして large です。これら以外にも親要素との相対サイズとして、smaller, larger, 150% や 1.5 などの指定も可能です。

もし実サイズを指定する必要がある場合、12px (12 ピクセル) の書式を表示デバイスに、12pt (12 ポイント) の書式をプリンタ用に利用してください。このサイズは文字 m の幅を基準に指定ますが、フォントによっては指定したサイズと異なって表示されます。

フォントサイズのみを指定する場合、font-size プロパティーが利用できます。

行高さ

行高さは、行間の間隔を指定します。 たくさんの行を持つ長いパラグラフがある場合、特にフォントサイズが小さい場合などは、通常より広げることで読みやすくなります。

行高さのみを指定する場合、line-height プロパティーが利用できます。

装飾

text-decoration プロパティーで上記以外のスタイルを指定できます。たとえば、underline や line-through など。 この設定値を none にすることで追加の装飾をなしにできます。

そのほかのプロパティー

イタリック体にする場合、font-style: italic;
太字にする場合、font-weight: bold;
小さな大文字にする場合、font-variant: small-caps;

これらを独立になくす場合、値に normal か inherit を指定してください。

実例: フォントを指定する

簡単な文書では、BODY エレメントにフォントを設定して、残りではその設定を継承する形で設定します。

あなたの CSS ファイルを編集しましょう。 定義にフォントの設定変更を加えます。 CSS ファイルの先頭が論理的によい場所でしょうが、どこに置いても同じ効果です。

body {font: 16px "Comic Sans MS", cursive;}

ルールを延ばしてコメントを追加し、あなたの好みのレイアウトにするために空白を追加してください。

ブラウザ上で再読み込みして、適用してください。 もし、システムにある Comic Sans MS かそれ以外の cursive フォントがイタリック体をサポートしていなければ、ブラウザはそれ以外のイタリック体をサポートするフォントを先頭の行に適用するでしょう。

ブラウザのメニューバーから、表示 – 文字サイズ – 大きく、を選択してください。 16 ピクセルをスタイルで指定しましたが、文書を読むユーザが文字サイズを変更可能なことが分かるでしょう。

次は ?

あなたのサンプル文書は、すでにいくつかの名前付きの色を利用しています。 次のページでは、標準的な色の名前を列記し、それら以外をどのように指定するかについて述べます。 色