ホーム＞コース別ガイド一覧＞フォントの種類を指定しましょう！
フォントの種類を指定しましょう！（font-family プロパティ） |
 
|
使用プロパティ セレクタ { font-family: 文字種類; }
CSS一覧プロパティ辞典 … font-family プロパティ
font-family プロパティを使うと、文字のフォントの種類を指定できます。値には「ＭＳ 明朝」などの具体的なフォント名や「serif」などのキーワードを指定できます。キーワードは、ブラウザーが対応するフォントを自動的に同じ種類の中から選択されます。
※フォント名は全角や半角、スペースなど正確に記述する必要があるので注意しましょう！
font-familyプロパティの値
| キーワード（分類） |
フォント名 |
serif（ひげ付文字、明朝系）
|
ＭＳ Ｐ明朝、Times New Roman、Garamond、MS Georgia |
| sans-serif（ひげなし文字、ゴシック系） |
ＭＳ Ｐゴシック、Helvetica、Arial、Verdana、Osaka |
| cursive（筆記体） |
Caflisch Script、ex ponto、Adobe Poetica |
| fantasy（飾り文字） |
Critter、Cottonwood、studz |
| monospace（等幅フォント） |
Courier、MS Courier New、Osaka-等幅 |
※この他、数多くのフォント名の種類が存在します。
「ひげ付き文字」、「ひげなし文字」とは？！
- serif （ひげ付き文字、明朝系） -
例 ABCDXYZ abcdxyz あいうえお ABCDXYZ abcdxyz あいうえお
下のサンセリフと比べればわかると思いますが、セリフのあるセリフ体（日本語では明朝体など）は、アルファベットにひげのようなものが付いていて、日本語の明朝体などでは習字のような文字になります。
- sans-serif （ひげなし文字、ゴシック系）-
例 ABCDXYZ abcdxyz あいうえお ABCDXYZ abcdxyz あいうえお
上のセリフと比べればわかると思いますが、セリフのないサンセリフ体（日本語ではゴシック体など）は、アルファベットにひげのようなものが付かず、日本語の明朝体などではやわらかな文字になります。
フォント名に半角空白が含まれる場合
「ＭＳ Ｐゴシック」のようにフォント名に半角空白が含まれる場合は「'（シングルクォーテーション）」「"（ダブルクォーテーション）」で「"ＭＳ Ｐゴシック"」のようにフォント名を囲んでください。
複数指定の場合はカンマで区切る！
font-family プロパティは複数フォントを同時に指定できます。その場合は「,」カンマで区切って指定します。フォントによってブラウザやパソコンごとに対応しているフォントが異なる場合がありますので、具体的なフォント名を指定した後にキーワードで一般的なフォントの種類を指定すると効果的です。
優先順位は左から！
左側に書かれているフォント名が優先されるので、優先したいフォント名を左側に、最後にフォントの種類を指定しましょう！フォントの種類はブラウザが対応するフォントを自動的に同じ種類の中から選択されます。また、指定されたフォントがユーザーのパソコンに存在しない場合は、ユーザーのブラウザで表示が可能なものが採用されます。
cursive と fantasy は反映されない！
cursive、fantasy は、現時は一般的なブラウザで具体的なフォントが割り当てられていないため、この２つのフォントの種類（キーワード）指定しても効果はありません。
このように注意する点がたくさんあり、人によっては少し指定しづらいプロパティかもしれませんが、まずは自分で指定しやすいCSSデザインを指定し、慣れた後で理解し辛いプロパティを学ぶのも一つの手です！その場合はこの項目を飛ばし、次に進みましょう！
使用例
この使用例は、コピーライト部分の p 要素に「copy」というクラス名を付け、head 要素内でフォントを変えています。また、font-family プロパティの値には「"ＭＳ Ｐ明朝"」と「serif」を使用しています。
記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
<style type="text/css">
span { font-weight: bold;}
p .copy { font-family: "ＭＳ Ｐ明朝", serif; }
</style>
</head>
<body>
<h1>簡単に作れるワンポイント料理</h1>
<p>料理を少しおいしくするための<br>
<span>ワンポイント</span>ワンポインを紹介します！</p>
<p>おいしいチャーハンの作り方</p>
<p class="copy">Copyright © 2007 TomMY. All Rights Reserved. </p>
</body>
</html>
|
|
使用例の表示
[font-familyプロパティ適応前のブラウザでの表示例]
| 一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理
料理を少しおいしくするための
ワンポイントを紹介します！
おいしいチャーハンの作り方
Copyright © 2007 TomMY. All Rights Reserved. |
|
 |
[font-familyプロパティ適応後のブラウザでの表示例]
| 一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理
料理を少しおいしくするための
ワンポイントを紹介します！
おいしいチャーハンの作り方
Copyright © 2007 TomMY. All Rights Reserved. |
|
このように、コピーライト部分が serif （ひげ付文字、明朝系）に変更されました！
