文字スタイル その1
文字の色や大きさ、フォントの種類をCSSで指定することができます。
フォントを指定する
ではまずフォントを指定してみましょう。フォントを指定するには font-familyのプロパティを使い、値にフォント名を記入します。
主なフォントの種類
フォントのグループを指定する場合
- serif
- serif：明朝系のフォント
- sans-serif
- sans-serif：ゴシック系のフォント
- cursive
- cursive：草書・筆記体系のフォント
- fantasy
- fantasy：装飾系のフォント
- monospace
- monospace：等幅系のフォント
フォントの名前で指定する場合
※ホームページを見ているパソコンに指定したフォントがない場合は反映されません。
- Arial
- Arialを指定
- Osaka
- Osakaを指定
- ＭＳ Ｐゴシック
- ＭＳ Ｐゴシックを指定
- impact
- impactを指定
- Century gothic
- Century gothicを指定
フォントは使用するパソコンに入っていないものを指定しても反映されません。ですからグループで指定するか、 複数指定（第一候補、第二候補...）する事が一般的です。
ではclassを使ってフォントを指定してみましょう。
<head>
<style type="text/css">
<!--
.font{
font-family:serif;
}
.font2{
font-family:"ＭＳ Ｐゴシック",sans-serif;
}
-->
</style>
<head>
<body>
<div class="font">グループで指定</div>
<div class="font2">ゴシックで複数指定</div>
</body>
</html>
フォントを複数指定する場合はカンマ（,）で区切って指定します。
もし第一候補がのフォントがない場合は次に指定したフォントで表示されます。
第二候補のフォントが無く第三候補が指定されてない場合は場合はブラウザのデフォルトの
フォントで表示されます。
フォントを日本語（全角）やスペースの入るフォント名（例:century gothic）で記入する場合は
"（ダブルコーテーション）か '（シングルコーテション）で
囲んで記入します。
クラス（クラス名は font ）を使って草書・筆記体系のフォント指定してみましょう。
CSS
.font{font-family:cursive;
}
HTML
<div class="font">草書・筆記体系のフォントを指定</div>フォントのサイズを指定する
HTML講座でも出てきたフォントのサイズをCSSで指定することが出来ます。フォントのサイズを指定するには font-sizeのプロパティを使い、値に数値+単位で記入する方法、 親要素のフォントサイズの何倍、何パーセントで指定する方法、キーワードサイズでの指定の方法の3種類の指定方法があります。
サイズの指定
- px
- ピクセル単位でサイズを指定
- em
- 親要素に対しての何倍かの指定
- xx-small
- 非常に小さい
- x-small
- 小さい
- small
- やや小さい
- medium-
- 通常のサイズ
- large
- やや大きい
- x-large
- 大きい
- xx-large
- 非常に大きい
pxでの指定が絶対指定に対して xx-smallからxx-large はブラウザでの設定サイズを中心に120%刻みで表示する相対指定となります。
ではclassを使ってフォントサイズを指定してみましょう。
<head>
<style type="text/css">
<!--
.font{
font-size:10px;
}
.font2{
font-size:x-large;
}
.font3{
font-size:1.5em;
}
-->
</style>
<head>
<body>
<div class="font">ピクセルで指定</div>
<div class="font2">ブラウザのサイズを中心に指定</div>
<div class="font3">親要素に対して1.5倍で指定</div>
</body>
</html>
pxとemはどのブラウザで見ても同じ大きさに表示されますが x-largeはブラウザの設定を変えると大きさが変化します。
クラス（クラス名は font ）を使って19ピクセルのフォントサイズを指定してみましょう。
CSS
.font{font-size:19px;
}
HTML
<div class="font">19pxのフォントサイズを指定</div>文字の色を変える
HTML講座でも出てきた文字色をCSSで指定することが出来ます。文字色指定するには colorのプロパティを使い、値に色名やRGB（例：#ffffff）を指定します。
| white | #FFFFFF | black | #000000 | gray | #808080 | lightgrey | #D3D3D3 |
|---|---|---|---|---|---|---|---|
| blue | #0000FF | skyblue | #87CEEB | steelblue | #4682B4 | midnightblue | #191970 |
| red | #FF0000 | maroon | #800000 | orange | #FFA500 | yellow | #FFFF00 |
| pink | #FFC0CB | hotpink | #FF69B4 | purple | #800080 | magenta | #FF00FF |
| green | #008000 | darkgreen | #006400 | greenyellow | #ADFF2F | olive | #808000 |
ではclassを使って文字色を指定してみましょう。
<head>
<style type="text/css">
<!--
.font{
color:#ADFF2F;
}
-->
</style>
<head>
<body>
<div class="font">文字色を指定</div>
</body>
</html>
クラス（クラス名は font ）を使って色の表にある好きな色を指定してみましょう。
CSS
.font{color:任意の色;
}
HTML
<div class="font">文字色を好きな色に指定しています。</div>その2では文字の装飾のCSSについて見ていきます。