フォント関連のCSSプロパティ

Articles

CSS入門

フォント関連のCSSプロパティ

この記事ではフォント関連のCSSプロパティについて説明します。

font-styleやfont-familyなどのプロパティについて、利用用途や記述の仕方を学べます。

YouTube Video

プレビュー用のHTMLの作成

css-font.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-font.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Font-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Typography (Font-Related)</h2>
 20        </header>
 21        <article>
 22            <h3>font-size</h3>
 23            <section>
 24                <h4>Absolute Values</h4>
 25                <header><h4>font-size: 16px</h4></header>
 26                <section class="sample-view">
 27                    <p class="font-size-px">Font size: 16px</p>
 28                </section>
 29                <header><h4>font-size: 12pt</h4></header>
 30                <section class="sample-view">
 31                    <p class="font-size-pt">Font size: 12pt</p>
 32                </section>
 33            </section>
 34            <section>
 35                <h4>Relative Values</h4>
 36                <header><h4>font-size: 1.2em</h4></header>
 37                <section class="sample-view">
 38                    <p class="font-size-em">Font size: 1.2em</p>
 39                </section>
 40                <header><h4>font-size: 1.5rem</h4></header>
 41                <section class="sample-view">
 42                    <p class="font-size-rem">Font size: 1.5rem</p>
 43                </section>
 44                <header><h4>font-size: 150%</h4></header>
 45                <section class="sample-view">
 46                    <p class="font-size-percent">Font size: 150%</p>
 47                </section>
 48            </section>
 49            <section>
 50                <h4>Keywords</h4>
 51                <header><h4>font-size: small</h4></header>
 52                <section class="sample-view">
 53                    <p class="font-size-small">Font size: small</p>
 54                </section>
 55                <header><h4>font-size: medium%</h4></header>
 56                <section class="sample-view">
 57                    <p class="font-size-medium">Font size: medium (default)</p>
 58                </section>
 59                <header><h4>font-size: large</h4></header>
 60                <section class="sample-view">
 61                    <p class="font-size-large">Font size: large</p>
 62                </section>
 63                <header><h4>font-size: x-large</h4></header>
 64                <section class="sample-view">
 65                    <p class="font-size-x-large">Font size: x-large</p>
 66                </section>
 67            </section>
 68            <section>
 69                <h4>Relative Keywords</h4>
 70                <header><h4>font-size: smaller</h4></header>
 71                <section class="sample-view">
 72                    <p class="font-size-smaller">Font size: smaller</p>
 73                </section>
 74                <header><h4>font-size: larger</h4></header>
 75                <section class="sample-view">
 76                    <p class="font-size-larger">Font size: larger</p>
 77                </section>
 78            </section>
 79        </article>
 80        <article>
 81            <h3>font-family</h3>
 82            <section>
 83                <h4>Specific Font Names</h4>
 84                <header><h4>font-family: Arial, sans-serif</h4></header>
 85                <section class="sample-view">
 86                    <p class="font-family-arial">Font Family Arial</p>
 87                </section>
 88                <header><h4>font-family: Verdana, sans-serif</h4></header>
 89                <section class="sample-view">
 90                    <p class="font-family-verdana">Font Family Verdana</p>
 91                </section>
 92                <header><h4>font-family: "Times New Roman", serif</h4></header>
 93                <section class="sample-view">
 94                    <p class="font-family-times">Font Family Times New Roman</p>
 95                </section>
 96                <header><h4>font-family: "Courier New", monospace</h4></header>
 97                <section class="sample-view">
 98                    <p class="font-family-courier">Font Family Courier New</p>
 99                </section>
