みなさんこんにちは！
フォントサイズ、パディング、マージンの値でem,remなどを見かけることはありませんか？
普段はpxで指定しているので、emとかよくわからない。なんなの？そういった方に向けて、今回は「px,em,rem,%,vw,vh」を紹介していきます！
結論
・pxは絶対値の単位
・emは親要素のfont-sizeを1として倍率をとる
・remはrootのfont-sizeを基準値とする
・%はheight,width等で使われると親要素のheight,widthを基準 font-sizeは親要素のfont-sizeを基準値にする
・vw,vhはブラウザが表示されている画面の領域を基準とする
px（ピクセル）
px（ピクセル）は常に固定値を持つ絶対値の単位指定です。親要素やroot、画面サイズなどに影響されず、必ず指定したサイズになります。
em（エム）
em（エム）は親要素のfont-sizeを基準とし相対的な文字サイズが取られます。親要素が16pxの場合、1emは16px。親要素が16pxの場合、2emは32px
また、親要素にfont-sizeが指定されていない場合は、さらにその上の要素を見に行きます。
parentクラスはfont-sizeのプロパティが指定されていないので、上の階層であるbodyにいきます。
bodyにもfont-sizeが指定されていない場合は、最終的にHTML要素のfont-sizeが基準になります。
HTML要素のfont-sizeはデフォルトで16pxになりますので、.parentは16pxになります。
childクラスの要素の場合は、htmlのfont-size:16px;をとりますので16 x 2 = 32pxとなります。
rem（レム）
rem（レム）はrootのfont-sizeを基準値とします。
rはrootの略で、最上位階層を意味します。
HTMLの最上位要素は「HTML」になり、HTMLに指定されたfont-sizeを基準とし相対的な文字サイズを取ります。
htmlに設定されたfont-sizeを基準に相対的な文字サイズを取るので、emと違い、作成していく際にごちゃごちゃすることがありませんね。
%（パーセント）
％（パーセント）は親要素を基準にサイズを取ります。
width,heightの場合親要素のwidth,heightのサイズを基準に横幅、縦幅の割合をとなります。
例:親要素がwidth: 600px;の場合、100%は600px 親要素がwidth: 600px;の場合、50%は300px
あくまで、親要素を基準に相対的な割合をとりますので、height:100%;としても親要素にサイズが設定されていなければ画面に100%ぶんの要素がとられることはありません。
font-sizeの場合親要素のfont-sizeを基準にとるので、emと同じ役割になります。
vw
まずvwの読み方は「フォルクスワーゲン」です。
冗談です。
こちらはviewport widthの略になるのでブイダブリュです。
vwはブラウザが表示されている画面横幅の領域を基準としています。
画面横幅に対して100vwは100%となり、1vwは1%になります。
vh
vhはviewport heightの略です。
こちらはvwの横バージョンになります。
高さを100vwとすると、ブラウザサイズの100%の高さを占めることになります。
vw,vhが%とどう違うかというと、%は親要素のサイズ基準vw,vhはブラウザサイズいっぱいになります
結局、なにを使うのがいいの？
結局フォントに関しては、なにを使えばいいの？ということになりますが、個人の自由で使い分けてもらえればいいと思います。
僕はfont-sizeを指定する際はpxを使うことが多いです。
em、remを使うタイミング
個人的に、emやremに関してはline-height（行高）に使用することが多いです。
例えば、font-sizeが16px, line-heightが24pxの場合、font-sizeを変更しても行高は24pxのままですね。
しかし、emやremにすることでfont-sizeに対しての行高が自動的にとられます。
最後に
過去にwebデザインを挫折してしまった方でも、Webflowを使うことで自然とhtml/cssの知識が身に付きますし、リアルタイムで視覚的に確認することができるので、楽しみながらサイトを作成していくことができます。
Webflowの使い方に関してわからないことがあれば、会員の方はwebflowコミュニティslackや個別メンタリングを質問を。まだ会員ではない方は無料カウンセリングにお越しください！
