ウェブDeBLOG｜トライデントコンピュータ専門学校 Webデザイン学科

親要素div内にpを二つ用意して、それぞれ文字を設置します。
divには、font-size:30pxを設定し、一つのpには、font-size:16pxを設定します。
font-size:16pxを設定していないpは、divに設定した30pxのフォントサイズで表示され、font-size:16pxで設定したpは、親要素のdivの影響を受けず、そのまま16pxのフォントサイズが表示されます。

相対単位（Relative Lengths）

相対単位とは、何かとの比較によってサイズが決まります。それは、親要素のフォントサイズやビューポート（画面幅）などになります。

フォント基準

親要素のフォントサイズや、ルートのフォントサイズを基準にした単位です。

親要素のフォントサイズとの相対単位は、em, ex, cap, ch, icとなります。
lhは、親要素のline-heightとの相対単位になります。

  
フォントサイズ：30px
  
フォントサイズ：16px
  
フォントサイズ：1em
  
フォントサイズ：1ex
  
フォントサイズ：5cap
  
フォントサイズ：1ch
  
フォントサイズ：5ic
  
フォントサイズ：5lh

div{
  font-size:30px;
  font-family:sans-serif;
}
p.size16px{
  font-size:16px;
}
p.size18px{
  font-size:1em;
}
p.size1ex{
  font-size:1ex;
}
p.size1cap{
  font-size:5cap; /*ブラウザが対応していません。*/
}
p.size1ch{
  font-size:1ch;
}
p.size1ic{
  font-size:5ic; /*ブラウザが対応していません。*/
}
p.size1lh{
  font-size:5lh; /*ブラウザが対応していません。*/
}

em

親要素のfont-sizeの要素に継承されたフォントの大きさを表します。
親要素に10pxが設定されていた場合、子要素に1.2emが設定されていた場合、12pxが表示されます。

ex

親要素のfontにおける x-height です。
"x"の文字を持つフォントでは一般的に、フォントにおける小文字の高さに相当します。
x-heightを測定することが不可能または非現実的な場合、0.5em（=1ex）の値が設定されます。

ch

親要素fontにおける"0"の幅に相当します。
"0" の文字の大きさを判断することが不可能または無意味である場合、幅が0.5em、高さが1emと仮定されます。

先程の絶対単位の例と同様にdivにfont-size:30pxを、子要素にはfont-size:16pxを設定したpを置いてあります。
1emを設定したpは、divに設定した30pxのフォントサイズ：1（相対）で表示されます。1exもdivの30pxの"x"の縦の長さ：1（相対）、1chも同様にdivの30pxの"0"の幅：1（相対）で表示されています。

capとic、lhに関しては、まだ非対応のブラウザが多いので、実際の表示はできません。
Code Penで、それぞれ5cap、5ic、5lhを設定してみましたが、そのまま親要素のフォントサイズが継承されて表示されました。

ルート要素のフォントサイズとの相対単位は、remです。
rlhは、ルート要素のline-heightとの相対単位になります。

  
フォントサイズ：30px
  
フォントサイズ：16px
  
フォントサイズ：1em
  
フォントサイズ：1rem
  
フォントサイズ：5rlh

:root{
  font-size:24px;
}
div{
  font-size:30px;
  font-family:sans-serif;
}
p.size16px{
  font-size:16px;
}
p.size1em{
  font-size:1em;
}
p.size1rem{
  font-size:1rem;
}
p.size1rlh{
  font-size:5rlh;
}

rem

ルート要素（ふつうは ）のfont-sizeを基準とした相対値になります。
ルートに24pxを設定して、フォントの大きさを比べてみましょう。

remは、ルートのフォントサイズとの相対単位ですので、divにfont-size:30pxの子要素ですが、影響を受けていません。
:rootの24pxとの：1（相対）で表示されています。

rlhは、lhと同じように対応しているブラウザは、まだありませんが、コリスで使い方などが紹介されていました。

ビューポート基準

viewportのサイズを基準とした単位になります。
viewportとは、Webサイトの表示領域のことを言います。端的に言えばブラウザのウインドウの広さのことです。

viewportとの相対単位は、vw, vh, vmin, vmaxとなります。
viはインライン方向のviewportサイズとの相対単位、vbはブロック方向のviewportサイズとの相対単位になります。横書きの場合と日本語の縦書きの場合では対象が縦横逆になります。

viとvbは、まだ対応するブラウザがありません。

ビューポート：width:px, height:px

  
フォントサイズ：1em
  
フォントサイズ：5vw
  
フォントサイズ：5vh
  
フォントサイズ：1vi
  
フォントサイズ：1vb
  
フォントサイズ：5vmin
  
フォントサイズ：5vmax

:root{
  font-size:16px;
}
div{
  font-size:30px;
  font-family:sans-serif;
}
p.size1em{
  font-size:1em;
}
p.size1vw{
  font-size:5vw;
}
p.size1vh{
  font-size:5vh;
}
p.size1vi{
  font-size:1vi;
}
p.size1vb{
  font-size:1vb;
}
p.size1vmin{
  font-size:5vmin;
}
p.size1vmax{
  font-size:5vmax;
}

vw

ビューポートの初期値の"幅"の1%と同じです。

vh

ビューポートの初期値の"高さ"の1%と同じです。

vmin

vwとvh の小さい方です。

vmax

vwとvh の大きい方です。

Code Penでは、Result画面のサイズがviewportとなるようです。記事に埋め込んだ時のサイズが小さいので若干大きく5vw, 5vh, 5vmin, 5vmaxに設定しました。

ビューポートのサイズを基準にしていますので、親要素divのフォントサイズやrootの影響を受けていません。
vwは、ビューポートのwidthサイズ1%：5（相対）で表示され、vhは、heightサイズ1%：5（相対）で表示されています。
vmin, vimaxは、それぞれvw, vhの小さい方・大きい方と同サイズになっています。

今回は、フォントサイズのみで検証してみましたが、単位はmarginやpadding, widthなど長さを表す部分に利用できます。
文字サイズを基準にすることで、読みやすいレイアウトや、ビューポートを基準にして多岐にわたるデバイスや状況によって最適なレイアウトなども実装できます。
せっかく使える単位ですので、最適な単位を利用していきたいですね。

参考：The new (and old) CSS units you've never heard about

体験入学実施中
Webデザイン学科

関連記事

• JavaScriptで要素を挿入する。 (2023/09/30)
• map()？new Map？ (2023/08/10)
• ポートフォリオサイトを印刷用CSSでプリントする。 (2022/03/05)
• @useの使い方がわからない…ので (2022/02/12)
• display:contentsを使ってみたい。 (2021/09/30)
• jQueryだっていいじゃない。 (2021/03/09)
• TypeScriptってなんだ?! (2021/03/01)
• CSSの単位 (2020/09/03)
• JavaScriptのclassについて、書いてみた。 (2019/12/30)
• picture要素と、source要素と、srcset属性と (2018/10/02)