単位（長さや大きさの単位）

CSSで指定する長さや大きさの単位です。CSSでは、0以外は単位を省略できません。負の値や小数点を付けることもできます。 (CSS3 数値・単位)

相対単位
px （pixels）画像1ドット分の幅が1ピクセル
em 1emは現在の１文字分の長さ [例] １文字分の長さが10ptの時、2emは20ptになる
ex アルファベットの小文字の｢x｣の高さを1とする単位
ch （character width）現在のフォントの”0” (ZERO, U+0030)の幅を１とする単位。 CSS3
rem （root em）ルート要素上のfont-sizeの値を１とする単位。しかし、ルート要素のfont-sizeの単位にremが指定された時は、font-sizeの初期値（medium）が基準となります。 CSS3
※ ルート要素とは最上位要素のこと。HTML文書の場合、HTML要素になります。
vw （viewport width）ビューポート幅の1%に相当します。この値は、ビューポートの幅により変動します。 例えば、ビューポート幅が200mmで、h1{font-size:8vw}と指定した時、h1要素のfont-sizeは16mm（(8×200mm)/100）となります。 CSS3
※ ビューポート（viewport）とは、ブラウザの画面表示領域のこと。
vh （viewport height）ビューポート高さの1%に相当します。 CSS3
vmin （viewport minimun）「vw」と「vh」の小さい方と同じ。 CSS3
vmax （viewport　max）「vw」と「vh」の大きい方と同じ。 CSS3
絶対単位
pt （points）1pt=1/72in
mm （millimeters）1mm=0.1cm=0.03937in
cm （centimeters）1cm=1mm
in （inches）1in=2.54cm=0.0254m
pc （picas ）1pc = 12pt
割合
% （percentage）標準の大きさに対する比率。

大きさを比べてみる

HTML source

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <style>
   div.test1 { font-size: 10px; }
   div.test2 { font-size: 10em; }
   div.test3 { font-size: 10ex; }
   div.test4 { font-size: 10ch; }
   div.test5 { font-size: 10rem; }
   div.test6 { width: 20vw; height: 20vh; background-color: #cadbff; }
   div.test7 { width: 20vmin; height: 20vmin; background-color: #cadbff; }
   div.test8 { width: 20vmax; height: 20vmax; background-color: #cadbff; }
   div.test9 { font-size: 10pt; }
   div.test10 { font-size: 10mm; }
   div.test11 { font-size: 10cm; }
   div.test12 { font-size: 10in; }
   div.test13 { font-size: 10pc; }
   div.test14 { font-size: 10%; }
  </style>
 </head>
 <body>
   <div class="test1">PX</div>
   <div class="test2">EM</div>
   <div class="test3">EX</div>
   <div class="test4">CH</div>
   <div class="test5">REM</div>
   <div class="test6">VW と VH</div>
   <div class="test7">VMIN</div>
   <div class="test8">VMAX</div>
   <div class="test9">PT</div>
   <div class="test10">MM</div>
   <div class="test11">CM</div>
   <div class="test12">IN</div>
   <div class="test13">PC</div>
   <div class="test14">%</div>
 </body>
</html>

display

PX
EM
EX
CH
REM
VW と VH
VMIN
VMAX

※ ブルーボックスは、表示画面を広げたり狭めたりすると大きさが変わります。未対応のブラウザもあります。

PT
MM
CM
IN
PC
%
上に戻る