【CSSで使う単位の全て】px・%・em・remを徹底解説！

デザインを指定するための言語であるCSSには様々な単位が存在します。しかし、多岐にわたる単位があることによって、それぞれがどのような意味の単位か分からないことがあるのではないでしょうか。今回はCSSで使用される主な単位である、px・%・em・remを詳しく解説していきます。

・px

まず、一番理解しやすく、CSSを学び始めた際に最初に使用する単位の一つでもあるpxについて解説していきます。

px(ピクセル)は画面の1ピクセル＝1pxとして反映させる絶対単位です。

絶対単位とは画面幅や親要素に左右されない固定の値で、どんな場面でも値が変わらないという点では利点ですが、様々なデバイスがある中では使用しづらい単位になります。

CSSの勉強を始めた当初はこの単位を使用し、CSSを使い慣れてきたら少しずつ単位も変えていきましょう。

・%

次は%について解説していきます。

%は普段からも目にする機会が多いため、分かりやすいと思いますが、親要素を100%とした時の子要素の単位であり、先述したpxとは違う相対単位です。

相対単位とは画面幅や親要素の値に左右される単位です。そのため、例えば、親要素が大きくなったらそれに比例して大きく、親要素が小さくなったら小さく変化していきます。

値は変化しますが、それはデバイスが変化したなどの親要素の値をより良く変化させたが故に起こる良い変化です。

%は同じだけの割合の幅を持った要素を作りたい時などに便利な単位ですので、使いながら慣れていきましょう。

注意：親要素の値が指定されていないと使用できない

先述したように%は親要素を100%とすることで、子要素の値を決定します。そのため、親要素の値が指定されていなければ、%を使用することは出来ません。

%を使用するとき、その値が反映されない場合がありますが、その理由として親要素の値が指定されていないことはよく起こります。

%を使用して、その値が反映されていない時には親要素の値が指定されているのかを確認してみましょう。

・em

次はemについて解説していきます。

emは%と同じ相対単位で、親要素のフォントサイズに比例して表される単位になります。

例を挙げて説明していきます。下記のコードを見てください。

<div class="parent">
   親要素のフォントサイズは100pxです。 
    <p class="child">子要素のフォントサイズは50pxです。</p>
</div>

.parent {
    font-size: 100px;
}

.child {
    font-size: 0.5em;
}

上記のコードと画像を見て分かるよう、CSSで使用される単位であるemは親要素の値を1emとして表示するための単位となります。

今回は親要素のフォントサイズを100pxとしたため、0.5em＝50pxでしたが、もし、親要素のフォントサイズが指定されていない場合、1em＝16pxとなります。

emは一見、pxからの単位換算が難しいように感じるかもしれませんが、していることは%とほとんど変わりません。少しずつ慣れていきましょう。

・rem

次はremについて解説していきます。

remは先述した%とemと同様に相対単位で、特に似ている部分が多い単位ですので、比較して考えていきましょう。

emは親要素でのフォントサイズを基準とする単位でした。それに対し、remはルート要素のフォントサイズを基準とする単位になります。

ルート要素とはhtmlタグのことで、HTMLファイルのコードの全てを囲むタグになります。そのため、emと似たような単位である上に基準がルート要素の一つだけになり、管理がしやすくなるという利点があります。

remもemと同様にデフォルトの値が1rem＝16pxに設定されています。

注意：body要素にはremではなく、emを使用する

これはGooglechromeを使用する際に起きるエラーの一つですが、body要素にremを単位として使用すると、思うようなフォントサイズに表示されないことが起こります。

これはbody要素にremを使用したことにより、body要素をルート要素と誤認してしまったことが原因で、html要素で指定したフォントサイズが機能していないことを表しています。

そのため、body要素でフォントサイズを指定する場合にはremを使用するのではなく、emを使用するようにしましょう。

応用：ルート要素のフォントサイズを『62.5%』に指定する

emを使用していた時はその親要素の値によって、フォントサイズが変化していました。しかし、remを使用する際ことにより基準となる値が一つになりました。

それを利用し、更にpxに換算することを簡単にするためにルート要素のフォントサイズを『62.5%』に指定する方法があります。

先述したようにデフォルトの値は1rem＝16pxですので、ルート要素のフォントサイズを『62.5%』に指定することで、基準となる値を10pxに変えることが出来ます。

このように指定することで、pxへの換算がしやすくなることに加え、レスポンシブデザインへの対応もルート要素のフォントサイズを変えることで、簡単に管理することが可能になります。

html {
    font-size: 62.5%;
}

単位まとめ

今回はCSSで使用する単位についてまとめて解説していきました。それぞれの単位のメリット、デメリットを理解し、その単位がどの場面では適切で、どの場面では適切ではないのかをしっかりと判断できるようにしていきましょう。