CSSの相対的な長さ単位（em・rem・vwなど）をわかりやすく解説
CSSにおける相対的な長さ単位とは、他の長さ（親要素やビューポートなど）を基準として長さを指定するための単位です。固定値（pxなど）と異なり、画面サイズやユーザーの設定に応じて柔軟に拡縮できるため、レスポンシブデザインには欠かせない存在です。
主な相対的な長さ単位の一覧
| 番号 | 単位と説明 |
|---|---|
| 1 | em その要素自身のフォントサイズを基準とします。例えば「4em」は現在のフォントサイズの4倍を意味します。 |
| 2 | ex 現在のフォントの「x-height」（小文字のxの高さ）を基準とします。 |
| 3 | ch 数字「0」の幅を基準とします。等幅フォントでのレイアウト調整に便利です。 |
| 4 | rem ルート要素（html要素）のフォントサイズを基準とします。ページ全体で一貫したスケーリングが可能です。 |
| 5 | vw ビューポート（ブラウザの表示領域）の幅の1%を基準とします。 |
| 6 | vh ビューポートの高さの1%を基準とします。 |
| 7 | vmin ビューポートの幅と高さのうち、小さい方の1%を基準とします。 |
| 8 | vmax ビューポートの幅と高さのうち、大きい方の1%を基準とします。 |
| 9 | % 親要素の対応するプロパティの値を基準とします。 |
使用例1：emを使った指定
まずは「em」単位を使用した例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
text-decoration: overline underline;
text-decoration-color: blue;
font-size: 1.4em;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>
出力結果
この例では、クラス「demo」が適用された段落のフォントサイズが、親要素の1.4倍に設定されます。テキストには青色の上線と下線も同時に表示されています。
使用例2：chを使った指定
次に、「ch」単位を使用した例です。
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
text-decoration: overline underline;
text-decoration-color: blue;
font-size: 4ch;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>
出力結果
こちらでは「4ch」と指定することで、数字「0」の幅の4倍がフォントサイズとして反映されます。
まとめ：どの単位をいつ使うべきか？
- em / rem：文字サイズや余白の指定に最適。特にremはルート基準のため、サイト全体のスケール統一に便利です。
- vw / vh / vmin / vmax：画面サイズに連動させたいヒーローセクションやフルスクリーンレイアウトに有効です。
- %：コンテナの幅や高さを親要素に合わせて伸縮させたい場合に使用します。
これらの相対単位を適切に使い分けることで、デバイスごとの表示崩れを防ぎ、保守性の高い柔軟なCSS設計が実現できます。
-
CSSの相対配置（position:relative）の仕組みと使い方を解説
CSSでは、要素のpositionプロパティにrelative（相対配置）を指定することで、要素を通常どおりにレンダリングしながら位置を調整できます。相対配置が指定された要素は、CSSの配置プロパティ（top、right、bottom、left）によって、本来の位置から相対的に移動されます。 相対配置の大きな特徴は、要素が元々占めていた領域が保持されるという点です。そのため、要素をずらしても、周囲の他の要素のレイアウトには影響を与えません。 相対配置の基本例 それでは、CSSの相対配置の基本的な例を見てみましょう。 <!DOCTYPE html> <html> <
-
【初心者向け】CSSの絶対単位と相対単位の違いと使い分けを徹底解説
CSSの絶対単位と相対単位は、どちらも「距離」を表す単位に分類されます。両者の大きな違いは、長さの基準となる対象にあります。 CSSの相対単位とは 相対単位は、親要素やビューポートなど他の要素を基準として要素の長さを定義します。例えば、相対単位 vh はビューポート（ブラウザの表示領域）の高さを基準とする単位です。 主なCSS相対単位は以下のとおりです。 番号単位と基準 1%親要素の寸法 2emその要素のフォントサイズ 3exその要素のフォントにおける x-height（小文字「x」の高さ） 4lhその要素の行の高さ（line-height） 5remルート要素（html要素）のフォン