HTMLやCSSを学んでいる際、序盤に学ぶfont-sizeプロパティ。
font-sizeプロパティはテキストの文字サイズを変更するプロパティでWEB制作の現場では必ず使用するプロパティになります。
今回の記事ではこのfont-sizeプロパティについてご紹介したいと思います。

この記事で使用するHTMLの構造は以下となります。

<p>【CSS】文字サイズを変えるfont-sizeプロパティの使い方</p>

font-sizeプロパティの基本

font-sizeプロパティの基本的な使い方は以下の通りです。

セレクタ {
    font-size: サイズ指定;
}

この指定方法をもとに以下のように指定します。

p {
    font-size: 20px;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

サイズの指定方法

ここからはfont-sizeプロパティについて詳しくご紹介していきます。
文字サイズを変更する場合、数値で指定する方法とキーワードで指定する方法があります。

数値で指定

数値で指定する場合、数値と合わせて単位を指定する必要があります。
一般的に使用する単位は以下のようなものがあります。

単位	解説
px	固定値です。ブラウザの幅や他要素の影響を受けることのない絶対値です。
em	親要素に適用されている値をもとにサイズを計算します。
rem	ルート要素（htmlタグ）に適用されている値をもとにサイズを計算します。
%	親要素に適用されているい値をもとにサイズを計算します。
vw	ビューポートの幅をもとにサイズを計算します。

p:nth-of-type(1) {
	font-size: 20px;
}
p:nth-of-type(2) {
	font-size: 2em;
}
p:nth-of-type(3) {
	font-size: 2rem;
}
p:nth-of-type(4) {
	font-size: 2%;
}
p:nth-of-type(5) {
	font-size: 2vw;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

このようにそれぞれの単位によって文字サイズが大きく異なります。

キーワードで指定

キーワードで指定する場合、以下のキーワードの中から指定します。

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large
• smaller
• larger

このなかのsmallerとlargerはそれぞれ文字サイズを一段階大きくしたり、小さくしたりする指定になります。

p:nth-of-type(1) {
	font-size: xx-small;
}
p:nth-of-type(2) {
	font-size: x-small;
}
p:nth-of-type(3) {
	font-size: small;
}
p:nth-of-type(4) {
	font-size: medium;
}
p:nth-of-type(5) {
	font-size: large;
}
p:nth-of-type(6) {
	font-size: x-large;
}
p:nth-of-type(7) {
	font-size: xx-large;
}
p:nth-of-type(8) {
	font-size: smaller;
}
p:nth-of-type(9) {
	font-size: larger;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

このようにそれぞれのキーワードによって文字サイズが大きく異なります。

font-sizeプロパティの応用

続いて、font-sizeプロパティを応用して使用する方法を見てみましょう。

1文字目だけサイズを変える

1文字だけ文字サイズを変える場合は以下のように指定します。

p:first-letter {
    font-size: 24px;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

特定の部分だけ文字サイズを変える

特定の部分だけ文字サイズを変える場合はCSSだけでは再現することが出来ないため、HTMLの構造を少し変更します。

<p>【CSS】文字サイズを変える<span>font-sizeプロパティ</span>の使い方</p>

上のように文字サイズを変えたい部分のみ<span>タグで囲い、font-sizeプロパティは以下のように指定します。

p span {
    font-size: 24px;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

このようにすることで特定の部分のみ文字サイズを変更することが出来ます。

まとめ

今回の記事ではfont-sizeプロパティの使い方をご紹介しました。使用方法は限られるため応用した使用方法はあまりありませんが基礎となるプロパティとなるので確実に使いこなしていきたいですね。