CSSで使える長さの単位

htmlでWebサイトを制作するとき、文字やボックスの大きさ、余白のサイズなどはCSSを使って指定します。このとき、CSSで使える長さの単位には、pxやemなど様々な単位があり、どれを使ったらよいのか迷ってしまうこともあります。ここでは、それぞれの単位の特徴を説明します。

絶対単位と相対単位

CSSで利用できる単位は「絶対単位」と「相対単位」に分けられます。

絶対単位

絶対単位とは、わたしたちが日常生活で使っている「mm（ミリメートル）」や「cm（センチメートル）」などのように、物差しを使って測ることのできる単位です。これらの単位は日常生活では使い慣れていますが、CSSで指定してしまうと、閲覧している環境に大きく依存してしまい、統一したデザインを作ることが難しくなります。そのため、Webサイトを制作するときに絶対単位が使われることはあまりありません。

ただし、印刷用のCSSを作るときなどには、紙に印刷したときの大きさを想定して絶対単位で指定することもあります。

相対単位

相対単位は、ディスプレイの解像度やブラウザの幅、親要素の大きさなど、他の何かとの比較によって大きさが決まる単位です。柔軟な設定が可能で、閲覧している環境によってサイズを調整できるため、レスポンシブデザインには適した単位です。

絶対単位一覧

CSSで使える絶対単位には次のようなものがあります。

相対単位一覧

CSSで使える相対単位には次のようなものがあります。

CSSの記述例（remを使った場合）

html {
  font-size: 62.5%;
}
h1 {
  font-size: 2rem;
}
p {
  font-size: 1.6rem;
}

上の例では、まずルート要素（html）で「font-size: 62.5%;」を指定しています。これは、多くのブラウザでルート要素のフォントサイズが16pxで表示されるようになっているため、これを62.5%に指定することで、10pxで表示されるように調整しています。

ルート要素を10pxに調整しておくことで、remなどの相対単位でサイズを指定したときに、大きさが直感的にわかりやすくなります。

たとえば、h1要素に指定したフォントサイズ「2rem」は、「ルート要素のフォントサイズ × 2」という意味なので、「10 × 2」で20pxとなります。

同様にp要素に指定した「1.6rem」は16pxとなります。

remという単位

上の例で使用したremという単位は、CSS3から利用できるようになったものです。「root em」を略したもので、その名のとおり、ルート要素を基準とした単位となっています。親要素の影響を受けず、同じく相対単位であるemや%よりも使い勝手がよいため、最近ではremを好んで使っている人が多く見られます。