CSSで使われる長さの単位の意味と使い分けを完全解説！

2020-07-25ITプログラミング

日常生活でも長さの単位は「メートル」や「ヤード」、「尺」など様々な単位があります。

CSSでも同じように長さの単位がたくさんあります。

この記事ではCSSの長さの単位の意味と使い分けの方法について解説します。

値に長さを指定するプロパティは代表的なものとして

などがあり、非常に多くのところで使うことになるので長さの単位の意味と使い分けについてしっかり覚えていきましょう！

CSSの長さの単位の一覧

CSSの長さの単位はたくさんありますが、

その中でも使用頻度の高い単位を紹介します。

px

「px (ピクセル)」 はパソコンの画面に表示できる最小単位を1pxとするものです。

CSS以外ではディスプレイの解像度で

1920×1080と書いてあるものを見かけたことがあると思いますが、
これと同じ単位です。

非常に直感的でわかりやすいためpx単位はCSSで長さを指定するときに最も利用される単位です。

注意点としては1pxあたりの長さはディスプレイによって異なります。

自分のパソコンでは文字が大きく表示されているように見えても

ということには注意が必要です。

特にパソコンで文字が大きく表示されていても、スマホでは文字が小さくて見えづらい

ということはよく起こりえます。そのためスマホとパソコンでレイアウトを変更するというような工夫が必要です。

em

「em」は文字の大きさを基準とした単位で1emは１文字の大きさです。

親要素の文字の大きさを基準として指定します。

htmlタグの文字の大きさを16pxとしてmargin-bottomの値を1emとした場合、
次のようにコードを書くとmargin-bottomの値は16pxと同じになります。

<p class="main">この部分の文字の大きさとマージンは16pxです。</p>

.main {
	font-size: 1em;
	margin-bottom: 1em;
}

.main {
	font-size: 1em;
	margin-bottom: 16px;
}

この2つのコードはブラウザで見れば全く同じものです。

しかし文字の大きさを変えたいとき

というメリットがあります。

下のほうのコードだと文字の大きさだけを変えるとマージンが変わらないので全体のバランスが崩れてしまうことがあります。

なので文字の大きさと同時に長さの値を変更したい場合はemを使うとよいでしょう。

ただ欠点としてHTMLのページ構造が複雑になると1emの大きさがいろいろな値をとるためわかりにくくなってしまいます。

その場合は次のremを利用するとよいでしょう。

rem

「rem」もemと同じように文字の大きさを基準とした単位ですがhtmlタグに指定した文字のサイズを1remとしています。

hemlタグに何も書かない場合はデフォルトのサイズである16pxが採用されます。

p {
	font-size: 36px;
	margin-bottom: 1rem;
}

このようにfont-sizeの値を36pxにしても1remは16pxとなるのでこちらを使ったほうがわかりやすいこともあります。

%

「%」はfont-sizeプロパティに用いる場合は、emと同じように親要素の文字の大きさを基準とした単位で100%は１文字の大きさです。

使い方はemと同じように使え100%=1emとなります。

%を使った代表的な書き方としてhtmlのfont-sizeを62.5%で指定することがあります。

ブラウザのhtmlのデフォルトの文字のサイズは16pxなのでfont-sizeを62.5%にすると

となります。htmlの文字サイズを10pxにすることで先ほど紹介したremの単位を使った文字のサイズの計算がやりやすくなります。

例えば見出しの文字の大きさを30px、
pタグの文字の大きさを14pxにしたい場合は次のように記述すればよいことになります。

html {
	font-size: 62.5%;
}

h1 {
	font-size: 3rem;
}

p {
	font-size: 1.4rem;
}

%は文字の大きさを指定するときはemと同じように使えますが、

ということには注意が必要です。%はプロパティによって参照する値が異なるので自分の意図しない表示がされてしまうこともあります。

cm、mm

「cm」や「ｍｍ」はそのままセンチメートル、ミリメートルを表します。

pxはディスプレイの大きさや解像度によって1px当たりの大きさが異なりますが、
cmやmmはどのディスプレイで見ても大きさが変わりません。

marginの値を1cmとすれば実際に定規で測ったときに1cm分の余白ができるということです。

しかし、最近ではスマホのような小型のディスプレイからウェブページを見ることも多くなり、cmやmmで文字の大きさを指定することはおすすめできません。

cmやmmを使うのは印刷をするときで

というメリットがあるので印刷用のCSSを作るときはcmとmmを使うとよいでしょう。

他にもin（インチ）やpt（ポイント）、pc（パイカ）などのディスプレイに依存しない単位がありますが、実際に使われることはほぼありません。

vw、vh

「vw」や「vh」はviewport（ブラウザで表示されている領域）を基準とした単位で
vwは幅の割合、vhは高さの割合を表します。

ブラウザで表示されている領域が幅800pxの場合、
1vwは8pxとなります。

ブラウザの表示領域を変えると文字の大きさも変わるので、文字の大きさを指定するのには向いていません。

そのかわり画面いっぱいに表示をするときや、タブレットのような向きで縦横の長さが変わるような端末で、レイアウトが崩れないように表示したい場合によく使われます。

まとめ

この記事ではCSSで利用される長さの単位について解説しました。

長さの単位はたくさんあり、これらを場合によって使い分けることでより効率的にウェブページを作成することが可能になります。