今回はCSSコーディングで使われる、px・rem・%・em・vw・vhの使い分けについてまとめました。
それぞれの単位を使い分けることで、より質の高いコーディングをすることが出来るようになります。
絶対値と相対値の違い
まずそれぞれの単位を解説する前に、絶対値と相対値の違いについて理解しましょう。
絶対値
絶対値とは、どんなブラウザ幅で見ても数値が変わらない固定の値のことです。
pxが絶対値になります。
例えば、25pxと指定したらPC・タブレット・スマホで見ても必ず25pxになります。
値を固定させたい場合に便利ですね。
相対値
相対値とは、絶対値と逆で可変的な値のことです。
rem・%・em・vw・vhが相対値となります。
相対値を上手く使うことで、レスポンシブがやりやすくなりますね。
pxについて
pxは絶対値の単位です。
例えば以下のようにCSSを指定するとしましょう。
<h2>pxで指定したフォントです。</h2>
<style>
h2 {
font-size: 25px;
}
</style>
上記のコードはどんなデバイス幅でも25pxが表示されるようになります。
コーディングにおいて基本はpxを使うことが多いです。
remについて
remとは、htmlで指定した値を基準に相対的な値を指定することが出来る単位です。
例えば、htmlに対して10px、h2に対して2.5remを指定したらh2は何pxになるでしょう。
<h2>remを基準としたフォントサイズです。</h2>
<style>
html {
font-size: 10px;
}
h2 {
font-size: 2.5rem;
}
</style>
remはhtmlの値を基準にするので、2.5remの場合は「10px × 2.5 = 25px」となります。
%について
%は親要素の値に対して相対的に値を指定することが出来る単位です。
例えば、htmlに対して62.5%、h2に200%を指定したとします。
<h2>remを基準としたフォントサイズです。</h2>
<style>
html {
font-size: 62.5%;
}
h2 {
font-size: 200%;
}
</style>
%は親要素を基準に値が決まるので、html要素が16pxでh2はその2倍なので、20pxとなります。
フォントで%を指定することはあまりありませんが、フレックスボックスで横並びにしたアイテムに対して%を指定して相対的な幅を持たせることは良くあります。
emについて
emも親要素の値を基準に相対的な値を指定することが出来る単位です。
例えば、親要素であるboxクラスに対して「font-size: 20px;」を、子要素であるh2に対して「font-size: 2em;」と指定したとします。
<div class="box">
<h2>remを基準としたフォントサイズです。</h2>
</div>
<style>
.box {
font-size: 20px;
}
h2 {
font-size: 2em;
}
</style>
emは親要素の値を基準に相対的に値が決まるので、2emは「20px × 2 = 40px」になります。
上記のコードは単純だから良いですが、もっとコードが複雑になると分かりにくくなるので、使う場合は慎重に考える必要があります。
emは文字の間隔を調整する際に使用されるletter-spacingプロパティを使う時によく使用しますね。
vwについて
vwとは、「viewport width」の略であり、ビューポート幅に対して相対的な値を指定することが出来る単位です。
例えば、1920pxのブラウザ幅で480pxの横幅のボックスをvwで指定するとします。
<div class="box"></div>
<style>
.box {
background-color: red;
width: 25vw;
height: 300px;
}
</style>
pxからvwへの変換は、一括pxからvw計算機を使えば簡単に出来ます。
上記サイトで計算すると、「480px ÷ 1920px = 25vw」となります。
vwを使うことで、ブラウザ幅に対して相対的に値を指定することが出来るので、どんなブラウザ幅で見ても表示が崩れないレスポンシブをすることが出来ますよ。
vhについて
vhは「viewport height」の略で、縦幅を基準に相対的な値を指定することが出来る単位です。
例えば、boxクラスに対して100vhを指定すると、画面幅一杯に赤色の背景色が広がります。
<div class="box"></div>
<style>
.box {
background-color: red;
width: 100vw;
height: 100vh;
}
</style>
100vhとは、つまり画面幅一杯ということです。
よくファーストビューの背景画像を画面幅一杯に広げて表示したい場合に使用されますね。
まとめ
以上が、CSSコーディングで使われる、px・rem・%・em・vw・vhの使い分けでした。
