【サイズ指定】px,em,rem,%,vw,vhとは?

Shohei Yano
2022-01-12

みなさんこんにちは!
フォントサイズ、パディング、マージンの値で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や個別メンタリングを質問を。まだ会員ではない方は是非無料カウンセリングにお越しください!

https://academy.likepay.dev/free-lesson