HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


文字の種類を指定する

CSSの書き方

font-family:値,値 … ;

CSSの詳細情報
プロパティ名 font-family 対応ブラウザ Windows MAC
読み方 フォントファミリー IE 5.0以上/FF1.0/NS7.1/OP8.0 SF/IE5.0
意味 フォントの種類 CSSレベル CSSレベル1
設定値 フォント名 対象 すべての要素
デフォルト ブラウザに依存 継承 する

解説

明朝体やゴシック体など、フォントの種類を変えるためのスタイルシートです。値として有効な指定は「固有のフォント名(MSゴシックなど)」、「フォントの大まかな種類(グループ)のみの指定」、「複数のフォントによる指定」の3種類の方法があります。

固有のフォント名で指定する

MSゴシック、Arialなど個別のフォントを指定する方法です。指定したフォントが閲覧している人のパソコンにインストールされていた場合、ブラウザは該当のフォントで表示します。一方、指定したフォントが用意されていない場合、最も似たフォントで表示されます。

フォント名を直接指定するこの場合では、フォント名は正しく記述する必要があります。例えば、「大文字/小文字」、「全角/半角」、「スペース」も一字一句同じにする必要があります。

フォントの大まかな種類(グループ)のみの指定

多くのフォントを大まかな種類に分け、そのグループ名で指定する方法です。特定のフォントを指定しているわけではないので、そのグループに属するフォントが一つでもあれば、自動的に選ばれて表示されます。スタイルシートではフォントグループを以下のように定めています。以下のグループ名を一つまたは複数、値に記述します。

フォントグループ
設定値 グループ内容
serif 明朝系(飾りのある)フォント
sans-serif ゴシック系(飾りのない)フォント
fantasy 装飾系フォント
cursive 草書体系フォント
monospace 等幅系フォント

複数のフォントによる指定

固有のフォント名やフォントのグループ名を複数記述する指定方法です。記述順に優先度が低くなります。最初に書いたフォントがない場合は2番目のフォントに、2番目がなければ3番目に…のような順序にフォントが選ばれます。従って、フォントの取りこぼしがないように、最初は「固有のフォント名」で書き始めて、後に「フォントのグループ名」を書くのが一般的です。

なお、複数記述する場合は「フォント名,グループ名」のように名前同士を「,(半角カンマ)」で区切ります。

ref,アクセシビリティを考えたフォント指定

CSS/HTMLサンプル

body { font-family:Verdana,Arial,Helvetica,sans-serif; }

BDOY要素にフォントの種類を複数指定する サンプル