単位(長さや大きさの単位)

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

相対単位
px (pixels)画像1ドット分の幅が1ピクセル
em 1emは現在の1文字分の長さ [例] 1文字分の長さが10ptの時、2emは20ptになる
ex アルファベットの小文字の「x」の高さを1とする単位
ch (character width)現在のフォントの”0” (ZERO, U+0030)の幅を1とする単位。 CSS3
rem (root em)ルート要素上のfont-sizeの値を1とする単位。しかし、ルート要素の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
%

上に戻る