初心者のためのWEBデザイナーの教科書

フォントに関するプロパティ

フォントの種類

font-familyに指定できる値

「フォント名」または「総称フォントファミリー名」を指定します。ユーザーの環境によって表示するフォントの種類が異なりますので、複数のフォントを指定するのが一般的です。また、特別に見せ方への拘り、デザイン的な事由などの事情を除き、ゴシック体で表示させるのが一般的です。
また、iPhoneが主としているブラウザ「safari」は、デフォルトでは「明朝体」を表示する仕様となっていますので、font-familyの記述が必須と言えます。

【フォント名】
特定のフォント名を指定し、(ダブルクォーテーション)または(シングルクォーテーション)で記述します。
“MS ゴシック”
“Osaka”
【総称フォントファミリー名】
同じようなスタイルに属する総称(グループ名)です。

sans-serif
ゴシック体フォント(セリフのない書体)
serif
明朝体系フォント(セリフがある書体・書体部に太細がある。)

【明朝体です】
こんにちわ。今日は、いいお天気ですね。
でもあしたは雨みたいですよ。

フォントのサイズ

文字列のサイズを指定します。値には、文字列のサイズを「数値+単位」で指定するか「絶対サイズのキーワード」で指定する方法もあります。

「小さい文字で表現」やだ すごおくちっこいですね。

【文字の単位について】

px (ピクセル) 数値に px の単位をつけて指定します。px とは1ピクセルを1とする単位で,実際に表示されるサイズは 72dpi や 96dpi といったモニタの解像度により変化します。
em (エム) 数値に em の単位をつけて指定します。em とは現在使用中の標準フォントの高さを1とする単位です。
ex (エックスハイト) 数値に ex の単位をつけて指定します。ex とは現在使用中の標準フォントの小文字の「x」の高さを1とする単位です。
% (パーセント) 親要素のフォントのサイズを基準にして割合を%値で指定します。

【サイズに関するキーワード】

xx-large 最も大きいサイズ
x-large
large
medium 標準サイズ(初期値)
14~16pxになっている場合が多い
small 小さいサイズ
x-small
xx-small 最も小さいサイズ

※フォントの大きさは、環境によってかなり異なります。何も指定のないデフォルト(標準)サイズは、14~16pxになっている場合が多いが、明確に特定できないのが現状です。

【その他】

普段よく使うmmやcmセンチメートルなどの絶対指定による単位は、cssでは使いません。また、近年のウェブは、多様なデバイス環境で見ることが増えているので、パーセンテージを指定することが増えている傾向にあります。


フォントの太さ

太字にする
font-weight:bold;

【値について】
normal …… 標準の太さ。
bold …… 一般的な太字で表示
lighter …… 相対的に一段階細く表示します。
bolder …… 相対的に一段階太く表示します。
100~900・・100刻みで指定する方法もあります。(ブラウザによっては指定不可)


フォントスタイル

フォントを斜体にする
font-style:italic

【値について】
normal・・標準フォント(斜体にしない)で表示します。
italic・・イタリック体フォントで表示します。
oblique・・斜体フォントで表示します。