px、em、rem、%、vwの違いがわかりますか？単位を正確に知れば使い分けれます。

px、em、rem、%、vwはWEBサイトの各要素のサイズを示す単位ですが、それぞれ意味が違います。

pxのみ固定する単位であり、それ以外は他の数値により相対的に変換する単位です。

emやremは自身および親要素のfont-sizeがベースで、%は親要素のサイズ、vwはブラウザ幅がベースです。

html・CSSで使用する単位

昔からHTML・CSSに慣れ親しんでいる人は、フォントサイズをpxで指定する癖が抜けません。

emやremの単位があって、それらは文字の大きさが可変する事はもちろん知っているでしょう。

しかしいまいち、それらの違いを正確に把握していない事が多いのですね。

可変する単位は余白にも利用

これらの可変単位はfont-sizeだけでなく、marginやpaddingなどの余白にも有効です。

フォントはともかく余白に対しては、emやremを使い慣れない人もいるのではないでしょうか。

本記事へはhtml・CSSで使う各単位の違いや特徴、その使いどころを解説していきます。

訪問ユーザーのためにもきちんと使い分けていくべきですので、丁寧におさらいしたいと思います。

px

よく「1920px×768pxのモニター」という表現がされる様に、画面の1ドットを指す数値が「px」です。

よく画像などで「800px×600px」のサイズ指定がされますが、まさにこれですね。

どんなデバイスでも固定の大きさ

pxは基本どのデバイスであっても、指定サイズで表示されます。

例えばフォントを12pxで指定した場合、PCでもスマホでも12pxの大きさになります。

見え方が変わらないのでイメージしやすい特徴があります。

高解像度の画面の場合

1px内にさらに複数のドットを含む高解像度デバイスの場合、スマホでは12pxが小さく映る場合もあります。

高解像モニターの場合は見え方が変わりますが、ドット数は固定で維持されています。

em

emは相対単位であり、基準となる指定サイズをベースにして算出されます。

ここで基準となるのは、要素自身と親要素が持つ「font-size」の値です。

ここが非常に重要なところです。

全てのem基準はfont-size

emが指定された要素は、常に以下をベース値として参照しています。

余白にem値を入れた場合の例

たとえば、paddingプロパティに指定した場合を考えてみましょう。

HTML

<div class="box"> <div class="inner">子要素</div> </div>

CSS

.box { padding: 3em; } .inner { padding: 1.5em; }

自身および親要素のfont-sizeを参照する

まずboxクラスのpaddingは、2emとなっていますよね。

これは親となる要素が持つ「font-size値」の2倍という意味になります。

しかし上のCSSでは、boxの親でfont-size値が指定されている記述がありませんよね。

body・htmlのfont-size値へ

となると遡って、body要素のfont-size値が参照される訳です。

ここでbody要素のfont-size値も設定されていない場合は、さらに上のhtml要素まで遡る必要がある訳です。

つまりem単位は、font-size値が固定されている要素まで遡って算出されるのです。

CSSに書かない限り全ての要素に対しfont-sizeの指定はありません。しかしhtmlだけはベース値としてfont-sizeが指定されています。

boxクラスのpaddingの値

html要素のfont-size値はデフォルトでは16pxとなっています。

html要素がCSSで指定が無くても基本的に持っているサイズであり、それが16pxです。

そうなるとboxクラスでは、この16pxが継承元になります。

※もし間でfont-sizeが指定された親要素があれば、それがベースになります。

boxクラスのpaddin値

16pxの3倍という事で48pxの余白ができる事になりますね。

innerクラスのpadding値

次にinnerクラスですが、font-sizeの指定はなくboxクラスが親要素です。

つまり先ほど同様、html要素までfont-sizeの指定がないので、html要素の16pxが基準値となりますね。

innerクラスのpaddin値

16pxの1.5倍で24pxの余白ができる事になりますね。

複数のfont-size指定があるem計算

上の例までは参照する先がhtmlの16pxだったので、シンプルに計算できましたね。

では親要素にfont-sizeが指定されている場合の、em計算を見てみましょう。

親要素に複数のfont-size指定がある例

HTML

<div class="box"> <div class="inner">子要素</div> </div>

CSS