100                <header><h4>font-family: Georgia, serif</h4></header>
101                <section class="sample-view">
102                    <p class="font-family-georgia">Font Family Georgia</p>
103                </section>
104            </section>
105            <section>
106                <h4>Generic Font Families</h4>
107                <header><h4>font-family: serif</h4></header>
108                <section class="sample-view">
109                    <p class="font-family-serif">Font Family Serif</p>
110                </section>
111                <header><h4>font-family: sans-serif</h4></header>
112                <section class="sample-view">
113                    <p class="font-family-sans-serif">Font Family Sans-Serif</p>
114                </section>
115                <header><h4>font-family: monospace</h4></header>
116                <section class="sample-view">
117                    <p class="font-family-monospace">Font Family Monospace</p>
118                </section>
119                <header><h4>font-family: cursive</h4></header>
120                <section class="sample-view">
121                    <p class="font-family-cursive">Font Family Cursive</p>
122                </section>
123                <header><h4>font-family: fantasy</h4></header>
124                <section class="sample-view">
125                    <p class="font-family-fantasy">Font Family Fantasy</p>
126                </section>
127            </section>
128        </article>
129        <article>
130            <h3>font-weight</h3>
131            <section>
132                <h4>Keyword Values</h4>
133                <header><h4>font-weight: normal</h4></header>
134                <section class="sample-view">
135                    <p class="font-weight-normal">Font weight: normal</p>
136                </section>
137                <header><h4>font-weight: bold</h4></header>
138                <section class="sample-view">
139                    <p class="font-weight-bold">Font weight: bold</p>
140                </section>
141                <header><h4>font-weight: bolder</h4></header>
142                <section class="sample-view">
143                    <p class="font-weight-bolder">Font weight: bolder</p>
144                </section>
145                <header><h4>font-weight: lighter</h4></header>
146                <section class="sample-view">
147                    <p class="font-weight-lighter">Font weight: lighter</p>
148                </section>
149            </section>
150            <section>
151                <h4>Numeric Values</h4>
152                <header><h4>font-weight: 100</h4></header>
153                <section class="sample-view">
154                    <p class="font-weight-100">Font weight: 100 (Thin)</p>
155                </section>
156                <header><h4>font-weight: 200</h4></header>
157                <section class="sample-view">
158                    <p class="font-weight-200">Font weight: 200 (Extra Light)</p>
159                </section>
160                <header><h4>font-weight: 300</h4></header>
161                <section class="sample-view">
162                    <p class="font-weight-300">Font weight: 300 (Light)</p>
163                </section>
164                <header><h4>font-weight: 400</h4></header>
165                <section class="sample-view">
166                    <p class="font-weight-400">Font weight: 400 (Normal)</p>
167                </section>
168                <header><h4>font-weight: 500</h4></header>
169                <section class="sample-view">
170                    <p class="font-weight-500">Font weight: 500 (Medium)</p>
171                </section>
172                <header><h4>font-weight: 600</h4></header>
173                <section class="sample-view">
174                    <p class="font-weight-600">Font weight: 600 (Semi Bold)</p>
175                </section>
176                <header><h4>font-weight: 700</h4></header>
177                <section class="sample-view">
178                    <p class="font-weight-700">Font weight: 700 (Bold)</p>
179                </section>
180                <header><h4>font-weight: 800</h4></header>
181                <section class="sample-view">
182                    <p class="font-weight-800">Font weight: 800 (Extra Bold)</p>
183                </section>
184                <header><h4>font-weight: 900</h4></header>
185                <section class="sample-view">
186                    <p class="font-weight-900">Font weight: 900 (Black)</p>
187                </section>
188            </section>
189        </article>
190        <article>
191            <h3>font-style</h3>
192            <section>
193                <h4>Keyword Values</h4>
194                <header><h4>font-style: normal</h4></header>
195                <section class="sample-view">
196                    <p class="font-style-normal">This is normal font style.</p>
197                </section>
198                <header><h4>font-style: italic</h4></header>
199                <section class="sample-view">
200                    <p class="font-style-italic">This is italic font style.</p>
201                </section>
202                <header><h4>font-style: oblique</h4></header>
203                <section class="sample-view">
204                    <p class="font-style-oblique">This is oblique font style.</p>
205                </section>
206                <header><h4>font-style: oblique 20deg</h4></header>
207                <section class="sample-view">
208                    <p class="font-style-oblique-20deg">This is an oblique font style with a 20-degree angle.</p>
209                </section>
210            </section>
211        </article>
212        <article>
213            <h3>color</h3>
214            <section>
215                <h4>Color Property Examples</h4>
216                <header><h4>color: red</h4></header>
217                <section class="sample-view">
218                    <p class="color-red">This text is red using a keyword.</p>
219                </section>
220                <header><h4>color: #FF5733</h4></header>
221                <section class="sample-view">
222                    <p class="color-hex">This text is displayed with a hex color code (#FF5733).</p>
223                </section>
224                <header><h4>color: rgb(255, 87, 51)</h4></header>
225                <section class="sample-view">
226                    <p class="color-rgb">This text is displayed using RGB (rgb(255, 87, 51)).</p>
227                </section>
228                <header><h4>color: rgba(255, 87, 51, 0.7)</h4></header>
229                <section class="sample-view">
230                    <p class="color-rgba">This text is displayed using RGBA with transparency (rgba(255, 87, 51, 0.7)).</p>
231                </section>
232                <header><h4>color: hsl(14, 100%, 60%)</h4></header>
233                <section class="sample-view">
234                    <p class="color-hsl">This text is displayed using HSL (hsl(14, 100%, 60%)).</p>
235                </section>
236                <header><h4>color: hsla(14, 100%, 60%, 0.7)</h4></header>
237                <section class="sample-view">
238                    <p class="color-hsla">This text is displayed using HSLA with transparency (hsla(14, 100%, 60%, 0.7)).</p>
239                </section>
240            </section>
241        </article>
242    </main>
243</body>
244</html>

タイポグラフィ（フォント関連）

`font-size`プロパティ

 1/* Absolute Values */
 2.font-size-px {
 3    font-size: 16px;
 4}
 5
 6.font-size-pt {
 7    font-size: 12pt;
 8}
 9
10/* Relative Values */
11.font-size-em {
12    font-size: 1.2em; /* 120% of the parent font size */
13}
14
15.font-size-rem {
16    font-size: 1.5rem; /* 150% of the root element's font size */
17}
18
19.font-size-percent {
20    font-size: 150%; /* 150% of the parent font size */
21}
22
23/* Keywords */
24.font-size-medium {
25    font-size: small;
26}
27
28.font-size-medium {
29    font-size: medium;
30}
31
32.font-size-large {
33    font-size: large;
34}
35
36.font-size-x-large {
37    font-size: x-large;
38}
39
40/* Relative Keywords */
41.font-size-larger {
42    font-size: larger;
43}
44
45.font-size-smaller {
46    font-size: smaller;
47}

font-sizeは、要素内の文字の大きさを指定するためのCSSプロパティです。テキストの視覚的な重要度を調整したり、読みやすさを向上させたりするために使われます。font-sizeにはさまざまな単位が使用でき、指定方法も複数あります。

主な値の指定方法

絶対値(px, pt)

ピクセルやポイントなど、ブラウザやデバイスに依存しない固定サイズを利用したい場合、絶対的な単位でフォントサイズを指定します。

1p {
2    font-size: 16px;
3}

px: ピクセルは最も一般的な単位です。1ピクセル単位でサイズを指定します。

1p {
2    font-size: 12pt;
3}

pt: ポイントは印刷時によく使われる単位です。1ポイントは1/72インチです。

相対値(em, rem, %)

親要素やルート要素のフォントサイズから相対的なフォントサイズも指定できます。レスポンシブデザインに適しています。

1p {
2    font-size: 1.2em; /* 120% of the parent element's font size */
3}

em: emは親要素のフォントサイズに基づいた相対単位です。親のfont-sizeが16pxの場合、1emは16pxになります。

1p {
2    font-size: 1.5rem; /* 150% of the root element's font size */
3}

rem: remはルート要素（通常は<html>要素）のフォントサイズを基準にした相対単位です。

1p {
2    font-size: 150%; /* 150% of the parent element's font size */
3}

%: %は親要素のフォントサイズに対する割合で指定します。

キーワード

ユーザーにとって便利なサイズを簡単に指定できるキーワードも使用できます。

 1p.xx-small {
 2    font-size: xx-small;
 3}
 4p.x-small {
 5    font-size: x-small;
 6}
 7p.small {
 8    font-size: small;
 9}
10p.medium {
11    font-size: medium;
12}
13p.large {
14    font-size: large;
15}
16p.x-large {
17    font-size: x-large;
18}
19p.xx-large {
20    font-size: xx-large;
21}

xx-small, x-small, small, medium, large, x-large, xx-large: これらのキーワードは、ブラウザによって異なりますが、使いやすい基本的なフォントサイズを定義します。

相対キーワード

親要素や周囲のテキストサイズに対して、相対的なフォントサイズをキーワードを用いて指定できます。

1p {
2    font-size: larger;
3}

larger: largerは親要素より大きくします。

1p {
2    font-size: smaller;
3}

smaller: smallerは親要素より小さくします。

一般的な使い方の例

レスポンシブデザインでは、emやremを使用して、親要素やルート要素のサイズに基づいた柔軟なフォントサイズ指定を行うことが多いです。
固定デザインや精密なデザインの場合には、pxを使ってサイズを固定することが一般的です。

フォントサイズの調整例

 1h1 {
 2    font-size: 2.5rem; /* 2.5 times the size of the root element's font size */
 3}
 4
 5p {
 6    font-size: 16px; /* Fixed size */
 7}
 8
 9.small-text {
10    font-size: smaller; /* Smaller than the parent element's size */
11}

結論

font-sizeは、テキストの視覚的な重要性や読みやすさを調整する重要なプロパティです。デザインの目的や、柔軟なレスポンシブデザインのために単位やキーワードを適切に使い分けることが重要です。

`font-family`プロパティ

 1/* Specific Font Names */
 2.font-family-arial {
 3    font-family: Arial, sans-serif;
 4}
 5
 6.font-family-verdana {
 7    font-family: Verdana, sans-serif;
 8}
 9
10.font-family-times {
11    font-family: "Times New Roman", serif;
12}
13
14.font-family-courier {
15    font-family: "Courier New", monospace;
16}
17
18.font-family-georgia {
19    font-family: Georgia, serif;
20}
21
22/* Generic Font Families */
23.font-family-serif {
24    font-family: serif;
25}
26
27.font-family-sans-serif {
28    font-family: sans-serif;
29}
30
31.font-family-monospace {
32    font-family: monospace;
33}
34
35.font-family-cursive {
36    font-family: cursive;
37}
38
39.font-family-fantasy {
40    font-family: fantasy;
41}

font-familyプロパティには、主に以下の2種類の値を指定できます。

具体的なフォント名: 特定のフォントの名前を指定します。システムにインストールされているか、ウェブフォントとして利用可能なフォントを指定します。
- 例:
  - Arial
  - Verdana
  - Times New Roman
  - Courier New
  - Georgia
汎用フォントファミリー: 特定のフォントが利用できない場合に使用するフォールバックフォントのグループを指定します。
- 例:
  - serif: セリフ体 (例: Times New Roman, Georgia)
  - sans-serif: サンセリフ体 (例: Arial, Verdana)
  - monospace: 等幅フォント (例: Courier New, Lucida Console)
  - cursive: 筆記体のフォント (例: Comic Sans MS)
  - fantasy: 装飾的なフォント (例: Papyrus, Impact)

`font-family`の指定方法

複数のフォントを指定する場合は、フォント名をカンマで区切って、フォールバックとして汎用フォントを最後に記述することが推奨されます。

1p {
2    font-family: "Times New Roman", Georgia, serif;
3}

この場合、Times New Romanが利用できない場合はGeorgiaが、どちらもない場合はserif系フォントが使用されます。

`font-weight`プロパティ

 1/* Keyword Values */
 2.font-weight-normal {
 3    font-weight: normal; /* Standard thickness (usually 400) */
 4}
 5
 6.font-weight-bold {
 7    font-weight: bold; /* Bold (usually 700) */
 8}
 9
10.font-weight-bolder {
11    font-weight: bolder; /* Bolder than the parent element */
12}
13
14.font-weight-lighter {
15    font-weight: lighter; /* Lighter than the parent element */
16}
17
18/* Numeric Values */
19.font-weight-100 {
20    font-weight: 100; /* Thin (Thin) */
21}
22
23.font-weight-200 {
24    font-weight: 200; /* Extra Light */
25}
26
27.font-weight-300 {
28    font-weight: 300; /* Light */
29}
30
31.font-weight-400 {
32    font-weight: 400; /* Normal */
33}
34
35.font-weight-500 {
36    font-weight: 500; /* Medium */
37}
38
39.font-weight-600 {
40    font-weight: 600; /* Semi Bold */
41}
42
43.font-weight-700 {
44    font-weight: 700; /* Bold */
45}
46
47.font-weight-800 {
48    font-weight: 800; /* Extra Bold */
49}
50
51.font-weight-900 {
52    font-weight: 900; /* Black */
53}

font-weightは、文字の太さを指定するためのCSSプロパティです。テキストの視覚的な強調やスタイルに大きく関わり、フォントのスタイルを変えるのに使われます。font-weightには数値やキーワードを使用して、細いものから太いものまで様々な太さを指定することができます。

`font-weight`の主な値

キーワード

1p {
2    font-weight: normal; /* Default thickness */
3}

normal は、標準の文字の太さです。通常、400に相当します。

1p {
2    font-weight: bold; /* Bold */
3}

bold は、太字です。通常、700に相当します。

1p {
2    font-weight: bolder; /* Bolder than the parent element's font-weight */
3}

bolder は、親要素よりも太い文字です。

1p {
2    font-weight: lighter; /* Lighter than the parent element's font-weight */
3}

lighter は、親要素よりも細い文字です。

数値

1p {
2    font-weight: 300; /* Light text */
3}
4
5h1 {
6    font-weight: 700; /* Bold text */
7}

font-weightは数値でも指定でき、100から900の範囲で設定します。数値が小さいほど文字が細く、大きいほど文字が太くなります。通常、フォントファミリーは特定の太さの範囲をサポートしますが、すべての数値が必ずしも全てのフォントで利用できるわけではありません。

100: 極細 (Thin)
200: 非常に細い (Extra Light)
300: 細い (Light)
400: 標準 (Normal)
500: 中程度に太い (Medium)
600: やや太い (Semi Bold)
700: 太い (Bold)
800: 非常に太い (Extra Bold)
900: 極太 (Black)

`font-weight`の使い方の例

 1h1 {
 2    font-weight: 900; /* Black (Extra Bold) */
 3}
 4
 5p.normal {
 6    font-weight: normal; /* Standard thickness */
 7}
 8
 9p.bold {
10    font-weight: bold; /* Bold */
11}
12
13p.lighter {
14    font-weight: lighter; /* Lighter than the parent element */
15}
16
17p.custom-weight {
18    font-weight: 500; /* Medium */
19}

実際の使い方

標準のテキストには通常400（normal）を使います。
見出しや強調する部分には700（bold）を使用することが一般的です。
デザインに応じて、例えば強調しすぎないために500や600などの中間の太さも使用することがあります。

まとめ

font-weightは文字の太さを指定するプロパティで、normalやboldなどのキーワード、もしくは100から900までの数値で指定します。
lighterやbolderは親要素の太さに対して相対的に変化させます。
デザインや可読性に応じて適切なfont-weightを選ぶことが重要です。

`font-style`プロパティ

 1/* Font style examples */
 2.font-style-normal {
 3    font-style: normal; /* Normal font style */
 4}
 5
 6.font-style-italic {
 7    font-style: italic; /* Italic */
 8}
 9
10.font-style-oblique {
11    font-style: oblique; /* Slanted text */
12}
13
14.font-style-oblique-20deg {
15    font-style: oblique 20deg; /* Slanted text with a 20-degree angle */
16}

font-styleは、文字のスタイルを指定するためのCSSプロパティで、特に斜体（イタリック体）や通常のスタイルを適用するのに使用されます。このプロパティは、テキストの強調やデザインに使用されることが多く、特にタイトルや引用に使われます。

`font-style`の主な値

`normal`

1p {
2    font-style: normal;
3}

normalは標準の文字スタイル（通常の直立した文字）です。

`italic`

1p {
2    font-style: italic;
3}

italicは文字をイタリック（斜体）にします。フォントファミリーがイタリック体をサポートしている場合、このスタイルを適用できます。

`oblique`

1p {
2    font-style: oblique;
3}

obliqueは文字を斜めに傾けたスタイルにします。italicとは異なり、フォントがイタリック体を持っていない場合、テキストを人工的に傾ける場合があります。

`oblique <angle>`

1p {
2    font-style: oblique 20deg;
3}

obliqueに角度を指定して文字を指定した角度で傾けます。この指定はobliqueをさらにカスタマイズするためのものです。現在のところ、ほとんどのブラウザではこの角度指定がサポートされていませんが、一部のブラウザは対応しています。

`font-style`の用途

**italic**は強調や引用、書籍のタイトルなどでよく使われます。
**oblique**はフォントにイタリック体が含まれていない場合に使われることが多く、人工的に文字を傾ける手段です。
**normal**は通常の文字スタイルに戻す際に使用します。

まとめ

**font-style**は文字の傾きを制御するために使われ、特にnormal、italic、obliqueの3つの主要な値があります。
デザイン上、文字を強調するためにイタリックを使うことが多く、フォントが対応していない場合はobliqueで傾けることができます。

`color`プロパティ

 1/* Color examples */
 2.color-red {
 3    color: red;
 4}
 5
 6.color-hex {
 7    color: #FF5733;
 8}
 9
10.color-rgb {
11    color: rgb(255, 87, 51);
12}
13
14.color-rgba {
15    color: rgba(255, 87, 51, 0.7);
16}
17
18.color-hsl {
19    color: hsl(14, 100%, 60%);
20}
21
22.color-hsla {
23    color: hsla(14, 100%, 60%, 0.7);
24}

colorプロパティは、CSSでテキストの色を指定するための基本的なプロパティです。HTML要素のテキストの色を変更するために使用され、さまざまな形式で色を指定することができます。

説明:

**color-red**クラスはキーワードを使ってテキストの色を赤に指定します。
- red, blue, greenなどCSSで定義されている色の名前を指定できます。
**color-hex**クラスは16進数カラーコードを使って色を指定します。
- #F00のように3桁でも指定できます。この場合、#F00は#FF0000と同じ色になります。
**color-rgb**クラスはRGB形式を使って色を指定します。
- RGB: 赤、緑、青成分を0から255の範囲で指定できます。
**color-rgba**クラスはRGBA形式を使い、透明度を追加しています。
**color-hsl**クラスはHSL形式を使って色を指定します。
- 色相、彩度、明度で色を指定できます。色相は0から360度、彩度と明度は0%から100%で指定します。
**color-hsla**クラスはHSLA形式を使い、透明度を追加しています。

YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。ぜひYouTubeチャンネルもご覧ください。

YouTube Video

CSSの`@`ルールテキスト関連のCSSプロパティ

フォント関連のCSSプロパティ

YouTube Video

プレビュー用のHTMLの作成

タイポグラフィ（フォント関連）

font-sizeプロパティ

主な値の指定方法

絶対値(px, pt)

相対値(em, rem, %)

キーワード

相対キーワード

一般的な使い方の例

フォントサイズの調整例

結論

font-familyプロパティ

font-familyの指定方法

font-weightプロパティ

font-weightの主な値

キーワード

数値

font-weightの使い方の例

実際の使い方

まとめ

font-styleプロパティ

font-styleの主な値

normal

italic

oblique

oblique <angle>

font-styleの用途

まとめ

colorプロパティ

説明:

YouTube Video

`font-size`プロパティ

`font-family`プロパティ

`font-family`の指定方法

`font-weight`プロパティ

`font-weight`の主な値

`font-weight`の使い方の例

`font-style`プロパティ

`font-style`の主な値

`normal`

`italic`

`oblique`

`oblique <angle>`

`font-style`の用途

`color`プロパティ