CSSのpx、%、em、rem、vw、vh指定について！きちんと使い分けよう！

こんちには！
フロントエンドエンジニア・マークアップエンジニアのリクです！

CSSで％指定にするか、px、remなどの様々な指定方法で迷うことはないでしょうか？

• そう言われると全部同じ指定にしている…
• どんな種類の指定方法があるのか分からない…
• 使い分ける必要はあるの？…

上記のように、疑問に思っていることを解決できる記事となっています。

僕は、フロントエンドエンジニア・マークアップエンジニアとして、主にWebサイトを作成しています。

Webページのコンテンツ内容の横幅や、文字の大きさなどを指定する際の指定方法で、「px」や、「％」などの様々な指定方法が浮かぶかと思います。

実際にどの指定方法が適正なのか、具体的に分からない方も多いかと思います。ただ、指定方法に正解はないので、自分なりに指定方法についてまとめてみました。

Webサイトを実際に作成する際に知っておくとためになる、CSSの指定方法について解説していきます！

※エンジニアについては、こちらの記事「エンジニアって実際どんなお仕事なの？」を読んでみてください。

1 絶対値と相対値について

CSSでの指定方法には細かくpxや、%などの指定方法がありますが、その前に大きく2つに分けることができます。

「絶対値基準」にするのか、「相対値基準」にするのかです。そもそも「絶対値」と「相対値」について、分からない方もいるかと思いますので、その違いを解説します。

絶対値とは？

絶対値とは、他要素の大きさに左右されず、固定された値となります。

今回ご紹介する単位で言いますと、「px」が該当します。

相対値とは？

絶対値とは逆に、他要素の大きさに影響され、可変的な値となります。

今回ご紹介する単位で言いますと、「%」、「em」、「rem」、「vw」、「vh」が該当します。

親要素に対して〇〇%や、画面幅に対して〇〇vh可変するということになります。

2 単位（px、%、em、rem、vw、vh）について

CSSには、数多くの単位が存在します。ここでは、実際にWebサイトを作成する際に主に使用する単位を詳しくご紹介します。

※CSSについては、こちらの記事「【初心者向け】CSSとは？CSSってどう書くの？」を読んでみてください。

pxについて

「ピクセル」と呼び、デバイスの1ドットを表す絶対値です。画面サイズの可変や他要素の大きさに関わらずサイズが固定される絶対値です。

%について

親要素に対する相対値です。親要素にサイズが指定されていなければ、ブラウザ幅（画面幅）になります。また、プロパティによっては何が基準になるか変わってきます。

例えば、widthやmargin、paddingプロパティなら親要素の横幅に対する割合、font-sizeプロパティなら親要素の文字サイズに対する割合となります。

emについて

emは親要素のフォントサイズに影響を受ける単位です。親要素をさかのぼってフォントサイズを継承していきます。

親要素にフォントサイズが指定されていない場合は、bodyのデフォルトフォントサイズは16pxが常に基準になります。

remについて

ルート要素のフォントサイズが基準になります。

つまり、一番上の親要素の指定が基準となります。

デフォルトサイズが16pxなので、フォントサイズが1remの場合は16pxになります。2remの場合は32pxとなります。また、ルート要素のサイズを変更すると、各要素に指定していたremの大きさも一括で変更されることになります。

vwについて

vwは「viewport width」の略で、画面幅を100とした時に1vwであれば、ビューポート幅の1％ということになります。

例えば、ブラウザが1200pxのとき1vwは12px、800pのとき1vwは8pxを表すことになります。

vhについて

vhは「viewport height」の略で、1vhに対して、ビューポートの高さの1％に等しくなります。こちらもvwとセットで覚えておくといいと思います。

3 それぞれの単位の使い分け！実戦で役立つ！

ここまで、代表的な単位を解説してきましたが、どこの場面でどの単位を使用すれば良いのか迷うかと思います。そこで、これらの単位をどのような場面でどう使用するのかまとめていきます。

フォントサイズ

フォントサイズは結論から言いますと、「rem」の使用をおすすめします。

pxで指定すると、拡大・縮小に影響されないので、レイアウトが崩れる場合があります。

emと％で指定すると親要素の大きさに左右され、またvwで指定するとディスプレイサイズ次第でフォントの大きさが極端になってしまいます。なので、ここではremを指定してあげましょう。

要素の大きさ

marginや、paddingなどの要素の大きさも「rem」の使用をおすすめします。

remで指定しておくと、ブラウザのフォントを変えた時に要素や余白も相対的に合わせて変動します。なので、拡大・縮小を行った際にレイアウトが崩れにくくなります。

例えば、要素の単位をpx指定し、フォントサイズをrem指定にしたとします。そうすると、拡大することにより、要素の大きさはpx指定なので変わらず、文字の大きさがremなので、文字だけが大きくなり、要素の中で見切れてしまいます。

こうなることを防ぐには、要素サイズとフォントサイズをpxかremのどちらかに統一させる必要があります。

どちらもremで指定しておくと、要素とフォントサイズが相対的に拡大・縮小されるため、余白も含めた大きさの関係性は維持されます。

包含的な親要素、画面幅いっぱいに表示させたい要素

包含的なcontainer要素や、画面幅いっぱいに表示させたいheaderやfooterなどの要素は、「％」の使用をおすすめします。

％指定は親要素に影響を受けるので、親要素がwidth:100%と指定していれば、その直下の要素はその親要素に対して100％分広げることができます。また、画面幅など包含されている要素に対して2等分、3等分といった相対的なサイズで指定したい場合は％指定が必要になります。

pxやremなどで固定した指定をすると、画面幅を小さくした際などに画面から見切れたり、横スクロールが発生したりなど、レイアウトが崩れる原因となります。

字間、行間

letter-spacing（字間）、line-height（行の高さ）は、文字の大きさに合わせて相対的に指定したほうがキレイに整いますので、フォントサイズと相関的に指定したいプロパティは「em」が扱いやすいです。

実際は一つ一つに記述するのも効率が悪いので、共通パーツとしてフォントサイズ設定のclassを設定し、そこにletter-spacingやline-heightも記述しておくのが良いです。

marginやpaddingもrem指定をおすすめしましたが、文字サイズに合わせた余白を設けたいならemで問題ありません。

可変させたくない要素

ブラウザの幅が可変しても大きさや太さを変えたくない、枠線や図形などでは「px」で指定することをおすすめします。

画面幅を見て表示させる要素

画面幅に対して「何％分表示させる」ということが決まっている要素に関しては、vwで指定することをおすすめします。

1vw＝画面幅の1％なので、100vwであれば画面横幅100％になります。

画面の高さも同様で、1vh＝画面の高さの1％になります。

フォントサイズにvwを指定すると、画面幅に合わせて常に可変するので、極端なサイズになります。

4 まとめ

CSSでの単位（px、%、em、rem、vw、vh）指定について、解説してきました！

今現在でも、完璧に崩れないWebサイトを作成することは難しく、なるべく崩れにくいWebサイトを作成することで、後でメンテナンスがやりやすいようにしておくことが重要になってきます。

これらの単位を理解した上で、何を使うか選んでいきましょう！