ホームページ作成講座HAC Design

CSS　フォント

CSSでレイアウトをする場合フォントの装飾はHTMLで直接行ないません。
今までHTMLでのフォントの装飾はという形で、指定していました。

CSSでフォントのレイアウトをする場合はタグは使いません。

セレクタタグでフォントの色やスタイルを指定したり、さらに部分的に使用したい場合は、class指定で行ないます。たとえば、赤い文字にしたい文章などを使うか、HTMLに直接定義する場合は赤い文字にしたい文章という使い方をします。

ある程度使いたい文字色などが決まっていれば、CSSに組み込んでおくのがいいでしょう。

文字色などのスタイルを下記に例としてあげます。

.red {color: red; font-weight: normal}
.redb {color: red; font-weight: bold}
.redl {color: red; font-weight: bold; font-size: 16px}

classセレクタをつかって指定する場合の書き方です。

これをHTMLの文書に反映させるとこんな感じになります。

で囲った文字

で囲った文字

で囲った文字

CSSでは2種類の方法が一般的な色の指定方法です。

【数値で指定】

#000000 など#で始まる数字とアルファベットで表示される色。　例【color: #F0027F】
#FFF など3行で表示されるものがあります。　例【color: #000】

【色の名前で指定】

red　blue　yellow　などのカラーネームで指定。　例【color: red】　

フォントのサイズの指定は、px（ピクセル）などの単位で指定する場合と、x-smallなどでのキーワードで指定することができます。HTMLではなどで囲ってフォントのサイズを指定していましたが、CSSの場合はフォントの色の指定と同様classセレクタを使います。

px（ピクセル）などの単位で指定する場合はブラウザで文字を大きくすることができないので、あまり小さなサイズにしないように注意しましょう。

また、ブログ場合、文字のサイズ指定はx-smallなどでのキーワードで指定されていることが多いです。キーワードで指定されていてもpx（ピクセル）などの単位に置き換えても構いません。

文字の大きさの基準は下記のとおり。

フォントは、いくつもの書体があります。見出しにはゴシック体、本文には明朝体など、フォントの種類をかえることによって、文字による印象を変えることが可能です。

それは font-family としてCSSで指定できます。