Web制作で利用する単位を丁寧に解説！emとかremとかややこしい！
お疲れ様です。アートトレーディングの野菜です。
もう夏休みも終わりの時期で、そろそろ涼しくなっていいのでは…と思いますね～
それでも夕方なんかはちょっと過ごしやすくなってきたかな…?
今回はWebを制作する際に使う『単位』についてをお話させて頂こうと思います。
日常生活でも使う%のようなものも使いますし、ちょっと普段聞かないような変わった単位も出てきます。
使い分けるとちょっとしたところで便利ですので、ぜひ覚えてみてくださいね！
0は単位不要
いきなり不要なケースについての説明ですが、0は単位不要です。
基本的に単位は『10%』とか『100%』とか、何らかの数値に対して付けることになるかと思います。
その数値が『0』の場合、0%も0pxも0は0。何の単位を付けようと変わらないことになりますので、0の場合は単位を付ける必要はありません。
もちろん付けても間違いになったりはしないのですが、無い方が文字量が少なく済んで良いです。
余談ですが小数点前が0の場合（0.5とか0.8とか）の0も省略可能（.5とか.8と書いて良い）です。
絶対単位と相対単位
前回の記事 https://note.art-trading.co.jp/n/nd29149fcf54d でも少し触れましたが、単位には絶対単位と呼ばれるものと相対単位と呼ばれるものがあります。
絶対単位は絶対的、不変的な基準で測ることのできる単位です。
『cm』や『kg』なんかがこれにあたります。
パソコン上で使われるものとしては他に『pt（ポイント 1pt = 1/72インチ）』などもあります。
『px』もcss上は絶対単位として扱われます。
対して相対単位は『%』など状況に応じて相対的に変化する単位です。
紙面の広告などはA4に印刷すれば表示サイズは絶対にA4から変わりませんが、サイトの場合は表示するサイズが画面やブラウザなど環境によって変わりますので相対単位を利用する機会は多くなります。
よく利用する単位
よく利用する単位は『px』『%』『em』『rem』『vw』『vh』などがあります。
『px』以外はすべて相対単位です。
『cm』や『pt』なども利用自体は可能ですが、ディスプレイの表示指定としてはあまり推奨しません。
解像度などに応じて計算されて表示されますが、物差しで測ってもばっちり1㎝とはだいたいならないです。
px（ピクセル）
こちらについては今までの記事でも何度か触れましたが、デジタル画像や画面を構成する最小の要素でその大きさを表す単位になります。
ボタンやアイコン、サムネール画像など、サイズを固定化して表示させたいものに利用します。
当然、画面や表示エリアのサイズより大きな数値を設定するとはみ出しますので注意してください。
%（パーセント）
親要素を基準として大きさを指定する場合に使います。
親要素いっぱいに設定したい場合は『100%』、半分にしたい場合は『50%』となります。
em（エム）
現在のfont-sizeを基準としてサイズを指定します。
1emだと現在の文字サイズと同じ大きさ、となります。
例えば見出しや段落下に半文字分余白を開けたい場合は『margin-bottom : .5em;』となります。
rem（レム）
『root em』という意味の単位で、上記emと同じく文字サイズを基準とするのですが、現在の文字サイズではなく、root（最上位階層）の文字サイズが基準となります。
rootはつまり一番の親要素ですので『html』タグに設定したfont-sizeが基準です。
font-sizeは継承されるのでemや%で文字サイズを指定した場合、親や先祖と同じ文字サイズに戻す数値がややこしくなりがちですが、remの場合ページの文字基準が1つのため考えやすいです。
『em』の場合などは孫要素は親要素から半分のフォントサイズを引き継ぐので倍のサイズ指定となる。
例)元→1em 半分→0.5em 親の親と同じ→2em
『rem』だと基準が『htmlのfont-size』一つにまとまっているので元のサイズと同じ数値を設定すれば良い。
例)元→1rem 半分→0.5rem 親の親と同じ→1rem
割り切りにくい数値になったり、階層が重なったりすればするほど後者が考えやすい。
ここまでであれば、絶対単位のpxも当然基準は1つであるのでもっと単純に考えられるのですが、remのメリットとしては基準値を変更できる、という点です。
remはrootのフォントサイズが基準なので、これを変更すれば相対的に文字サイズを一括調整できるという利点があります。
ただし、この一括調整を活かすのであれば、文字に応じてサイズが変動すべきもの（例えばリンクボタンの大きさとか）などをきちんとremやemで連動させておかないと意味がなくなります。
なお、現在の主なブラウザのフォントサイズはデフォルトで16pxなのでrootのフォントサイズを『font-size: 62.5%;』とすると1rem=10pxになり計算が楽になります。
pxやremはうまく使い分けると更新などに有利に働くかと思いますので、それぞれの特徴をよく把握して利用してみてください。
vw（ブイダブリュー）
『viewport width』という意味の単位です。
viewport、つまりブラウザ画面幅が基準になります。
100vwで画面横幅と同じサイズ。50vwだと半分です。
高さ（height）の値にも指定できるので『width:50vw; height:50vw;』とすると、画面半分のサイズで幅に応じて拡大・縮小する正方形が作れます。
また、文字サイズとして指定するとこちらも画面に応じ拡大・縮小する文字にできるので、デザイン文字などに利用するのに良いです。（どこまでも小さくなったり大きくなったりしかねないので、別途限度を作る必要は出てきます）
注意事項としては、スクロールバーも含んだブラウザ幅の指定となるため、ブラウザやデザインなどによって100vwだとスクロールバー分はみ出す場合があります。
vh（ブイエイチ）
『viewport height』という意味の単位です。
前述『vw』と同じくviewportのこちらは画面の高さを基準とします。
100vhで画面高さと同じです。
キービジュアルを画面高さいっぱいにする場合や、ハンバーガーメニューを画面高さいっぱいで表示する場合などに利用できます。
こちらも注意事項があり、スマホの機種などによっては、アドレスバーを無視してしまってその分はみ出してしまうケースがあります。
スクロールバー、アドレスバーサイズについてですが、例えばスクロールバーは『画面全体の幅 - bodyの幅』でその差分がスクロールバーの幅になります。
親要素がbody幅いっぱいの場合は後述の計算式をつかいcssで算出することも可能ですが、常に幅いっぱいとは限らないため、算出にはJavaScript（ジャバスクリプト）などの利用が良いです。
JavaScriptについては、また今後改めてご紹介できればと思っております！
cssでの計算式
cssの値には計算式を利用する事が可能です。
例えば一覧画面などで単純に画面に5つコンテンツを並べたい場合は『width:20%;』とすればいいのですが、間隔をそれぞれ10px開けたい場合は%だけでは設定しきれません。
異なる単位を組み合わせて指定したい場合、cssの値に計算式『calc()』を入れると四則演算が設定できるようになります。
例えばこの場合だと20%から中4つの間隔（40px ÷ 5）を引いたものを横幅としたいので『width:calc(20% - 8px);』という記述になります。
こちらは異なる単位でなくてももちろん利用できますので前述の5つ並べるを『width: calc(100% / 5);』とすることも可能です。
また10pxの間隔をとることも含めて『width: calc((100% - (10px * 4)) / 5);』のように記述することも可能です。『calc()』の中の『()』は通常の算数同様先に計算する、という記号になります。
注意事項としては割り切れない数値、例えば100% ÷ 3などを指定すると小数点以下の処理の違いでブラウザによって思ったように収まりきらないケースがある、という点です。
一部古いブラウザなので、もうあまり気にしなくても良いかもしれませんが、その場合には『calc((100% - 1px) / 3)』のように少しゆとりを持たせると回避できます。
四則演算記号、＋－はそのまま半角で『+』『-』です。
÷は『/』、×は『*』を使います。
まとめ
いかがでしたでしょうか？
日頃使わない単位あるので中々取りつきにくいところもあるかと思いますが、うまく使い分けると更新作業など色々と楽になるはずです！
是非意識して使ってみてくださいね！