絶対値指定
px
絶対値指定とは何があっても変わらない数値。
pxが唯一のCSSでの絶対値指定の値です。
初学者のうちはpxを最初に学び、使うことが多いですが
レスポンシブデザインを学ぶにつれ、場合によってはpxを使用するのが不便な場面に遭遇します。
See the Pen Untitled by 高龍 (@ykwxttph-the-encoder) on CodePen.
と、このように水色の領域は800pxのため、800pxを下回る画面では領域がはみ出して表示されてしまいます。
相対値指定
%
相対値とは、要素と比較して幅や大きさなどを決める値のことです。
先ほどの例で見てみましょう。
See the Pen Untitled by 高龍 (@ykwxttph-the-encoder) on CodePen.
幅がいっぱいに広がり（上下左右に謎の余白があるのはcodepenの仕様かもしれません）、倍率で変えてみても幅いっぱいになっていますね。主にレスポンシブデザインで活躍する基本的な相対値です。
See the Pen Untitled by 高龍 (@ykwxttph-the-encoder) on CodePen.
「%」の指定の特徴は、親要素の大きさの割合によって大きさが変わるという点です。
上の図のように「width:100%」の親要素に対してそれぞれ80%,50%,30%と指定しています。
vw/vh
vw=viewportwidth
vh=viewportheight
の略
こちらはWEBブラウザの大きさによって高さや幅が変化します。
すごく極端ですが、検証ツールで横2205px,縦1000pxの画面サイズにしました。
水色の領域は
div{
width:100vw;
height:100vh;
background-color:aqua;
}
となり、どのブラウザの大きさにしても画面幅いっぱいに広がっています。
赤の領域は
p{
width: 50%;
height: 50%;
background-color: red;
}
つまりブラウザ幅の半分となっています。先述したとおりWEBブラウザの大きさによって決まるので<div>の子要素だったとしても、親要素の大きさには影響しません。
vw,vhはどブラウザでも画面幅いっぱいに表示したいものがあるときなどに活躍します。
em
em(エム)とは、親要素に指定したサイズが基準となる単位です。
See the Pen Untitled by 高龍 (@ykwxttph-the-encoder) on CodePen.
親要素である<p>タグに対しては何も記述していないので、デフォルトの16pxが基準となり
子要素のには「 font-size:1.5em;」をしています。つまり、16×1.5=24pxとなっています。
rem
remは「root em」の略で、rootつまり、一番最上位階層にあるemを意味しています。
emとは違い、親要素を基準にするのではなく、HTMLタグに指定されたサイズを基準にしているとということです。
ここではHTMLには何も記述していないため、デフォルトのフォントサイズは16pxです。
See the Pen Untitled by 高龍 (@ykwxttph-the-encoder) on CodePen.
.word-1{
font-size:2rem;
/* HTMLのデフォルトが16pxのため
16px×2rem=32pxとなる */
/* font-size:2em; */
/* この場合、親要素が24px指定のため
2em×24px=48pxとなる */
}
.word-2{
font-size:2.5rem;
/* HTMLのデフォルトが16pxのため
16px×2.5rem=40pxとなる */
/* font-size:2.5em; */
/* この場合、親要素が24px指定のため
2.5em×24px=60pxとなる */
}
.word-3{
font-size:3rem;
/* HTMLのデフォルトが16pxのため
16px×3rem=48pxとなる */
/* font-size:3em; */
/* この場合、親要素が24px指定のため
3em×24px=72pxとなる */
}
emは親要素ごとに基準が変わってくるので、emを多用すると分かりづらく混乱しがちですが
remは全体を通して文字サイズが決めることが出来るのでemより使いやすいです。
さらにremはブラウザの文字サイズの変更にも対応しています。
グーグルの設定でいうと、この部分ですね。
ここの部分を調整することによって文字サイズを大きくしたり小さくしたり出来ます。
ユーザーの方が何らかの理由で文字サイズを大きくしたい、という場合にrem指定をしていると
ここも可変に合わせて動いてくれるので、ユーザビリティ（お客様の希望や都合にとって良い状態）に優れています。逆にここがpx指定だと、この機能は使えないので、ユーザビリティには良くないと言えるでしょう。
とはいえ、rem指定はユーザーで自由に文字サイズを変化させることが出来るということから、場合によってはレイアウト崩れの原因となる可能性が出てきます。pxで幅や高さが絶対値で固定されている要素でrem指定をすると、スマホ表示で崩れてしまう可能性があります。
普通の文字設定では問題は無いのですが
文字を大きくした兼ね合いで、ボタンが文字の中に入ってしまいました。
このようにrem指定、px指定は上手く組み合わせで考えなくてはならない場面もあります。
実際は文字サイズ調整機能より、ズーム機能も使う人も多いという意見がありますし、remとpx、どちらを使うかは難しいところです。
おわりに
CSSの単位のそれぞれの使い方はその他にもいろいろありますが、まずはこれらの使い方を知っておくと、レスポンシブなどにも柔軟に対応できる可能性が広がります。まずはいろいろ試してみると良いでしょう。