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