CSSでフォント（文字）の大きさや色、太さを変更する方法を覚えよう

今回は、フォント（文字）を装飾するCSSを覚えましょう。

CSSには非常に多くのプロパティがありますので、すべてを覚えようとせず、「こんなことができるんだなあ」と理解すれば問題ありません。

文字の色・大きさ・太さを変更する

まずは、基本的な設定から見ていきましょう。

文字の色を変更する

文字の色を変更するプロパティは「color」です。

{color: カラーネーム or カラーコード;}

値には、カラーネームもしくはカラーコードを指定します。

使用例:HTML

<p class="cn">カラーネームで変更する</p>
<p class="cc">カラーコードで変更する</p>

使用例:CSS

.cn{
  color: red;
}
.cc{
  color: #ff0000;
}

使用例:ブラウザ

• カラーネーム：予め決められた名前を指定することができます。
• カラーコード：16進表記で指定が可能です。頭に#（シャープ）をつけます。

文字の大きさを変更する

文字の大きさを変更するプロパティは、「font-size」です。

{font-size: ◯px or ◯em or ◯rem;}

値には、数字+単位の組み合わせで使用します。

• px：ピクセル数を指定します。
• em：現在のフォントサイズに対する比率で表示します。（例：現在10pxであれば、1.5emとすると15pxで表示される）
• rem:ルート要素に対する比率で表示します。（例：ルート要素が10pxであれば、1.5remとすると15pxで表示される）

使用例:HTML

<p class="px">文字の大きさを変更する</p>
<p class="em">文字の大きさを変更する</p>
<p class="rem">文字の大きさを変更する</p>

使用例:CSS

.px{
  font-size: 15px;
}
.em{
  font-size: 1.5em;
}
.rem{
  font-size: 2.5rem;
}

使用例:ブラウザ

文字の太さを変更する

文字の大きさを変更するプロパティは、「font-weight」です。

{font-weight: 値;}

プロパティは「font-weight」で、値には9段階の太さをを指定することができます。
「100、200、300、400、500、600、700、800、900」とあり、400が標準の太さです。数値が大きくなるとより太くなります。また、下記のようにも指定することができます。

• normal（400と同じ）
• bold（700と同じ）
• lighter（現在の太さより1段階細く）
• bolder（現在の太さより1段階太く）

数値で指定する場合、フォントによっては対応していない太さもあるので、その場合は太さが変わりません。

変更しても変化がない場合は、対応している太さを指定しましょう。

使用例:HTML

<p class="normal">文字の太さを変更する</p>
<p class="bold">文字の太さを変更する</p>
<p class="lighter">文字の太さを変更する</p>
<p class="bolder">文字の太さを変更する</p>

使用例:CSS

.normal{
  font-weight: normal;
}
.bold{
  font-weight: bold;
}
.lighter{
  font-weight: lighter;
}
.bolder{
  font-weight: bolder;
}

使用例:ブラウザ

フォントファミリーを変更する

続いては、フォントファミリーです。

フォントファミリーとは、フォントの種類（書体）のことです。下記のように指定します。

body {
  font-family: 値;
}

プロパティは「font-family」で値にはそれぞれのフォント名や種類を指定します。例えば、

body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3";
}

このように指定することができます。複数指定されていますが、フォントはユーザーのコンピューターやブラウザの環境によって使えるフォントが異なります。複数指定する場合は、フォント名を,(カンマ)で区切ります。また、先頭に書いた書体から優先順位が高くなりますので、使用できないフォントが指定されている場合には、次に書かれたフォントが読み込まれます。フォント名にスペースが含まれている場合は、” “(ダブルクォーテーション)もしくは、’ ‘(シングルクォーテーション)で囲みます。

フォント名だけでなく、フォントの種類をキーワードで指定することもできます。

body {
  font-family: serif, sans-serif;
}

「serif」は明朝体、「sans-serif」はゴシック体を表します。

使用例:HTML

<p class="serif">明朝体に変更する</p>
<p class="sans-serif">ゴシック体に変更する</p>

使用例:CSS

.serif{
  font-family:serif;
}
.sans-serif{
  font-family: sans-serif;
}

使用例:ブラウザ

フォントをイタリック体・斜体に変更する

最後に、イタリック体と斜体に変更する「font-style」プロパティです。

{font-style:値;}

指定できる値は、「normal」「italic」「oblique」です。指定がない場合は、normalとなります。

また、日本語には斜体を指定できるフォントがほとんど存在していない為、基本的に英語フォントで使用します。

italicとobliqueの違いは、イタリック体が筆記体調であるのに対し、obliqueは単純に傾けた形となることです。

使用例:HTML

<p class="italic">ゴシック体に変更する</p>
<p class="oblique">ゴシック体に変更する</p>

使用例:CSS

.italic{
  font-style: italic;
}
.oblique{
  font-style: oblique;
}

使用例:ブラウザ

行の高さ（行間）を変更する

行の高さを変更する際は、「line-height」プロパティを使用します。

指定方法は以下の様になります。

{line-height:値;}

値の単位には、px、整数、em、%を指定できます。

{line-height:15px;}
{line-height:1.5;}
{line-height:1.5em;}
{line-height:150%;}

line-heightプロパティは、「font-size」を基準に結果が変わります。

例えばfont-sizeを12pxとした場合、line-heightが15pxならば15pxから12pxを引き、残りの3pxを行の上下に均等に余白ができます。整数、em、%なら比率で行間が決まります。

フォントに関する指定をまとめて行う

「font」に関する指定をまとめて一括で行う事ができます。下記のようにします。

{font:値1 値2 値3… ;}

一括で設定する場合は、指定する順番が決まっています。間違わないようにしましょう。

{
  font: font-styleの値 font-weightの値 font-sizeの値 line-heightの値 font-familyの値 ;
}

実際に指定するとこのようになります。

使用例:HTML

<p>一括でフォントを変更する</p>

使用例:CSS

p{
  font: italic bold 18px/20px serif;
}

使用例:ブラウザ

line-heightを指定するときは、「/(スラッシュ)」をつけます。

ちなみに、font-sizeとfont-family以外は省略可能です。

理解するポイントまとめ

• 文字の大きさ：「font-size」
• 文字の色：「color」
• 文字の太さ：「font-weight」
• フォントファミリー：「font-family」
• イタリック・斜体：「font-style」
• 行の高さ：「line-height」
• 一括指定：「font」