【CSS単位】意外と知らない? [px][em][rem][%][vh][vw]の違いそれぞれを徹底解説！
いつも何となく使っている、いざ説明するとなると分からない…、%とvh/vwって何が違うの?
そんな疑問に答えます。
単位の基本
CSSでは、要素の大きさや長さを、様々な単位を使って指定することができます。使用できる単位はたくさんありますが、ここでは一般的によく使われる単位、
- px
- em
- rem
- %
- vh
- vw
について解説していきます。
絶対単位と相対単位
CSSの単位には絶対単位・相対単位があります。これらはCSSの単位を理解する上で最も重要です。
次の章で詳しく解説いたしますが、絶対単位はサイズを変えたくないもの向き、相対単位はレスポンシブ対応向きです。
- 絶対単位はサイズを変えたくないもの向き
- 相対単位はレスポンシブ対応向き
絶対単位：px（ピクセル）
px（ピクセル）は絶対単位です。日本語では「画素」とも言われます。これは画面上で画像を表示させるための最小単位です。
絶対単位は他の要素による影響を受けないので、もし、サイズを変更したくない要素がある場合、pxは良い選択です。
また、あまり使われることはありませんが、他の絶対単位としてcm,mm,in(inch)などがあります。
相対単位：em,rem,%,vh,vw
相対単位とは他の要素の影響を受けてサイズが変わる可能性のあるものです。
主なものを一覧表にまとめます。
| em | 親要素のフォントサイズ |
| rem | Root Element（HTML要素）のフォントサイズ |
| % | 親要素に対する割合 |
| vh | Viewport Height ブラウザの表示領域の高さ(=100)に対する割合 |
| vw | Viewport Width ブラウザの表示領域の幅(=100)に対する割合 |
pxなどの絶対単位はどのデバイスでも大きさが変わりません。そのため、デバイスによっては形崩れを起こすことがあります。
それに対し、相対単位では他の要素に従って拡大・縮小するため、様々なデバイスでより適切に表示することができます。「相対単位がレスポンシブ向き」と言われるのはそのためです。
文字サイズーemとremについて
どちらもよくフォントサイズの指定に使われる、混同しやすい単位です。
emとremの違い
1emも1remも1文字を表します。
それぞれの違いは、基準にするフォントサイズがどこかということです。
- emは親要素のフォントサイズを基準にしているのに対し、
- remはroot要素（＝<html>の要素）のフォントサイズを基準にしています。
そのため、一律でフォントサイズを調整したい場合はremが向いています。一方、emはページの一部分だけフォントサイズを変えたい時などに、より細かい指定をすることができます。
em/remとvh/vwの違い
em/remはフォントサイズの指定に使われるのに対し、vh/vwはボックスサイズ、マージン、パディング等より広範囲の要素の指定に使われます。
割合系ー%とvhとvw
%、vh、vwは皆、何かに対する割合を元にしています。
vh/vwと使うタイミング
前述の通り、vhは高さ、vwは幅に基づいた割合です。
1vh = 1%、 50vh = 50%、 100vh = 100%
1vw = 1%、 50vw = 50%、 100vw = 100% という風に記述します。
これは、表示する要素を画面幅きっちりに合わせたい時に役立ちます。
例えば、下の画像では、背景色のクリーム色の上に width:100vw; で指定した模様を重ねています。
See the Pen Fruit Sand by Yuhomyan (@yuhomyan) on CodePen.
こちらでは逆に、高さ100vhの模様を重ねています。
See the Pen Fruit Sand-2 by Yuhomyan (@yuhomyan) on CodePen.
この様に、要素を画面いっぱいに表示させたい時や、きっちり半分表示させたい時、vh/vwは便利です。
%とvh/vwの違い
上の説明を読むと、「％と何が違うの…？」という疑問も出てくるかもしれません。
確かに%とvh/vwは、どちらも割合に基づいた単位です。
違いは、vh/vwはビューポート（ブラウザの表示領域）を基準にしているのに対し、%はビューポートに関係なく、親要素のサイズに対するパーセンテージを表していることです。
分かりやすい例でいうと、%は文字サイズ等にも使うことができます。例えば親要素の文字サイズが100pxの時、80%を指定すると文字サイズは80pxになります。（めちゃくちゃ大活字だけど😂）
最後に
以上！
よく使うCSSの単位まとめでした！
それぞれの特徴を理解しておくといろんなものが描けて便利です。
楽しくコードを書きましょう！