vw/vh、rem、calc()：知っておきたいCSSのフォントサイズ設定
2024-07-27
CSSにおけるフォントサイズ：%とemの使い分け
CSSでは、フォントサイズを様々な方法で指定することができます。その中でも、%とemは最もよく使用される単位です。しかし、それぞれの単位には異なる特性があり、使い分けることが重要です。
%
**%**は、相対単位です。ブラウザのデフォルトフォントサイズを基準として、フォントサイズを指定します。例えば、font-size: 120% とすると、デフォルトフォントサイズの120%の大きさで文字が表示されます。
メリット
- 全体的なフォントサイズを簡単に調整することができます。
- ブラウザのデフォルトフォントサイズに依存するため、ユーザーの環境に合わせてフォントサイズが自動的に調整されます。
- 特定の要素のみのフォントサイズを変更したい場合は、他の方法を使用する必要があります。
- デフォルトフォントサイズが異なるブラウザでは、文字の大きさが異なって表示される可能性があります。
em
- 文字サイズを段階的に調整したい場合に便利です。
- 親要素との相対的な大きさでフォントサイズを指定できるため、デザインのレイアウトが崩れにくくなります。
- ネストされた要素の場合、計算が複雑になり、意図しない結果になる可能性があります。
使い分け
% と em は、それぞれ異なる特性を持つため、状況に応じて使い分けることが重要です。
% は、以下の場合に適しています。
- ブラウザのデフォルトフォントサイズに合わせたデザインにしたい場合
- 全体的なフォントサイズを調整したい場合
- 親要素との相対的な大きさでフォントサイズを指定したい場合
例
- 段落内の文字サイズを少し大きくしたい場合:
p { font-size: 1.1em; } - 見出しのフォントサイズを本文の1.5倍にしたい場合:
h1 { font-size: 1.5em; } - 全体的なフォントサイズを120%にしたい場合:
body { font-size: 120%; }
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font Size Example</title>
<style>
body {
font-size: 16px;
}
h1 {
font-size: 2em;
}
p {
font-size: 1.2em;
}
</style>
</head>
<body>
<h1>見出し</h1>
<p>本文</p>
</body>
</html>
このコードでは、以下の設定を行っています。
p要素のフォントサイズは親要素の1.2倍に設定body要素のフォントサイズは16pxに設定
ブラウザでこのコードを開くと、以下のように表示されます。
- 本文は少し大きな文字で表示
- 見出しは本文よりも大きな文字で表示
このように、%とemを使用して、それぞれの要素に適切なフォントサイズを設定することができます。
rem単位は、em単位に似ていますが、親要素ではなくルート要素のフォントサイズを基準としてフォントサイズを指定します。pxなどの絶対単位を使用してフォントサイズを指定することもできます。
- レスポンシブデザインに適しています。
- デバイスの画面サイズに合わせて、フォントサイズを自動的に調整することができます。
- 古いブラウザでは対応していない場合があります。
例
body {
font-size: 1vw;
}
このコードは、すべての要素のフォントサイズをビューポート幅の1%に設定します。
remは、ルート要素のフォントサイズを基準とした相対単位です。ルート要素とは、HTML文書の最上位要素である<html>要素です。
em単位と同様に、親要素のフォントサイズに依存せずに、フォントサイズを指定することができます。
html {
font-size: 16px;
}
body {
font-size: 1rem;
}
このコードは、html要素のフォントサイズを16pxに設定し、body要素のフォントサイズをルート要素（html要素）の1倍に設定します。
calc()
calc()関数を使用して、フォントサイズを計算することができます。
- 複雑な計算に基づいて、フォントサイズを指定することができます。
- 理解するのが難しい場合があります。
body {
font-size: calc(16px + 1vw);
}
このコードは、body要素のフォントサイズを16pxに、ビューポート幅の1%を加算した値に設定します。
css fonts font-size
