どうも、ダイチです。
今回はWebコーディング時に迷いがちな単位の使い分けについて自分なりにまとめました。
先にお伝えしておくとコーディング時の単位に関しては「これが正解」と言い切れるものは無いと思っています。
Web系コーディングの話でよく議論が起こるテーマですが、あくまで様々な方の意見や情報を見たうえで、現時点での僕の認識をまとめた形になっているということをご了承ください！
また、レスポンシブ対応のコーディング時にも意識しないといけないテーマになっているため、よかったら別記事もご覧ください。
当記事の結論
解説は別項に載せていきます。
- フォントサイズ：rem
- 要素の大きさ、marginやpadding：rem
- 親要素にあたる包含的なcontainer要素や画面幅いっぱいに表示させたい要素：％
- letter-spacingやline-height：em
- borerなどの可変させたくない要素：px
- ヒーローイメージやモーダルウィンドウ など画面を占有して表示させる要素：vw
絶対値と相対値
単位には「絶対値」と「相対値」があるので、一応この情報から載せておきます。
絶対値
固定的な値となり、他要素の単位や大きさに影響を受けません。今回紹介する単位の中ではpxがこれに該当します。また、Webコーディングでは使用されることがありませんが、cmやmm、ptなどもこれに当たります。
相対値
可変的な値となり、他要素の単位や大きさに影響を受けます。em、rem、％、vwはこの相対値ということになります。
親要素に対しての〜〜や、画面幅に対しての〜〜といった形で、その大きさを決定する元の数値によって可変する単位ということです。
単位（px、em、rem、％、vw）の違い
px
ピクセルの略です。画面サイズの可変や、他要素の単位や大きさに関わらずサイズが固定される絶対値です。
%
親要素に対する相対値です。親要素にサイズ指定がされていなければ＝ブラウザ幅（画面幅）ということになります。
親要素に200pxと指定されている場合、指定したい要素に50％と指定すれば、その大きさは100pxということになります。
em
emは親要素のフォントサイズに影響を受ける単位です。
<body>
<style>
.em1 {
font-size: 1em;
/* 16px * 1 = 16px */
letter-spacing: 0.5em;
line-height: 1.5em;
}
.em2 {
font-size: 2.5em;
/* 16px * 2.5 = 40px */
letter-spacing: 0.5em;
line-height: 1.5em;
color: red;
}
.em2-child {
font-size: 0.8em;
/* 40px * 0.8 = 32px */
letter-spacing: 0.5em;
line-height: 1.5em;
color: blue;
}
</style>
<div class="em1">
<p>em1で指定しています。</p>
</div>
<div class="em2">
<p>em2で指定しています。</p>
<div class="em2-child">
<p>em2-childで指定しています。</p>
</div>
</div>
</body>上のようにclass=em1やclass=em2のように親要素を遡ってもフォントサイズが指定されていない場合は、bodyのデフォルトフォントサイズ(16px)が常に基準になります。em2-childは親要素em2のフォントサイズに影響を受けます。
言い換えると、親要素にフォントサイズが指定されていなければ、単位emは一文字分の大きさという理解もできます。
rem
ルート要素のフォントサイズが基準になります。rootに20pxと指定していた場合、1rem=20pxとなります。何も指定しない場合通常rootは16pxです。
rootのフォントサイズを変更すると、各要素に指定していたremの大きさも一括で変更されることになります。
<body>
<style>
.rem1 {
font-size: 1rem;
/* 16px * 1 = 16px */
letter-spacing: 0.5rem;
line-height: 1.5rem;
}
.rem2 {
font-size: 2.5rem;
/* 16px * 2.5 = 40px */
letter-spacing: 0.5rem;
line-height: 1.5rem;
color: red;
}
.rem2-child {
font-size: 0.8rem;
/* 16px*0.8 = 12.8px */
letter-spacing: 0.5rem;
line-height: 1.5rem;
color: blue;
}
</style>
<div class="rem1">
<p>rem1で指定しています。</p>
</div>
<div class="rem2">
<p>rem2で指定しています。</p>
<div class="rem2-child">
<p>rem2-childで指定しています。</p>
</div>
</div>
</body>先ほどのemと数値は同じにしてます。違いはrem2-childの大きさです。em指定の場合は親要素に影響しましたが、remの場合は親要素の影響は受けないので、rootの16pxが基準になります。
vw
vwは「viewport width」の略で、画面幅を100とした時の単位になるため、1vwであればビューポート幅の 1%ということになります。
vhはheightなので高さに対する割合を指定できます。他にもvmin（ビューポートの幅と高さのうち、値が小さい方に対する割合）、vmax（ビューポートの幅と高さのうち、値が大きい方に対する割合）もあります。
PCから閲覧する場合はブラウザ幅を可変させることがありますが、その動きに合わせて大きさが変動します。
単位（px、em、rem、％、vw）の使い分け
ここからが本題になります。コーディングを想定して単位をどう使い分けるかをまとめています。
フォントサイズ：rem
pxで指定しているとブラウザの機能にあるフォントサイズ設定をいじった際にも影響を受けなくなる為、ユーザーの想定した拡大・縮小の挙動になりません。
ここの設定をする人は少ないのかもしれませんが、そもそも操作で得たい想定の通りに動かないというのは、ユーザビリティ的な問題があるので、想定通りに表示反映させるためにはpx以外の指定が必要です。
ただ、emや%のように親要素の大きさに左右されるのは管理上大変ですし、vwで指定するとディスプレイサイズ次第では大きさが極端になり視認性が悪くなることが多です。
なのでここは無難なremで指定するようにします。
知らなかった方用に、ブラウザフォントサイズの変更方法が解説されてる参考記事も貼っておきます。
要素の大きさ・marginやpaddingなど：rem
このあたりの指定は正直pxの方が直感的で分かりやすいとは思っているのですが、remで指定しておくとブラウザのフォントサイズ設定を変えた時、要素や余白も相対的にあわせて変動します。
要はOSのズーム機能を使った時と同じような挙動になるため、レイアウトが崩れにくくなるということです。
要素サイズはpx、フォントサイズをremで指定しているような時に、ブラウザフォントサイズを変更するとレイアウトや表示が本来のデザインから崩れることがあります。
下の写真のページはレイアウト要素がpx、フォントサイズがremで指定されていました。
ブラウザフォントサイズ変更前
ブラウザフォントサイズを拡大したら・・・
こんな感じになりました。
要素の大きさはpx指定なので変わらないけど、フォントサイズはrem指定なので、フォントだけ拡大されることで要素の中で見切れています。
こうなることを防ぐには、要素サイズ・フォントサイズもpxかremどちらかに統一させる必要があるのかなと思います。
上に書いた通りどちらもremで指定しておくと、要素とフォントサイズが相対的に拡大・縮小されるため、余白も含めた大きさの関係性は維持されます。
逆にユーザー操作で諸々のバランスを可変させたくない場合は、単位をpxで統一させる必要があります。
ただ一つ注意点ですが、html（ルート要素）に直接pxでフォントサイズを指定した場合、他要素をremで指定していても可変性は失われます。
つまり要素のサイズなどにremを使う意味は実質無くなります。
html {
font-size: 16px;
}
/* ↑ここにpxでフォントサイズを指定すると */
p {
font-size: 1rem;
padding: 1rem;
}
/* ブラウザフォントサイズ機能をいじっても変化しない */親要素にあたる包含的なcontainer要素や画面幅いっぱいに表示させたい要素：％
例えばheaderやfooterなど画面横幅いっぱいに表示させたい要素や、要素を包むためのflex containerのブロックなどです。
％という単位は「親要素」に影響を受けるので、body直下の子要素としてheaderやfooter、container要素などを指定している場合、width:100％と指定すれば、body＝画面幅に対して100％分広げられます。
また、containerブロックや画面幅など、包含されている要素に対して2等分、3等分といったように相対的なサイズで指定したい時などは％指定が必要になります。
というより、pxやremなどで固定的に単位を設定すると、PCブラウザから画面幅を小さく可変した際に画面から見切れたり、横スクロール発生（レイアウト崩れ）の原因になることもあります。
これ以上小さい画面で見ることを想定しない（iphoneSEの320px以下など）要素のサイズはremで指定、それ以上の大きさを指定する時は％で可変に対応させる、という考えもありかなと思います。
letter-spacingやline height：em
letter-spacing（字間）、line-height（行の高さ）は、文字の大きさに合わせて相対的に指定したほうがキレイに整います。
フォントサイズと相関的に指定したいプロパティはemが扱いやすいです。
先ほどemの解説をしたところで記述したコードのように、全て同じ数値＋emで指定してもいい感じのバランスが保てます。
実際は一つ一つに記述するのも効率が悪いので、共通パーツとしてフォントサイズ設定のclassを設定し、そこにletter-spacingやline-heightも記述しておくのが良いかと思います。
上ではmarginやpaddingもrem指定と書きましたが、文字サイズに合わせた余白を設けたいならemで問題ありません。
borerなどの可変させたくない要素：px
ブラウザ幅が可変しても大きさや太さを変えたくない要素、例えば枠線や図形などborderで指定するものについてはpxが適しています。
ブラウザのフォントサイズ設定をいじっても、相対的に可変させる必要の無いサイズ（10px以下程度）のもののイメージです。
ヒーローイメージやモーダルウィンドウ など画面を占有して表示させる要素：vw
画面幅に対して「何％分表示させる」ということが決まっている要素はvwが便利です。
1vw=画面幅の1%なので、100vwであれば画面横幅100％となります。
便利な単位ではあるんですが、画面幅に合わせて常に割合で可変することもあり、フォントサイズなどに指定すると極端なサイズになるなど意外と管理が難しいです。
なのでヒーローイメージやモーダルウィンドウなど、画面占有することが決まってるレイアウトに使用する方が良いのかなと思います。
まとめ
ということで単位の違い、使い分けについて僕なりの考えをまとめてみました。
フォントサイズと要素サイズという、Webサイトのレイアウトを左右する大枠の部分で指定される単位はremに、それ以外は適宜使い分けましょ、というのがこの記事のまとめです。
ここまで書いておいてなんですが、個人的にはpx統一の方が直感的で一番スッキリはすると思っています。GAFA（Google・Amazon・Facebook・Apple）は現在もpxを採用しているようです。
途中書いたブラウザフォントサイズ変更についてどう捉えるか、というところで大きく見解が変わってくるのかなと見ています。
ただ、このフォントサイズ設定を変更している人は全体の3％程度はいるようなので見逃せない数値かなと。
とにかく現時点で正解は無さそうなので、スタイリングの柔軟性も考慮しつつ、固執せずに考えることが最も重要なのかなと思います。
それでは今回はこのへんで！
コメント