のはこごと

モノヅクリノハコの中の人の雑記です

【HTMLとCSSの基礎の基礎講座】その17:フォント関係のCSS

17日目です。今回は【フォントに関わってくるCSS】についてです。

まず、大前提なのですが、各ブラウザは標準フォントサイズを定めています。

ブラウザにもよるのですが、だいたい16pxになっています。ですので<p>でくくった時、その<p>タグに関して何も指定していない時は、だいたい16pxなんだと思っていただければと思います。

 

さて、では早速。

font-size:値(数値+単位);

意味はまんまです、「フォントのサイズどうする?」です。

指定できる単位としては、px(ピクセル),mm(ミリ),%(パーセント),em(イーエム)があります。

em、聞きなれない数値ですね。これはMの字を基準にしたもので、M何文字分か?という相対的な指定をするのに使います。

 

よく使うのはpxとem、%はその次です。mmはwebには向きません。印刷用の時は大活躍ですけどね。

 

font-family:値;

具体的に指定したいフォント名を指定します。

MSゴシックのようにフォント名にスペースがある場合、”MS ゴシック"と書きます。(MSは全角ですのでお間違えないように)

フォント名で指定する方法と既存スタイルで設定する方法があります。

 

既存スタイル

serif→明朝体

sens-serif→ゴシック系

cursive→筆記系・草書体

fantasy→装飾系

monospace→等幅系(MSゴシック・MS明朝など)

 

ちっちゃくしても読みやすいのはゴシック系。

指定する際は、複数指定ができます。

先に書いた方から優先されて表示されます。

 

font-weight:値;

文字の太さを指定します。でもだいたいnormalかboldくらいしか使いません。

<strong>や<b>をHTMLに記述した場合と見た目は変わりませんが、中の意味がかなり変わってきますので、そこんとこご注意ください。

 

font-style:値;

イタリック体、斜体を表示します。normalとitalicくらいしか使いません。

そもそも日本語にはイタリック体はありません。

斜めに書く事ってあまり無いですもんね。

img

 書き方例です。

ま、pに対してこんなに色々付けることは少ないでしょうけどねw