CSS｜文字の大きさを変える「font-sizeプロパティ」

文字の大きさを変えるには「font-sizeプロパティ」で指定します。値は数値で指定する方法とキーワードで指定する方法があります。

フォントサイズを数値で指定

フォントサイズを数値で指定する場合は、数値と単位を一緒に書きます。単位は主に「px」、や「em」、「rem」、「%」を使います。

「px」は絶対値と呼ばれ、指定したサイズが変動することはありません。対しして「em」、「rem」、「%」は相対値と呼ばれ、基準となる要素のサイズによって変動します。

「px」で指定

「px」はディスプレイの画素「ピクセル」を1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化します。

「px」の指定は絶対値を指定するので、数値そのものが表示サイズになります。例えば、親要素が「10px」と指定していても影響を受けません。

例）親要素「test-font-frame」で文字の大きさを「10px」に指定しているものに、「test-font」部分を「20px」に指定してみます。

＜HTML＞

<!DOCTYPE html>
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>フォントサイズの変更</title>
<meta name="description"content="フォントの大きさと太さを変更する"/>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div class="test-font-frame">
フォントサイズを親要素「10px」で表示
<div class="test-font">
フォントサイズを「20px」で表示
</div>
</div>
</body>
</html>

＜CSS＞

@charset "UTF-8";
body
{
}
.test-font-frame {
font-size: 10px;
}

.test-font {
font-size: 20px;
}

＜表示＞

「％」で指定

「％」は相対値なので、親要素の指定サイズ（指定していない場合はデフォルトサイズ）に対する倍率になります。

例）親要素「test-font-frame」で文字の大きさを「10px」に指定しているものに対して、「％」で指定した倍率で表示されます。↓↓「200％」で指定。

<HTML＞

<!DOCTYPE html>
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>フォントサイズの変更</title>
<meta name="description"content="フォントの大きさと太さを変更する"/>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div class="test-font-frame">
フォントサイズを親要素「10px」で表示
<div class="test-font">
フォントサイズを「10px」の200％で表示
</div>
</div>
</body>
</html>

＜CSS＞

@charset "UTF-8";
body
{
}
.test-font-frame {
font-size: 10px;
}

.test-font {
font-size: 200%;
}

＜表示＞

「em」で指定

「em」（エム）は「％」と同じ相対値です。「1em」が親要素の100％に該当するので、「1.5em」で親要素の1.5倍、「2em」で2倍（200％）の表示になります。

例）親要素「test-font-frame」で文字の大きさを「10px」に指定しているものに対すて「2em」で指定。

＜HTML＞

<!DOCTYPE html>
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>フォントサイズの変更</title>
<meta name="description"content="フォントの大きさと太さを変更する"/>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div class="test-font-frame">
フォントサイズを親要素「10px」で表示
<div class="test-font">
フォントサイズを「10px」の2emで表示
</div>
</div>
</body>
</html>

＜CSS＞

@charset "UTF-8";
body {
}
.test-font-frame {
font-size: 10px;
}
.test-font {
font-size: 2em;
}

＜表示＞

「rem」で指定

「rem」は”root em”の略で、ルート要素を元にした相対値でサイズを指定するもので、ルート要素とは「html」セレクタを指します。

＜mtmlセレクタ＞

html {

}

例）htmlセレクタに「font-size: 20px;」、親要素に「font-size: 10px;」、「rem」でサイズを指定。「2rem」と指定。

＜HTML＞

<!DOCTYPE html>
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>フォントサイズの変更</title>
<meta name="description"content="フォントの大きさと太さを変更する"/>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div class="test-font-frame">
フォントサイズを親要素「10px」で表示
<div class="test-font">
フォントサイズを「10px」の2remで表示
</div>
</div>
</body>
</html>

＜CSS＞

@charset "UTF-8";
body {
}
html {
font-size: 20px:
}
.test-font-frame {
font-size: 10px;
}
.test-font {
font-size: 2rem;
}

＜表示＞

「eｍ」と「rem」同じ数値「2」でしたのですが「2rem」が2倍の大きさになりました。

  • 「em」は親要素の「10px」に対して2倍を指定しているので「20PX」
  • 「rem」はhtmlセレクタの「20px」に対して2倍を指定しているので「40px」

「em」と「rem」の違いをもう少し見ていきましょう。

「em」と「rem」の違い

「em」は親要素を元にした相対値（倍率）、「rem」はルート要素を元にした相対値（倍率）でしたね。では、親要素を「em」で指定するとどうなるのか？

例）親要素を「font-size: 0.5em;」として「2em」の場合と「2rem」を見ていきます。

◎「2em」の場合＜CSS＞

@charset "UTF-8";
body {
}
html {
font-size: 20px:
}
.test-font-frame {
font-size: 0.5em;
}
.test-font {
font-size: 2em;
}

＜表示＞

  • 上段の文字：ルート要素「20px」に対して「0.5em」を指定
    「20px」×「0.5」＝「10px」
  • 下段の文字：親要素「10px」に対して「2em」を指定
    「10px」×「2」＝「20px」

◎「2rem」の場合＜CSS＞

@charset "UTF-8";
body {
}
html {
font-size: 20px:
}
.test-font-frame {
font-size: 0.5em;
}
.test-font {
font-size: 2rem;
}

＜表示＞

  • 上段の文字：ルート要素「20px」に対して「0.5em」を指定
    「20px」×「0.5」＝「10px」
  • 下段の文字：ルート要素「20px」に対して「2em」を指定
    「20px」×「2」＝「40px」

※「em」で指定した場合は、ルート要素に対して指定した親要素を元にしているのに対して「rem」での指定は親要素に関係なく、ルート要素を元にしていることがわかります。

フォントサイズをキーワードで指定

キーワードで指定xx-small、x-small、small、medium、large、x-large、xx-largeの7段階があり、mediumが標準サイズです。1段階上がると1.2倍のサイズになります。また、smaller、largerを指定すると大きさが1段階上下します。

キーワード 意味
xx-small 基準値 – 3
(10px→chromeだと最小10pxのため)
x-small 基準値 – 2(10px)
small 基準値 – 1(13px)
medium 基準値(16px)
large 基準値 + 1(18px)
x-large 基準値 + 2(24px)
xx-large 基準値 + 3(32px)
smaller 文字段階が1段階減少(約13px)
larger 文字段階が1段階増加(約19px)

タイトルとURLをコピーしました