• トップページ
  • CSS編
  • フォント関連(color、font-size、font-weight、font-family、font-style、font-variant)プロパティの仕様と使い方

フォント関連(color、font-size、font-weight、font-family、font-style、font-variant)プロパティの仕様と使い方

カテゴリ:CSS編

フォントに関する主なプロパティは以下となります。
よく使用するものはcolorfont-sizefont-familyになるでしょう。

フォント関連プロパティ
プロパティ名 説明
color 文字色
font-size 文字のサイズ
font-weight 文字の太さ
font-family 文字の種類
font-style 文字のスタイル
font-variant 大文字を小文字サイズで表示(スモールキャップ)
line-height 行間

color

文字色をカラーネームもしくはカラーコードで指定します。

カラーネーム、カラーコードについてはカラーネーム・カラーコード一覧をご参照ください。

例)
カラーネームによる指定:

p.font-color-1 {
    color: red;
}

カラーコードによる指定:

p.font-color-2 {
    color: #0066FF;
}
p.font-color-3 {
    color: rgb(0,206,209);
}

font-size

文字の大きさをキーワードもしくは単位で指定します。
大きさの単位は一般的に、pxem%が用いられます。

使用できる単位についてはCSSで使用できる単位をご参照ください。

キーワード

font-sizeで指定できるキーワード
キーワード説明サンプル
xx-small 10px相当

Fontサンプル

x-small 10px相当

Fontサンプル

small 13px相当

Fontサンプル

medium 16px相当(標準)

Fontサンプル

large 19px相当

Fontサンプル

x-large 24px相当

Fontサンプル

xx-large 32px相当

Fontサンプル

smaller 一段階小さく

Fontサンプル

larger 一段階大きく

Fontサンプル

例)
キーワードによる指定:

p.font-size-1 {
    font-size: large;
}

pxによる指定:

p.font-size-2 {
    font-size: 20px;
}

font-weight

文字の太さをキーワードもしくは数値で指定します。

キーワード

font-weightで指定できるキーワード
キーワード説明サンプル
normal 標準(400相当)

Fontサンプル

bold 太字(700相当)

Fontサンプル

lighter 一段階細く

Fontサンプル

bolder 一段階太く

Fontサンプル

例)
キーワードによる指定:

p.font-weight-1 {
    font-weight: bold;
}

数値による指定:

p.font-weight-2 {
    font-weight: 800;
}

font-family

フォント名もしくはフォントの種類を指定します。
カンマ区切りで複数指定した場合、先頭から優先的に利用可能なフォントが選択されます。
フォント名にスペースが含まれる場合はシングルクォートダブルクォートで囲みます。

クライアントOSによって持っているフォントが異なるため、典型的には各OSごとに見た目が近いフォントを指定します。そうすることでWindows環境で見た場合とmacOS環境で見た場合とで、できるだけ違和感がないように表示する事ができます。

参考なお、すべてのプラットフォームでフォントを統一する手法としてWebフォントを使用する方法があります。

フォント名

各OSの代表的なフォントは以下になります。

代表的なフォント
OSフォント名サンプル
macOS系 ヒラギノ角ゴ ProN W3

Fontサンプル

Windows系 メイリオ

Fontサンプル

MS Pゴシック

Fontサンプル

font-familyで指定できるフォントの種類

フォントの種類で指定した場合、Webブラウザ側で設定されている指定した種類に対応したフォントが選択されます。
つまりOSやWebブラウザでどのフォントが使用されるかが異なります。
例えばsans-serifの場合、Windows 10 の Microsoft Edge ではメイリオ、macOS の safari ではヒラギノ角ゴ ProNが選択されます。

代替フォントとも呼ばれ、通常はフォント名の後に(最後に)指定します。

フォントの種類
キーワード説明サンプル
sans-serif ゴシック体

Fontサンプル

serif 明朝体

Fontサンプル

cursive 筆記体・草書体

Fontサンプル

fantasy 装飾的

Fontサンプル

monospace 等幅

Fontサンプル

例)

body {
    font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'MS Pゴシック', sans-serif;
}

font-style

文字のスタイル(文字の傾き)をキーワードで指定します。
日本語では斜体を使用する文化はなく、メイリオなどイタリック体や斜体が用意されていない日本語フォントもあります。その場合は書体は変わりません(標準書体のまま)。
以下のサンプルのようにMS Pゴシックではイタリック体や斜体で表示されているのに対し、メイリオの場合、イタリック体や斜体が反映されていないのが分かります。

font-styleで指定できるキーワード
キーワード説明MS Pゴシックメイリオ
normal 標準(初期値)

Fontサンプル

Fontサンプル

italic イタリック体

Fontサンプル

Fontサンプル

oblique 斜体

Fontサンプル

Fontサンプル

例)
イタリック体を指定:

p.font-style-1 {
    font-style: italic;
}

斜体を指定:

p.font-style-2 {
    font-style: oblique;
}

Note MS Pゴシックのように「イタリック体」と「斜体」の両方が用意されていないフォントの場合、「イタリック体」も「斜体」同じ書体になります。

font-variant

font-variantは日本ではあまり馴染みのないプロパティですが、small-capsのキーワードを指定した場合、小文字部分を小文字サイズの大文字(スモールキャップ)で表示します。
以下のサンプルでは、Fontのont部分が小文字サイズの大文字になっていることが分かります。

font-variantで指定できるキーワード
キーワード説明サンプル
normal 標準

Fontサンプル

small-caps スモールキャップ表示

Fontサンプル

例)
スモールキャップを指定:

p.font-variant-1 {
    font-variant: small-caps;
}

以上、フォント関連のプロパティを解説いたしました。

公開日時: 2019年06月22日  14:47:13

本格的なスキルを身につける

オンラインによるWebプログラミングスクールの無料レッスンを受けてみたい方はTechAcademyの無料体験がおすすめですよ。

CSS編に戻る

「CSS編」に関する他の手順
「CSS編」に関するTips

「CSS編」に関するTipsはありません。

このページのトップに戻る