body { font-size: 1.2em; } .box { padding: 2.5em; font-size: 1.5em; } .inner { padding: .5em; }

このようにbodyにもboxにもfont-sizeが付いている場合、padding値はまた変わります。

boxクラスのem計算

まずはboxクラスのem算出です。

boxクラスにはfont-size「1.5em」が指定されています。

同じem値のため、より上位の要素を参照している事になりますね。

さらにCSS上のbody要素にfont-size「1.2em」が指定されています。

emですからここでも上位の要素が参照され、先程同様htmlのデフォルトサイズ16pxが基準となります。

boxクラスのfont-size値

これでboxクラスのfont-sizeは28.8pxとなりました。

boxクラスのpadding値

次にboxクラスのpadding「2.5em」の計算です。

先に自身が持つfont-sizeを計算した結果、padding値は72pxになりました。

innerクラスのpadding値のem計算

innerクラスにはfont-size指定がないので、親のboxクラスのfont-size値が基準となります。

boxクラスのfont-size値は、28.8pxと計算しましたね。

よって14.4pxがinnerクラスのpadding値となります。

今まで何気なくem値を使っていた人もいると思いますが、直近のfont-sizeの値が算出の鍵です。

marginやpaddingにおいてem値で表現する場合は全て、font-sizeの数値が基準になっていると覚えておきましょう。

rem

remはemと似た様な仕組みですが、1つだけ大きく違います。

remは間に親要素で指定されたものは無視して、常にhtml要素のfont-size値を基準にする特徴があります。

remはhtml要素のfont-sizeのみベースとする

HTML

<div class="box"> <div class="inner">子要素</div> </div>

CSS

body { font-size: 1.2em; } .box { padding: 2rem; font-size: 1.5em; } .inner { padding: 1.5rem; }

CSSに記載はありませんが、htmlのデフォルトfont-size値は16pxでしたよね。

bodyやboxクラスにem数値が入れ子で設定されていますが、これらはすべて無視です。

boxクラスのpadding値

innerクラスのpadding値

となります。

remは常にhtml要素のfont-size値しか基準にしないので、比較的シンプルになりますね。

%（パーセント）

%の算出基準となるのは、親要素プロパティです。

%を使う場合は、必ず親要素が基準となりますので確認しましょう。

レスポンシブデザインに向く設定

%は常に親要素に対して適切な余白を付けたりする場合に向いています。

div枠内の画像などがまさにそうで、レスポンシブデザインにおいて汎用性が高い単位です。

スマホ版での画像のサイズ可変

PCやタブレットでは原寸大を維持し、スマホ版では枠内100％を維持する、これが定番でしょう。

HTML

<div> <img src="images/img1.png" width="600"> </div>

CSS

@media (max-width: 767px) { div img{ width: 100%; } }

HTML上で直接widthを指定していても、上記CSSを入れておけばスマホ版表示時に100%に広がってくれます。

vw

vwは、ブラウザのサイズによって大きさが可変する単位です。

ブラウザの横幅一杯を常に「100vw」と示し、高さも同様に「100vh」で示すルールが設けられています。

ブラウザ幅を100で割った数値が1vw

つまり1vwはブラウザ幅を100で割った数値であり、1%に相当する事になります。

vwは他のあらゆるサイズ指定の影響を受けません。

ブラウザ幅が1920pxの場合

1920px幅一杯の画面で要素に1vwを指定したのなら、19.2pxサイズになります。

ブラウザ幅が1200pxの場合

同様に1200px幅一杯の画面で要素に1vwを指定したのなら、12pxになるという訳です。

vw利用時の注意

全体的なレイアウト配置時にvwを使うと、スクロールバーが出る事があります。

それはvwがスクロールバーの幅を含む仕様であるためです。

width: 100vw;と指定するとスクロールバーの幅分だけ、横スクロールが発生します。

vwは間にどのような幅指定があっても、常にブラウザ幅をベースにします。

単位の使い分け

ではそれぞれどのように単位を使い分けていくべきなのでしょうか。

基本的に「ダメなやり方」は存在しませんが、できる限りメリットを活かした使い方をしていくべできです。

文字サイズにpxを使う場合

文字の拡大から全体の拡大へ

