こんにちは、なっちる先生（@nacchi_jagariko）です。
現在、フリーランスとして活動しています。
突然ですが、cssでサイズ指定をするとき、サイズの単位について注意しながらコードを書いていますか？
「px」しか使ってなくて、特にこだわってなかった
という方、多いのではないですかー？
実は、cssでのサイズ指定方法には「px・％・em・rem」があって、それぞれ違いがあります。
今回は、そんな「px・％・em・rem」の違いについて、説明していきます。
この記事は以下のような人向けです。
サイズ指定の「px・%・em・rem」ってどう違うの？
では、参りましょう〜。
絶対値と相対値
まず、サイズ指定には「絶対値と相対値」があります。
絶対値というのは、名前の通り「絶対」ということで、絶対的な値です。
その反対で、相対値というのは、基準になる要素の大きさを参照したときのサイズ指定方法です。
基準になる要素には、「親要素」か「ルート(html)」の場合があります。
「px・％・em・rem」の分類分け
「px・％・em・rem」を分類分けすると、
絶対値には、
- 「px」
が当てはまります。
相対値には、
- 「%」（親要素基準）
- 「em」（親要素基準）
- 「rem」（ルート(html)基準）
が当てはまります。
絶対値の「px」だけで大丈夫じゃね？
と思う方がいるかもしれません。
しかし、相対値を使うと、
- レスポンシブサイトを制作する場合に、基準となる要素のサイズ指定をすればいいだけになり、コードがスッキリする
- 文字サイズが拡大すると大きくなる（お年寄りなどに優しい）
という利点がありますので、少しは知っておくべき話です。
サイズ指定方法（px・%・em・rem）の違い
では、早速「px・%・em・rem」の違いについて、個別で説明していきます。
「px」
前述した通り、絶対的な値の「px」です。
少し踏み込んで説明すると、px（ピクセル）に決まった大きさはありません。
画面解像度（dpi）によって大きさが変わります。
「px＝○○mm」と表すことができないのです。
へ、画面解像度によって違うんなら、絶対値じゃないじゃん！
と混乱してしまう方がいらっしゃるかもしれませんが、また別の次元での話になります。
少なくとも、Web制作でpxと解像度(dpi)について気にする場面は、滅多にないので、深く考えなくて大丈夫です。
「%」
ここから相対値になります。
%（パーセント）は、親要素を基準としたサイズになります。
See the Pen MROgWN by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.
上のコードからわかるように、親要素によってサイズが違いますね。
最初に出てくるpタグは、15px、
次に出てくるpタグは、30px、
になります。
「em」
em（エム）は、%と同様、親要素を基準としたサイズになります。
「%」を２桁繰り下げたものが「em」になります。
「100% = 1em」になります。
See the Pen VNrZez by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.
大きさを見ても、%と同じですね。
「rem」
rem（レム）は、%とemと毛色が違い、ルート（html）が基準になります。
単位の考え方としては、emと同じです。
See the Pen yrPBML by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.
上のコードでいうと、ルートの20pxが基準になって、
最初に出てくるpタグは、10px、
次に出てくるpタグは、10px、
になります。
おまけ（vw・vh）
たまに「vw・vh」も見かけることもありますので、簡単に説明しておきます〜。
vw・・・viewport width。ビューポートの幅に対する割合です。
vh・・・viewport height。ビューポートの高さに対する割合です。
画面の横幅全体を「100vw」とみなしますので、 例えば、10vwと記述すると、「ビューポートの全体幅に対して1/10」のサイズになります。
簡単に言うと、
単位は「%」と同じで、
基準が「スクリーンの幅」or「スクリーンの高さ」
です。
わかりやすいですし、基準とするところがシンプルなので、便利なサイズ指定方法ですね！
まとめ
いかがだったでしょうか？
サイズ指定方法にもいろいろとありますね〜。
サイトの用途や都合によって、サイズ指定を使い分けてみてください！
以上でなっちる先生の授業を終わります。
素敵なプログラミングライフを！