【HTML/CSS】フォント種類・フォントサイズ指定について

こんにちは。駆け出しエンジニアの竹前です。

ここでは、フォント種類・サイズ指定について説明します。

HTMLやCSSについて勉強している方の参考になれば幸いです。

font要素とは

HTMLだけでフォントの種類やサイズを変更するには、font要素を使用します。

フォントサイズを変更するには、font要素にsize属性を指定します。

size属性の値は1～7の数値(デフォルト値は3)、または現在のフォントサイズに対して「+1」「-2」のように相対値を指定することもできます。

また、フォントの種類を変更するには、font要素にface属性を指定します。

face属性の値に、変更したいフォント名を指定します。フォントは優先度順にカンマ区切りで複数指定することができます。

<font size="1">フォントサイズ1</font><br>
<font size="3">フォントサイズ3(デフォルト)</font><br>
<font size="5" face="ＭＳ 明朝">フォントサイズ5,ＭＳ 明朝</font><br>
<font size="7" face="ＭＳ ゴシック,ＭＳ Ｐゴシック">フォントサイズ7,ＭＳ ゴシック</font>

font要素の注意点

このようにfont要素を使ってフォントの種類・サイズを変更することができますが、HTMLは段落、改行などの文書構造を定義するものです。

また、HTML5ではfont要素は廃止されています。

そのため、フォントの種類やサイズの変更などのページの装飾を行う場合はCSSを使用します。

CSSでフォントの種類を変更する方法

CSSでフォントの種類を変更する場合、font-familyプロパティを設定します。

font-familyの値は、フォント名で指定する方法とキーワードで指定する方法があります。

キーワードで指定する場合は、以下の値を指定することができます。

• sans-serif：ゴシック体系
• serif：明朝体系
• cursive：草書体・筆記体などの手書き文字
• fantasy：装飾系
• monospace：等幅系

フォントは優先度順にカンマ区切りで複数指定することができます。

複数指定することによって、指定したフォントが各ブラウザで使えない場合の対応をすることができます。

h1 {
	font-family: serif;
}
p {
	font-family: "ＭＳ ゴシック", "ＭＳ Ｐゴシック", sans-serif;
}

CSSでフォントサイズを変更する方法

CSSでフォントサイズを変更する場合、font-sizeプロパティを設定します。

値の指定方法は複数あります。

1. 数値で指定

数値で指定する場合、代表的な単位は以下のようなものがあります。

• px：px(ピクセル)を基準に指定する方法です。
• %：親要素に指定されたフォントサイズに対する割合を指定する方法です。
• em：%と同様、親要素に指定されたフォントサイズに対する割合を指定する方法です。1emで100%です。
• rem：html要素に指定されたフォントサイズに対する割合を指定する方法です。1remで100%です。

2. キーワードで指定

フォントサイズを表すキーワードで指定します。

キーワードは以下の7段階で指定することができます。

• xx-large (最も大きい)
• x-large
• large
• medium (標準サイズ)
• small
• x-small
• xx-small (最も小さい)

また、親要素を基準としたキーワードを指定することもできます。

• larger：親要素に指定されたフォントサイズより1段階大きくなります。
• smaller：親要素に指定されたフォントサイズより1段階小さくなります。

.test1 { font-size: 15px; }
.test2 { font-size: 0.8rem; }
.test3 { font-size: xx-large; }
.test4 { font-size: medium; }
.test5 { font-size: xx-small; }
.test6 { font-size: larger; }
.test7 { font-size: smaller; }