今のブラウザは、文字の大きさ変更から全体を拡大表示させる方向に推移しています。

キーボードの「Ctrl」を押しつつマウスホイール動かすと、全体が大きくなりますね。

マウスホイールをクルクルと回転させると大きさが変わります（手前で縮小、奥で拡大）。

この方法なら、px固定していても文字が等倍に拡大縮小されます。

その意味でPC画面では、文字サイズはpxでもemでも大丈夫だと言えます。

今はレスポンシブデザインの時代

しかし今はスマホでWEBページを見る事が多い時代ですから、固定pxでフォントを固定してしまうのは良くありません。

特に見出し（h1,h2,h3など）はスマホ版で大きく映る事が多いので、必ず調整が必要になります。

それぞれpx指定する形でも良いでしょうが、そんな事をしているとCSSが長くなり管理が煩雑になりますよね。

やはりemなどを使って、場面ごとに可変させていくべきです。

pxとem・remを併用する場合

font-sizeにem（rem）を利用し、それ以外のmargin・paddinなどはpxで固定する方法を使っている人は多いと思います。

スマホで確認すると、em指定されたfont-sizeだけ可変し、px指定されたその他の要素は変わりません。

全体的なレイアウトはそのまま要素内の文字サイズだけ変わるので、正直なところ見やすさは向上しません。

marginやpaddingにも可変単位を使う

本来は余白部分にもきちんとemやremを使うべきでしょう。

それなら文字サイズと一緒に余白も比例して可変していきます。

全体的なレイアウトとデザインの比率を維持しつつ、文字サイズを変化させる事ができる訳です。

より読みやすくなると言えますね。

%とvwについて

画像の幅を親枠に対する割合で指定するのに、%は重宝します。

width（height）は必ず、親要素のwidth（height）に対する割合で計算されるからです。

もし画像がdiv要素の中にあれば、そのdiv要素の幅に対して割合表示されます。

レスポンシブデザイン的に向いている単位と言えるでしょう。

構成枠をコントロールするならvw

vwやvhは、そのような親要素の影響を全く受けずに画面枠のみを焦点に入れています。

ですのでfont-sizeの指定ではなく、レイアウト枠の余白を構成したりする場合に向いています。

特にスマホ版で画像の幅を画面の枠幅に合わせるなら、vwやvhを使うべきですね。

逆に%では、スマホ版でビューポートの幅を基準にするのは適していません。

emとremの使い分け例

次にレスポンシブデザイン時のemとremの使い分け例を紹介します。

現在の要素や親要素のfont-size指定の影響を受けたくない場合はrem、それ以外はemを使いましょう。

例えばリンクテキストの余白等には、文字の大きさに応じて可変する様emを使います。

それに対しサイトの横幅を構成するコンテナ等なら、remを使うのが良いでしょう。

レスポンシブデザイン向けコンテナと見出しの単位例

レスポンシブデザインにおけるCSSのem・rem設定の一例です。

CSS例

html { font-size: 17px; } @media (max-width: 767px) { html { font-size: 15px; } } @media (max-width: 400px) { html { font-size: 13px; } } header { font-size: 1.5rem; } footer { font-size: 0.75rem; } h1 { font-size: 3em; } h2 { font-size: 2.5em; } h3 { font-size: 2em; } p{ font-size: 1.5em; }

まずはhtmlとデバイス向けのメディアクエリにおけるfont-sizeを決めておきます。

スマホ等のデバイスでは、htmlのfont-size自体を小さくしています。

レイアウト枠にはrem指定

その上でheaderやfooterなどのメインコンテナ枠となる部分には、remサイズを入れています。

これらrem値の参照先は上部htmlのfont-size値であり、他の要素の影響を受けません。

メディアクエリ時のhtmlのfont-sizeの影響だけを受けるので、多少小さくなります。

見出しやpはem指定

それに対し見出しやpタグは、emで設定されています。

上記CSSでは他の親要素指定はありませんが、指定があればその影響を受けて可変します。

ピンポイントで文字を大きくしたい箇所には、親要素にfont-sizeの指定を入れればよい訳です。

この様にコンテナ枠はrem、文字要素はemを使うのが基本となりますね。

一押し人気コーナー紹介