【CSS入門】絶対単位と相対単位の違いと使い分けを徹底解説
CSSの絶対単位（Absolute Length Units）とは？
絶対単位は、単位同士の関係が固定されており、環境に左右されず一定の大きさを表す長さの単位です。印刷用のスタイルシートのように、出力先の物理的なサイズがあらかじめ分かっている場合に活用されます。
主な絶対長さの単位は以下のとおりです。
| 番号 | 単位と説明 |
|---|---|
| 1 | cm センチメートル |
| 2 | mm ミリメートル |
| 3 | in インチ（1in = 96px = 2.54cm） |
| 4 | px * ピクセル（1px = 1inの1/96）。画面上ではデバイスに依存しないCSSピクセルとして扱われます |
| 5 | pt ポイント（1pt = 1inの1/72）。印刷物でよく使われる単位です |
| 6 | pc パイカ（1pc = 12pt） |
※ pxは「絶対単位」に分類されますが、実際の表示サイズはデバイスの解像度によって異なる場合があります。
絶対単位を使ったコード例
ここでは、フォントサイズに「0.3in（インチ）」を指定した例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
text-decoration: overline underline;
text-decoration-color: blue;
font-size: 0.3in;
}
</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>
表示結果
CSSの相対単位（Relative Length Units）とは？
相対単位は、別の長さ（親要素のフォントサイズやビューポートの寸法など）を基準として長さを指定する単位です。画面サイズが多様化している現在、レスポンシブデザインを実現するうえで欠かせない単位となっています。
主な相対長さの単位は以下のとおりです。
| 番号 | 単位と説明 |
|---|---|
| 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 | % 親要素の対応するプロパティの値を基準とした割合 |
※ 「ビューポート」とは、ブラウザ上で実際にWebページが表示される領域のことを指します。
相対単位を使ったコード例
次に、フォントサイズに相対単位「1.4em」を指定した例を見てみましょう。
<!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>
表示結果
まとめ：絶対単位と相対単位の使い分け
絶対単位は印刷など物理サイズが固定された場面に、相対単位は画面サイズに応じて柔軟にレイアウトを調整したいWebページに向いています。特にem・rem・vw・vhなどの相対単位を活用することで、スマートフォンから大型ディスプレイまで一貫したユーザー体験を提供できるレスポンシブデザインが実現できます。
-
【初心者向け】CSSの絶対単位と相対単位の違いと使い分けを徹底解説
CSSの絶対単位と相対単位は、どちらも「距離」を表す単位に分類されます。両者の大きな違いは、長さの基準となる対象にあります。 CSSの相対単位とは 相対単位は、親要素やビューポートなど他の要素を基準として要素の長さを定義します。例えば、相対単位 vh はビューポート（ブラウザの表示領域）の高さを基準とする単位です。 主なCSS相対単位は以下のとおりです。 番号単位と基準 1%親要素の寸法 2emその要素のフォントサイズ 3exその要素のフォントにおける x-height（小文字「x」の高さ） 4lhその要素の行の高さ（line-height） 5remルート要素（html要素）のフォン
-
CSSのマージン（margin）とパディング（padding）の使い方を徹底解説
マージンとパディングとは？CSSにおけるマージン（margin）とは、HTML要素の外側にある余白のことです。マージンを設定するには、CSSのmarginプロパティを使用します。このプロパティにより、要素の周囲にどれだけのスペースを空けるかを定義できます。一方、パディング（padding）とは、要素の内側にある余白のことです。paddingプロパティを使用すると、要素のコンテンツとその境界線（ボーダー）との間に、どれだけのスペースを設けるかを指定できます。marginとpaddingの違いmarginは要素の「外側」に適用されるため、隣接する他の要素との距離を作ります。対してpaddingは要