こんにちは！プロクラスの杉本です！
最近、フォントサイズにremを使用されているサイトを触る機会があった際に、よく見る単位でも使い方をあまりよく分かっていないなと感じたので、そこで今回はコーティングでよく見る・使われている単位と個人的に最近見つけた気になる単位を使い方と一緒に表にまとめてみました。
単位の種類
単位について調べていくと、下記の表以外の単位はまだまだありましたが、今回は7つご紹介させていただきます。
表を見てみると、単位は他要素の単位や大きさに影響を受けない「絶対値」と他要素の単位や大きさに影響を受ける「相対値」に分かれています。
色々な単位の種類を覚えて、その場面に合わせて使いこなすことがができると、コーディングの幅を広げることができそうですね！
| px | ピクセルの略。１px=1ドットの絶対値。画面サイズの可変や、他要素の単位や大きさに関わらずサイズが固定される。 |
| ％ | 親要素で指定している値によって変動する相対値。親要素にサイズ指定がされていなければ、HTMLの階層を遡ってブラウザ幅（画面幅）が基準となる。 例:親要素が200pxで指定したい要素に50％と指定すれば、その大きさは100pxになる。 |
| em | 親要素のfont-sizeを基準にした相対値。 どの親要素にもfont-sizeの指定がない場合、最終的にはhtmlタグのfont-sizeを基準にした相対値になる。 例:親要素が10pxで指定し、小要素に2emと指定すれば、その大きさは20pxになる。 |
| rem | ルート要素を基準にした相対値。 例:rootに20pxと指定していた場合、1rem=20pxとなる。何も指定しない場合、通常rootは16pxになる。 |
| vw | 「viewport width」の略。ビューポート(ウィンドウ)の横幅を基準とした相対値。 1vwはウィンドウ横幅の1%となるので、ウィンドウ幅が1920pxの場合1vw=19.20pxとなる。 |
| cqw | 親コンテナ要素の幅（width）を基準にした相対値。1cqwは、コンテナ要素の幅の1%に相当する。 例:コンテナの幅を100pxに指定した場合、50cqwは50pxになる。 |
| cqh | 親コンテナ要素の高さ（height）を基準にした相対値。1cqwは、コンテナ要素の高さの1%に相当する。 例:コンテナの高さを100pxに指定した場合、50cqhは50pxになる。 |
参考サイト