HTML & CSS

基礎

CSS

CSSで指定することができる要素のサイズ単位

CSSで使うことができる長さやサイズの単位について、それぞれの特徴を解説します。

この記事のポイント

  • CSSで使用できる長さやサイズの単位が分かる
  • 周りの要素に対して相対的なサイズと、影響されないサイズが分かる

目次

様々なサイズ単位

フォントやHTML要素のサイズなど、サイズを指定するシーンは様々です。
サイズ指定はビューポート(表示サイズ)や親要素を基準にするなど様々ですが、CSSでは用途に応じたサイズ指定を行えるように、単位のバリエーションをたくさん用意しています。
大きく分けると親要素のサイズに影響される「相対的なサイズ」と、影響されない「絶対的なサイズ」に分けられます。

絶対的なサイズ

親要素などに影響されないサイズ指定を行うための単位です。
絶対的なサイズを指定すると、子要素の基準サイズになります。

単位名前長さ
pxpixels
ピクセル
画面の1ピクセル = 1px。
Retinaでは0.5px単位で指定可能だが、Chromeなどブラウザによって小数点は強制切り下げ。
cmcenti meters
センチメートル
1cm = 96px/2.54。
100px = 2.64cm。
mmmilli meters
ミリメートル
1mm = 1cmの1/10。
100px = 26.4mm。
Qquarter-milli meters
4分の1ミリメートル
1Q = 1mmの1/4。
100px = 105.6Q。
Safari未対応。
ininches
インチ
1in = 2.54cm = 96px。
100px = 1.04in。
pcpicas
パイカ
1pc = 1インチの1/6。
100px = 6.24pc。
ptpoints
ポイント
1pt = 1インチの1/72。
100px = 74.8pt。

より詳しくは、次のW3Cの仕様書のうち「Absolute lengths」をご覧ください。
CSS Values and Units Module Level3 – W3C(英語)

相対的なサイズ

親要素や表示環境によって長さが変化します。
親要素でサイズを指定していない場合は、次の親要素へと遡っていき、最終的にルート要素のサイズを基準に相対的なサイズをとります。

単位名前長さ
emelement1em = 1文字分のサイズ。
exelement x-heightフォントの高さを基準にしたサイズ。
ほとんどのフォントでは1ex = 0.5em。
chmchracter unit0(ゼロ)の幅を単位としたグルフの幅。
remroot element1rem = ルート要素のフォントサイズ(親要素ではない)。
vwviewport widthビューポート(表示幅)を基準にした単位。
1vw = 表示幅の1/100。
表示幅いっぱいに表示したいときは100vw、表示幅の半分は50vwとなります。
vhviewport heightビューポート(表示の高さ)の高さを基準にした単位。
1vh = 表示高さ1/100。
表示の高さいっぱいにしたいときは100vh、表示できる高さに対して半分の高さで表示するなら50vh。
vminviewport’s minimumビューポート(表示できる広さ)の幅と高さのうち、いずれか小さい方を基準にした高さ。
例えば幅1,200px、高さ700pxの場合は高さ700pxを基準にする。
vmaxviewport’s maximumビューポート(表示できる広さ)の幅と高さのうち、いずれか大きい方を基準にした高さ。
例えば幅1,200px、高さ700pxの場合は幅1200pxを基準にする。
%Percent親要素に対する相対的なサイズ。
例えば親要素の幅が1000pxであれば、子要素で「width: 50%;」を指定すると500pxになる。

より詳しくは、次のW3Cの仕様書のうち「Relative lengths」をご覧ください。
CSS Values and Units Module Level3 – W3C(英語)

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

ありがとうございます。
コメントを送信しました。