【初心者向け】CSSの絶対単位と相対単位の違いと使い分けを徹底解説
CSSの絶対単位と相対単位は、どちらも「距離」を表す単位に分類されます。両者の大きな違いは、長さの基準となる対象にあります。
CSSの相対単位とは
相対単位は、親要素やビューポートなど他の要素を基準として要素の長さを定義します。例えば、相対単位 vh はビューポート（ブラウザの表示領域）の高さを基準とする単位です。
主なCSS相対単位は以下のとおりです。
| 番号 | 単位と基準 |
|---|---|
| 1 | % 親要素の寸法 |
| 2 | em その要素のフォントサイズ |
| 3 | ex その要素のフォントにおける x-height（小文字「x」の高さ） |
| 4 | lh その要素の行の高さ（line-height） |
| 5 | rem ルート要素（html要素）のフォントサイズ |
| 6 | rlh ルート要素の行の高さ |
| 7 | vb ルート要素のブロック軸方向におけるビューポートサイズの1% |
| 8 | vh ビューポートの高さの1% |
| 9 | vmax ビューポートの大きい方の寸法の1% |
| 10 | vmin ビューポートの小さい方の寸法の1% |
| 11 | vw ビューポートの幅の1% |
相対単位のサンプルコード
以下は、CSSの相対単位を使ったサンプルです。ラジオボタンで単位を選択すると、入力したテキストのプレビューのフォントサイズが変化します。
<!DOCTYPE html>
<html>
<head>
<title>CSS Relative Units</title>
<style>
html{
font-size: 14px;
line-height: normal;
}
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
#textContain {
font-size: 20px;
line-height: 2;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Relative-Units</legend>
<input type="text" id="textSelect" placeholder="Type Text Here...">
<input type="number" id="numSelect" value="1" min="1">
<div id="radioBut">
<input class="radio" type="radio" name="heading" value="em" checked><label>em</label>
<input class="radio" type="radio" name="heading" value="rem"><label>rem</label>
<input class="radio" type="radio" name="heading" value="vw"><label>vw</label>
<input class="radio" type="radio" name="heading" value="vh"><label>lh</label>
<input class="radio" type="radio" name="heading" value="ex"><label>ex</label>
</div>
<div id="textContain">Text Preview: <span id="textPreview">Output will show up here</span></div>
<input type="button" onclick="changeText()" value="Preview">
</fieldset>
</form>
<script>
var textSelect = document.getElementById("textSelect");
var numSelect = document.getElementById("numSelect");
var textPreview = document.getElementById("textPreview");
function changeText() {
if(textSelect.value === '')
textPreview.textContent = 'Type some text first';
else{
for(var i=0; i<5; i++){
var radInp = document.getElementsByClassName('radio')[i];
if(radInp.checked === true){
textPreview.textContent = textSelect.value;
textPreview.style.fontSize = numSelect.value+radInp.value
}
}
}
}
</script>
</body>
</html>
実行結果
上記コードの表示例は以下のとおりです。
ボタンをクリックする前の画面：
「em」を選択し、テキスト欄が空のまま「Preview」ボタンをクリックした場合：
「rem」を選択し、テキストを入力して「Preview」ボタンをクリックした場合：
「em」を選択し、テキストを入力して「Preview」ボタンをクリックした場合：
CSSの絶対単位とは
絶対単位は、画面サイズや他の要素に依存しない固定された長さを表します。印刷用のスタイル指定など、物理的なサイズを正確に定めたい場面で活躍します。
主なCSS絶対単位は以下のとおりです。
| 番号 | 単位と名称 |
|---|---|
| 1 | cm センチメートル（1cm = 100mm） |
| 2 | in インチ（1in = 2.54cm） |
| 3 | mm ミリメートル |
| 4 | pc パイカ（1pc = 12pt） |
| 5 | pt ポイント（1pt = 1/72インチ） |
| 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;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Absolute-Units</legend>
<input type="text" id="textSelect" placeholder="Type Text Here...">
<input type="number" id="numSelect" value="10" min="1">
<div id="radioBut">
<input class="radio" type="radio" name="heading" value="pc"><label>pc</label>
<input class="radio" type="radio" name="heading" value="pt"><label>pt</label>
<input class="radio" type="radio" name="heading" value="px" checked><label>px</label>
<input class="radio" type="radio" name="heading" value="in"><label>in</label>
<input class="radio" type="radio" name="heading" value="cm"><label>cm</label>
</div>
<div id="textContain">Text Preview: <span id="textPreview">Output will show up here</span></div>
<input type="button" onclick="changeText()" value="Preview">
</fieldset>
</form>
<script>
var textSelect = document.getElementById("textSelect");
var numSelect = document.getElementById("numSelect");
var textPreview = document.getElementById("textPreview");
function changeText() {
if(textSelect.value === '')
textPreview.textContent = 'Type some text first';
else{
for(var i=0; i<5; i++){
var radInp = document.getElementsByClassName('radio')[i];
if(radInp.checked === true){
textPreview.textContent = textSelect.value;
textPreview.style.fontSize = numSelect.value+radInp.value
}
}
}
}
</script>
</body>
</html>
実行結果
上記コードの表示例は以下のとおりです。
ボタンをクリックする前の画面：
「px」を選択し、テキストを入力して「Preview」ボタンをクリックした場合：
「pt」を選択し、テキストを入力して「Preview」ボタンをクリックした場合：
「pc」を選択し、テキストを入力して「Preview」ボタンをクリックした場合：
まとめ：単位の使い分けのポイント
レスポンシブデザインでは、ビューポートや親要素に応じて柔軟に変化する相対単位（%、em、rem、vw、vhなど）が適しています。一方、印刷用スタイルシートのように物理的なサイズを厳密に指定したい場面では絶対単位（cm、mm、in、ptなど）が有効です。用途に応じて両者を適切に使い分けることで、読みやすく保守性の高いCSSを実現できます。
-
CSSでボタンを上下左右の中央に配置する方法【Flexbox活用】
CSSでボタンを垂直方向・水平方向の中央に配置するには、Flexbox（フレックスボックス）を使うのが最も簡単で確実な方法です。親要素にdisplay: flex;を指定し、justify-content: center;で水平方向の中央揃え、align-items: center;で垂直方向の中央揃えを実現できます。 コード例 <!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Ve
-
CSSで要素を垂直方向・水平方向に中央揃えする方法
CSSで要素を垂直方向と水平方向の両方に中央揃えしたい場合、最も簡単で推奨される方法はFlexbox（フレックスボックス）を使うことです。親要素に display: flex を設定し、justify-content: center と align-items: center を指定するだけで、子要素を中央に配置できます。 Flexboxを使った中央揃えの実装例 <!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahoma, Genev