CSSの単位を徹底解説！絶対単位と相対単位の違いと使い方

CSSの単位とは

CSSの単位には、フォントサイズ、文字サイズ、ビューポートの寸法など、さまざまな種類があります。これらは大きく「絶対単位」と「相対単位」の2つのカテゴリに分けられます。それぞれの特徴を正しく理解し、適切な場面で使い分けることが、レスポンシブで保守性の高いスタイリングを実現する第一歩となります。

CSSの絶対単位

絶対単位は、他の要素や表示環境に影響されない固定の値を表します。印刷時のように正確な物理寸法が必要な場面で役立ちます。主な絶対単位は以下の通りです。

番号	単位と名称
1	cm センチメートル（1cm = 100mm）
2	in インチ（1in = 2.54cm）
3	mm ミリメートル
4	pc パイカ（1pc = 12pt）
5	pt ポイント（1pt = 1/72in）
6	px ピクセル（1px = 0.75pt）

それでは、CSSの絶対単位を使った実際の例を見てみましょう。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<title>CSS Absolute Units</title>
<style>
form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
   margin:5px;
}
input[type="button"] {
   border-radius: 10px;
}
#container {
   display: flex;
}
.child{
   margin: 5px 0;
   height: 40px;
   color: white;
   border-width: 4px 0 4px 4px;
   border-color: black;
   border-style: solid;
}
.child:nth-of-type(1){
   background-color: #FF8A00;
   width:1cm;
}
.child:nth-of-type(2){
   background-color: #F44336;
   width:1in;
}
.child:nth-of-type(3){
   background-color: #C303C3;
   width:1mm;
}
.child:nth-of-type(4){
background-color: #4CAF50;
width:1pc;
}
.child:nth-of-type(5){
   background-color: #03A9F4;
   width:1pt;
}
.child:nth-of-type(6){
   background-color: #FEDC11;
   width:1px;
   border-right-width: 4px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Absolute-Units</legend>
<div id="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div><br>
<div><span class="child">cm</span><span class="child">in</span><span class="child">mm</span><span class="child">pc</span><span class="child">pt</span><span class="child">px</span></div><br>
<input type="number" id="numSelect" value="1" min="1">
<input type="button" onclick="changeWidth()" value="Preview">
<script>
var numSelect = document.getElementById("numSelect");
function changeWidth() {
   var divChild = document.getElementsByClassName('child');
   for(var i=0; i<6; i++){
      divChild[i].style.width = numSelect.value+divChild[i+6].textContent;
}}
</script>
</body>
</html>

実行結果

ボタンをクリックする前の表示 −

CSSの単位を徹底解説！絶対単位と相対単位の違いと使い方

数値フィールドに値を設定して「Preview」ボタンをクリックした後の表示 −

CSSの単位を徹底解説！絶対単位と相対単位の違いと使い方

CSSの相対単位

相対単位は、親要素の寸法やビューポートのサイズなど、他の基準との相対的な関係によってサイズが決まります。画面サイズが多様化する昨今のレスポンシブデザインにおいて、非常に重要な単位です。主な相対単位は以下の通りです。

番号	単位と基準
1	% 親要素の寸法に対する割合
2	em 要素自身のフォントサイズ
3	ex 要素のフォントにおけるx-height（小文字xの高さ）
4	rem ルート要素（html要素）のフォントサイズ
5	vh ビューポートの高さの1%
6	vmax ビューポートの大きい方の寸法の1%
7	vmin ビューポートの小さい方の寸法の1%
8	vw ビューポートの幅の1%

それでは、CSSの相対単位を使った実際の例を見てみましょう。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<title>CSS Relative Units</title>
<style>
form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
   margin:5px;
}
input[type="button"] {
   border-radius: 10px;
}
#container {
   display: flex;
}
.child{
   margin: 5px 0;
   height: 40px;
   color: white;
   border-width: 4px 0 4px 4px;
   border-color: black;
   border-style: solid;
}
.child:nth-of-type(1){
   background-color: #FF8A00;
   width:1%;
}
.child:nth-of-type(2){
   background-color: #F44336;
   width:1em;
}
.child:nth-of-type(3){
   background-color: #C303C3;
   width:1ex;
}
.child:nth-of-type(4){
   background-color: #4CAF50;
   width:1rem;
}
.child:nth-of-type(5){
   background-color: #03A9F4;
   width:1vh;
}
.child:nth-of-type(6){
   background-color: #FEDC11;
   width:1vw;
   border-right-width: 4px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Relative-Units</legend>
<div id="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div><br>
<div><span class="child">%</span><span class="child">em</span><span class="child">ex</span><span class="child">rem</span><span class="child">vh</span><span class="child">vw</span></div><br>
<input type="number" id="numSelect" value="1" min="1">
<input type="button" onclick="changeWidth()" value="Preview">
<script>
var numSelect = document.getElementById("numSelect");
function changeWidth() {
   var divChild = document.getElementsByClassName('child');
   for(var i=0; i<6; i++){
      divChild[i].style.width = numSelect.value+divChild[i+6].textContent;
}}
</script>
</body>
</html>

実行結果

ボタンをクリックする前の表示 −

CSSの単位を徹底解説！絶対単位と相対単位の違いと使い方

「em」を選択し、テキストフィールドが空の状態で「Preview」ボタンをクリックした後の表示 −

CSSの単位を徹底解説！絶対単位と相対単位の違いと使い方

まとめ

絶対単位は固定の寸法を、相対単位は他の要素やビューポートを基準とした可変の寸法を表します。Web制作では、pxやrem、%、vwなどの単位を状況に応じて組み合わせることで、あらゆるデバイスに対応した柔軟なレイアウトを構築できます。

CSSのempty-cellsプロパティを使ってテーブルの空セルを表示・非表示にする方法

CSSのtable-layoutプロパティでテーブルレイアウトを制御する方法

CSSで子要素を選択する方法｜子結合子と子孫結合子の違いを解説
CSSの子結合子（child combinator）は、親要素の直下にある子要素のみを選択するために使用します。記号「>」を用いて表現します。子結合子の基本的な構文は以下の通りです。セレクタ > セレクタ { プロパティ: /*値*/; }一方、子孫結合子（descendant combinator）は、親要素に含まれるすべての子孫要素（子・孫・ひ孫など、階層の深さに関係なく）を選択します。セレクタ同士を半角スペースで区切って記述します。子孫結合子の基本的な構文は以下の通りです。セレクタセレクタ { プロパティ: /*値*/; }使用例1：子結合子の基本的な使い方
CSSのclientHeight・offsetHeight・scrollHeightの違いと使い分けを徹底解説
JavaScriptでDOM要素の高さを取得するときによく使われるのが、clientHeight、offsetHeight、scrollHeight の3つのプロパティです。いずれも要素の高さをピクセル単位で返しますが、パディング・ボーダー・はみ出したコンテンツの扱いがそれぞれ異なるため、用途に応じた使い分けが必要です。本記事では、各プロパティの特徴と違いを、サンプルコード付きでわかりやすく解説します。clientHeightとはclientHeight は、要素の「見えている内部領域」の高さを返すプロパティです。具体的には、コンテンツ部分と上下のパディングを合計した値になります。ボーダーやマ